HTML CheatSheet

HTML Tags

Tags Description Example
<!DOCTYPE html> All HTML documents must start with a document type declaration N/A
<html></html> Required for HTML documents
<body></body> The body element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1></h1> to <h6></h6> Headings from most important to least important. Good practice is to never jump multiple headings at a time
<head></head> The head element contains general information about an HTML page that isn't displayed on the page itself. This information is called metadata and includes things like the title of the HTML document and links to stylesheets.
<title></title> The title tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab View image above
<div></div> A container element, holds no meaning. Normally its given a class or id attribute to define what the div is.
<p></p> Used to insert text such as a paragraph
<span></span> This is a inline container thats purpose is to group specific text. Comes in handy if you want to style a specfic part of text. View image above
<strong></strong> and <em></em> Strong is used to Bold text and em is used to emphasise text.
<ol></ol> Ordered list, aka numbered.
<ul></ul> Unordered list, aka bullet points View image above
<li></li> The actual list data. View image above
<img/> Used to add a image for content. If a image is just for style purposes, use CSS instead. The img tag needs the attributes src to link the image. The alt tag is used incase the img cant load.
<video></video> Used to add a video for content. Theres several attributes such as controls.
<a></a> The anchor tag is used to link the same page to another document, or to a website using href attribute.
<!--This is a comment--> Comments are used to help you and others read the code. Anything commented will not display on document, only in source code or DOM.
<table></table> The table container
<thead></thead> Table head is where the table headers go. View image above
<tbody></tbody> Table body is where the table content goes View image above
<tr></tr> Table row is the row that well hold the table data. View image above
<th></th> Table header View image above
<td></td> Table data, or cell View image above

Semantic HTML Tags

Tags Description Example
<nav></nav> Nav encapsulates the page's navigational links. It is often placed inside the header or footer
<header></header> Header describes the content at the top of the page, it may include a logo, nav links, searchbar, main title, etc
<main></main> Main encapsulates the main content of a page between the header/navigation and the footer areas
<section></section> Section defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. This is more semantically correct then just using a meaningless <div>container
<article></article> Article holds content that makes sense on its own such as articles, blogs, and comments
<aside></aside> The aside element is used to mark additional information that can enhance another element but isn't required in order to understand the main content. Usually, this information would be in a sidebar or a location where it doesn't obstruct the main piece of content
<figure></figure> and <figcaption></figcaption> The figure element is used to encapsulate media such as an image, diagram. or code snippet.
The figcaption element is used to describe the media encapsulated within the figure element