Html5 Semantic Tags Cheat Sheet

Top level semantics

<main> </main>

Your main content. The content that are unique to each page.

<aside> </aside>

Aside content, related to the content it is placed in.

<article> </article>

Content that mke sense on its own. Like this whole list is inside an article tag.

<section> </section>

Sections of an article, or the webpage. Each box you see here is a section within an article

<nav> </nav>

Navigation/navbars. You can have several and it tell crawlbots that it is a list of links to your website.

<header> </header>

The start of your webpage, and start of an article if it is logical. You can use several per webpage.

<footer> </footer>

The latest part of a webpage. Most used as the tiny bar you see on this website. Can also be used inside article.

Text Formatting

<hx> </hx>

Heading. x Can be 1 to 6, where 1 is biggest.

<b> </b>

Bold text

<i> </i>

Italic text

<u> </u>

Underlined text

<strike> </strike>

Forms a line trough your text



Superscript. Small text^{to the top right}

<small> </small>

Small text

<tt> </tt>

Typewriter text

<pre> </pre>

Pre-formatted text. Respects all spacing and newlines.

<blockquote> </blockquote>

Text quoted from another source

<strong> </strong>

Strong, Bold in most browsers

<em> </em>

Emphasis, Italics in most browsers

Sectioning

<div> </div>

Sectioning. Last resort if there is no semantic option. Is block-line

<p> </p>

Paragraph. Adds space above and under.

<br>

Line breake/new line

<hr>

Horizontal line.

<nobr> </nobr>

Prevents line break, making all in one long line. Useless, use CSS instead.

<span> </span>

A way to highlight an add class to small part of text. In-line and dont add space as <div> do.

Image

<img src='url' alt='text'>

Basic Image

<img> Tag Attributes:

Options for this tag

src='URL'

URl of the image. Absolute URL or navigate/filename

alt='Text'

Text for the image. 'required', but it works without.

Link

<a href='URL'>Anchor text </a>

Basic Link

<a> Tag Attributes:

Options for this tag

href='URL'

URL of destination. Absolute URL or navigate'd.

name='Text'

Anchor text. Good anchor text is cruzial for good SEO.

target='Option'

Link target location: _self, _blank, _top, _parent.

href=''#ID''

Link to an ID you have on the page. Like the tiny NAV for this page do.

href='mailto:email'

Email link. Not used alot since many spam mail crawlbots search for them.

Lists

<ol> </ol>

Ordered List. Add numbers for each item.

<ul> </ul>

Un-ordered List. Add a tiny dot for every item.

<li> </li>

List item. Nested inside ordered/unorderen list.

<dl> </dl>

Definition List. If you want to tell crawlbots that you are explaining term's or phrases. Good semantic value

<dt> </dt>

Term or phrase being defined.

<dd> </dd>

Explanation. Like this webpage, this is a dd tag.

Tables

<table> </table>

Define a Table

<tr> </tr>

Table Row within table

<th> </th>

Header Cell within table row

<td> </td>

Table Cell within table row

Forms

<form> </form>

Form input group decleration

<form> Tag Attributes:

Options for form tag idented below

action='URL'

URL of Form Script

method='Option'

Method of Form: get, post

enctype='Option'

For File Upload: enctype='multipart/form-data'

<input> </input>

Input field within form

<input> Tag Attributes:

Options for this tag idented below

type='Option'

Input Field Type: text, password, checkbox, submit etc.

name='Text'

Form Field Name (for form processing script)

value='Number'

Value of Input Field

size='Number'

Field Size

maxlength='Number'

Maximum Length of Input Field Data

checked

Mark selected field in radio button group or checkbox

<button>

Creates a button

<button> Tag Attributes:

Options for button tag idented below

type='Option'

Button Type: submit, reset, button

name='Name'

Button Name (for form processing script)

value='Name'

Label on Button

size='Number'

Button Size (width)

<select> </select>

Select options from drop down list

<select> Tag Attributes:

Options for select tag idented below

name='Name'

Drop Down Combo-Box Name (for form processing script)

size='Number'

Number of selectable options

multiple

Allow multiple selections

<option> </option>

Option. This go inside select tag for several drop down options

<option> Tag Attributes:

Options for option tag idented below

value='Name/Number'

Option Value

selected

Set option as default selected option

<textarea> </textarea>

Large area for text input

<textarea> Tag Attributes:

Options for select tag idented below

name='Name'

Text Area Name (for form processing script)

rows='Number'

Number of rows of text shown

cols='Number'

Number of columns (characters per rows)

wrap='Option'

Word Wrapping: off, hard, soft

Special Characters

&lt;

< - Less-Than Symbol

&gt;

> - Greater-Than Symbol

&amp;

& - Ampersand, or 'and' sign

&quot;

' - Quotation Mark

&copy;

© - Copyright Symbol

&trade;

™ - Trademark Symbol

&nbsp;

- A space (non-breaking space)

&#??;

ISO 8859-1 character - replace ?? with the iso code(Opens new window. external site)

Hope you learned something!
If you find any typos, got questions or just want to say hi, please do so in the comment section below :) Dont forget to like and share