Semantic HTML Elements - jpjohnsonjr/learning-notes GitHub Wiki

About

Semantic HTML elements tell something about the meaning of the content. Helps humans and/or machines to understand the meaning of content. May also help search engine rankings (i.e., SEO). "May" is important; experts disagree about whether they can, because search engines have become much more sophisticated.

Examples

These are all block-level elements.

Headings

<h1> through <h6> Headings should not be used to convey styling. They are intended to convey meaning and structure.

<header>

Child of <body> -- not to be confused with <head>. Often consists of organization logo, company tag line, sometimes navigation.

<nav>

Navigation -- used for links to different parts of the website.

<section> and <article>

Usually article goes inside of section, but not mandatory.

<aside>

Element that relates to the main topic, i.e., related posts.

<footer>

Contains footer, such as s copyright.

⚠️ **GitHub.com Fallback** ⚠️