HTML – Building with Semantic Elements
A semantic element is one that clearly describes the meaning of its content to both the browser and the code developer for ease of organizing the page data.
A semantic element is one that clearly describes the meaning of its content to both the browser and the code developer for ease of organizing the page data.
The <address> tag defines the contact information for the owner of a document/article and can be an email address, URL, physical address, phone number, etc.
The <article> tag is used in a blog post, forum post, magazine article, etc. It specifies a self-contained composition in a site, document, or page.
The <aside> tag refers to content loosely related to the rest of the page content. If it is removed, the remaining content will still make sense.
The <bdi> tag (bi-directional isolation tag) is used to isolates text that may be formatted in a different direction from the other text surrounding it.
The <figcaption> tag defines a caption for a photo set inside the <figure> tag.
The <figure> tag is used to mark up a photo in a document to add the <figcaption> tag which defines a caption for the photo.
The <footer> tag defines a footer for a document or section within a document. It often contains contact info, copyright, and a sitemap, amongst other things.
The <header> element is a container for things like a logo, breadcrumbs, navigation links, or other introductory content.
The <main> tag specifies the main content of a page and should not contain anything that is repeated across other pages such as sidebars, navigation, etc.
The <mark> tag defines text that should be marked or highlighted for reference purposes or for its relevance in some context.
The <nav> tag defines a set of navigation links intended to be a navigation block such as a main menu, sidebar menu, or footer menu.
The <section> tag specifies a section in a document. There can be multiple sections on the same page.
The <time> tag is used for displaying a human-readable date and time. The datetime attribute is added to translate it into a machine-readable format.
The <wbr> (word break opportunity) tag specifies where, in a string of text, it would be preferred to add a line break if necessary.