Elements
See some examples of commonly used HTML elements
Generic elements
These are used to help structure the page and have no semantic meaning. They do not display anything on the page. Often used as containers for other parts of the document.
<div>...</div> <span>...</span>Block vs Inline
Block
Block level elements stretch full width of their parent and push following elements down
Inline
Inline elements only take up the width of their content
This paragraph has a inline span here in the middle
Landmark elements
These are used to form the semantic page structure and provide additional context for SEO and accessibility. They do not display anything on the page.
<header>...</header> <nav>...</nav> <main>...</main> <article>...</article> <footer>...</footer>Text elements
Here are some common elements which are used to provide semantic meaning around text.
They might have default browser styles but can be overridden using CSS.
| Tag | Description | Example |
|---|---|---|
<p> | One of the most common elements used for the text content on a page or article | This is a paragraph. Used to contain sentences. |
<br> | Creates line break, normally used inside paragraph | Line one. |
<strong> | Denotes important text. If you text is not important but needs to be styled as bold text use CSS | Strong text |
<em> | Mark up emphasised text in a document. Screen readers will announce this with verbal stress | You must learn HTML |
<code> | Show inline code snippet | alert('Hello'); |
<small> | Used for legal text. If you just want to reduce font size use CSS | © Copyright 2021 |
Full reference at MDN Web Docs: HTML elements reference