The last lesson used headings and paragraphs. An element is one piece of a document; a tag is a marker in its source. For a paragraph, the opening tag, content and closing tag together form the element:
<p>See you Saturday!</p><p> opens the paragraph and </p> closes it. The slash goes before the name in the closing tag. We use lowercase names and explicit closing tags throughout these examples.
Add information with attributes
An attribute adds information inside the opening tag:
<p title="Meet at ten in the morning">See you Saturday!</p>title is the attribute name. The equals sign connects it to a value in straight quotation marks. A space separates it from p. The visible paragraph remains “See you Saturday!” Separate multiple attributes with spaces too. Quoting values keeps words containing spaces together.
Many desktop browsers show a tooltip when you hover over this paragraph. Touch, keyboard and assistive-technology users may not receive it reliably. Keep essential information, such as meeting times, in visible text; this example demonstrates where an attribute belongs.
Nest elements in order
strong identifies important content, usually displayed in bold:
<p>Please bring <strong>your own book</strong>.</p>Putting one element inside another is called nesting. Open the outer p first, then strong. Close them in reverse order: strong first, then p. Crossed tags such as <p><strong>text</p></strong> are incorrect even if the browser tries to repair them. Chapter two explores text meaning further.
Void elements
<br> inserts a line break. It is a void element: it cannot contain child content and has no closing tag. Do not write </br>. Later examples include img, input and meta. An empty paragraph, <p></p>, is still a normal element, not a void element.
In the Lab, compare an attribute with a nested element. Change the range of words wrapped in strong and observe which words change.
Page experiment: Elements, tags and attributes
Compare the examples, then change one part of the HTML using the observation prompt. Compare the source with the real rendered page.
Try hovering over the paragraph. The title attribute does not replace its text.
The preview uses native browser headings, paragraphs and form controls. Switching examples replaces your edits; Reset lab restores the initial state. Follow in-page links, type and select options. This practice preview does not send form data or run scripts. To try locally, save the complete code as index.html and open it in a browser.
KNOWLEDGE QUIZ
Build it yourself: Elements, tags and attributes
Create index.html, write a complete page using the requirements below, then save and open it in a browser. Interact with the page to check it. The reference is one possible implementation; wording may differ.
- Write a p saying “Bring a water bottle” and mark “water bottle” with strong.
- Add title="Activity reminder" to the opening p tag and check the closing order.