HTML Semantic Tags for Structure

Essential Tags

!DOCTYPE

document type (!DOCTYPE html = HTML5)

HTML

root of an HTML document, containing all HTML content (except !DOCTYPE tag)

We can (and should) specify the language as an attribute (lang="en-US")

HEAD

document information: TITLE (required), META, LINK, SCRIPT, NOSCRIPT, STYLE, BASE

BODY

container for all the content that will be displayed

Content Tags

HEADER

introductory information of a webpage or section (main header, navigation links)

NAV

contains navigation links (often included within the HEADER tag)

MAIN

main content (one per webpage); should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms

ARTICLE

could stand independently of the page/site it is on (often used for blog posts)

SECTION

not necessarily self-contained; forms part of something else

DIV

can be used as a container for other HTML elements; STYLE, CLASS, and ID are commonly used attributes.

FIGURE and FIGCAPTION

self-contained content, such as illustrations, diagrams, and photos

Semantic HTML
Example of a webpage structure using semantic HTML

FORM

used to create an HTML form for user input

SUMMARY

visible heading for a DETAILS element (such as the "Details" title below)

DETAILS

Details

additional details the user can view or hide

FOOTER

usually includes contact information, copyright information, and some site navigation