Module 9: Semantic HTML and Page Layouts
address, search, figure, and Other Useful Semantics
Recognize semantic elements for contact details, search regions, and supporting content.
A few semantic elements are easy to overlook but useful in the right context.
address represents contact information for the nearest article or the page as a whole. It is not a generic element for any street address in a sentence.
<address>
Editorial team: <a href="mailto:editor@example.com">editor@example.com</a>
</address>
search identifies a region containing search or filtering controls. It can provide a useful landmark when the page has more than one important search area.
<search aria-label="Search the documentation">
<form action="/search/" method="get">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Find</button>
</form>
</search>
figure groups self-contained media or examples, often with figcaption. time represents a date or time. data associates visible text with a machine-readable value. mark highlights text relevant to the current context.
A semantic element should not be selected because its default browser style looks convenient. The purpose of the content should drive the element choice.