Show Menu
Cheatography

HTML Basics Cheat Sheet by

HTML Basics cheat sheet covering the most common tags need to make simple web pages.

Basic Structure

<!­DOC­TYP­E>
Version of HTML
<h­tml­>
HTML document
<h­ead­>
Page Inform­ation
<b­ody­>
Page Contents

Page inform­ation

<meta />
Metadata
<t­itl­e>
Title
<link />
Link to resource
<s­tyl­e>
Style resource
<s­cri­pt>
Script resource

Lists

<o­l>
Ordered list
<u­l>
Unordered list
<l­i>
List item
<d­l>
Definition list
<d­t>
Definition term
<d­d>
Term descri­ption

Document Structure

<h­[1-­6]>
Heading
<d­iv>
Page section
<s­pan­>
Inline section
<p­>
Paragraph
<br />
Line break
<hr />
Horizontal rule

Void (Self-­clo­sing, empty) Tags

<img />
<meta />
<input />
<hr />
<link />
<br />

Text Markup

<s­tro­ng>
strong emphasis
<e­m>
Emphasis
<b­loc­kqu­ote­>
Long quotation
<q­>
Short quotation
<a­bbr­>
Abbrev­iation
<a­cro­nym­>
Acronym
<a­ddr­ess­>
Address
<p­re>
Pre-fo­rmatted text
<c­ode­>
Code
<c­ite­>
Citation
<s­ub>
Subscript
<s­up>
Supers­cript
 

Links

<a href="">
Page link
<a href="m­ail­to:­"­>
Email link
<a name="n­ame­"­>
Anchor link
<a href="#­nam­e">
Link to anchor

Forms

<f­orm­>
Form
<f­iel­dse­t>
Collection of fields
<l­ege­nd>
Form legend
<l­abe­l>
Input label
<input />
Form input
<s­ele­ct>
Drop-down box
<o­ptg­rou­p>
Group of options
<o­pti­on>
Drop-down options
<t­ext­are­a>
Large text input
<b­utt­on>
Button

Tables

<t­abl­e>
<c­apt­ion­>
<t­hea­d>
<t­bod­y>
<t­foo­t>
<c­olg­rou­p>
<col />
<t­r>
<t­h>
<t­d>

Core Attributes

class
style
id
title

HTML5 Semantic Tags

<a­rti­cle­>
Article
<a­sid­e>
Outside the main flow of the narrative
<d­eta­ils­>
Details of an element
<f­igu­re>
Group of media content and their caption
<f­oot­er>
Footer for a section or page
<h­ead­er>
Header for a section or page
<m­ark­>
Marked text
<n­av>
Navigation links
<s­ect­ion­>
Section of page or article

Image

<i­mg>
Image

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.