The browser repairs bad nesting
Look at the dashed boxes: the second paragraph closed before the div, and the stray </p> made a third, empty paragraph.
An element is one piece of a page, written as an opening tag, some content and a closing tag; attributes inside the opening tag add extra settings like an id, a link address or an on/off switch.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a paragraph with the id intro and the class lead, containing the text Welcome to my page where the word my is emphasised.
Write a text box (<input>) that is disabled and required, using boolean attributes correctly. Then write how you'd make it enabled again in HTML.
Find and fix the two mistakes: <p>Read <a href=about.html>about me</p></a><br></br>
Explain it without notes
What is the difference between an element, a tag and an attribute?
What is a void element? Name five.
How do boolean attributes work, and why doesn't disabled="false" enable a button?
What happens when you put a <div> inside a <p>?
Preview
Console
Nothing logged yet.Expected console output
What you wrote: <b>bold <i>both</b> italic</i>
What you got: Overlapping: <b>bold <i>both</i></b><i> italic</i>
Paragraphs on the page: 3