HTML 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)

Last words

Hope this list made sense to you. Things like article/section can be nestet. For a good example of that check the source code of this very webpage and you see alot of sectioning, divided by headings. Dont hesitate to test stuff foryourself in my Coding Playground!

As a good practice get an overview of every single HTML tag and use them when it is logical. Crawlbots will love it. If this is not nough for you then you also can add schema.org to your website. It go more in-dept and can give you advantages in search queries by optimizing and adding additional information. Dont worry, got a good idea for a schema.org cheat-sheet later on.