Skip to content
Lucia LADDERHTML Fundamentals Chapter 02Loading learning progress…
HTML-02-01 · LESSON 1 / 4 · ± 8 MINUTES
Tags vs. Elements
After this lesson, you can distinguish opening tags, content, and closing tags, then write two complete elements.
BEGIN WITH A QUESTION
Understanding begins with a question.
In <p>Hello!</p>, is ‘p’ the paragraph, or is the whole piece the paragraph? Understanding these parts makes error messages much more useful.
Distinguish opening tags, content, and closing tags, then write two complete elements.
UNDERSTAND THE CONCEPT
Tags mark boundaries
<p> is an opening tag. Hello! is the content. </p> is the closing tag, marked by a slash before the name. The whole <p>Hello!</p> sequence is one paragraph element. The closing name must match the opening name.
Content is not always plain text
An element can contain text or other elements according to HTML's rules. Emphasis within a paragraph is covered in a later lesson. For now, write h2 and p as sibling elements: consecutive elements that do not wrap each other.
Writing habits
Use lowercase tag names consistently. Write the opening and closing pair first, then put content between them. Some elements have special closing rules, covered in Nesting & Void Elements.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<h2>Selected Book</h2>
<p>I chose a book about plants.</p>BROWSER RESULT
H2 is a subheading; p is a paragraph explaining it. They are separate elements.
TRY TOGETHER
Practice clarifies understanding.
<p>Enjoy reading.<>Show a hint
Use the opening name with / before it.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
Two elements, two roles
Repair the code so ‘Reading Agenda’ is a complete h2 and the sentence below it is a complete p. Do not place the paragraph inside the heading.
Editor shortcuts & help
- Ctrl + Space
- Show suggestions · ↑ ↓ select · Enter accept · Esc close
- Shift + Alt + F
- Format code
- Ctrl/⌘ + F
- Find and replace text
- Ctrl/⌘ + [ / ]
- Decrease / increase indentation
- Tab
- Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
- Ctrl/⌘ + Z
- Undo changes, including formatting
Suggestions use the language, snippets, and local code context. Formatting runs in your browser.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- Two closing tags have been swapped.
- Close h2 before opening p.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Tags mark boundaries; an element includes its opening tag, content, and closing tag when required.
- Opening and closing tag names must match.
- Sibling elements are consecutive, rather than wrapped inside each other.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.
Next lesson →