This cheat sheet - or HTML code quick reference - lists the common HTML tags and their attributes, grouped into relevant sections in an easy-to-read format.
- Html Semantic Tags Cheat Sheet Template
- Html Semantic Tags List
- Semantic Html Cheat Sheet
- Non Semantic Html
- Html Semantic Tags Cheat Sheet Free
What is
html? What are
tags? - Perhaps check out where to start or what is html first :-)
HTML Cheat Sheet is used to develop web pages and HTML latest version 5.x has different features and functionalities in its HTML Elements and Form tags. The other different features are HTML local and session storages in the browser. HTML CHEAT SHEET Berners-Lee invented it back in 1991. Today HTML5 is the standard version and it's supported by all modern web browsers. Our HTML cheat sheet gives you a full list of all the HTML elements, including descriptions, code examples and live previews. Simply scroll down to browse all HTML tags alphabetically or browse tags by their. A cheat sheet covering the basic HTML elements and their purpose.
Basic HTML Structure | Help | Top |
---|
Common Tags for Blogs | Help | Top |
---|---|
<h?> heading </h?> | Heading (h1 for largest to h6 for smallest) |
<p> paragraph </p> | Paragraph of Text |
<b> bold </b> | Make text between tags bold |
<i> italic </i> | Make text between tags italic |
<a href='url'> link name </a> | Create a link to another page or website |
<div> ... </div> | Divide up page content into sections, and applying styles |
<img src='filename.jpg'> | Show an image |
<ul> <li> list </li> </ul> | Unordered, bullet-point list |
<br> | Line Break (force a new line) |
<span> red </span> | Use CSS style to change text colour |
Text Formatting | Help | Top |
---|---|
<h?> ... </h?> | Heading (?= 1 for largest to 6 for smallest, eg h1) |
<b> ... </b> | Bold Text |
<i> ... </i> | Italic Text |
<u> ... </u> | Underline Text |
<strike> ... </strike> | Strikeout |
<sup> ... </sup> | Superscript - Smaller text placed below normal text |
<sub> ... </sub> | Subscript - Smaller text placed below normal text |
<small> ... </small> | Small - Fineprint size text |
<tt> ... </tt> | Typewriter Text |
<pre> ... </pre> | Pre-formatted Text |
<blockquote> ... </blockquote> | Text Block Quote |
<strong> ... </strong> | Strong - Shown as Bold in most browsers |
<em> ... </em> | Emphasis - Shown as Italics in most browsers |
<font> ... </font> | Font tag obsolete, use CSS. (*) |
Section Divisions | Help | Top |
---|---|
<div> ... </div> | Division or Section of Page Content |
<span> ... </span> | Section of text within other content |
<p> ... </p> | Paragraph of Text |
<br> | Line Break |
<hr> | Basic Horizontal Line |
<hr> Tag Attributes: | |
size='?' | Line Thickness in pixels |
width='?' | Line Width in pixels |
width='??%' | Line Width as a percentage |
color='#??????' | Line Colour(*) |
align='?' | Horizontal Alignment: left, center, right (*) |
noshade | No 3D cut-out |
<nobr> ... </nobr> | Line Break |
Images | Help | Top |
---|---|
<img src='url' alt='text'> | Basic Image |
<img> Tag Attributes: | |
src='url' | URL or filename of image (required!) |
alt='text' | Alternate Text (required!) |
align='?' | Image alignment within surrounding text (*) |
width='??' | Image width (in pixels or %) |
height='??' | Image height (in pixels or %) |
border='??' | Border thickness (in pixels) (*) |
vspace='??' | Space above and below image (in pixels) (*) |
hspace='??' | Space on either side of image (in pixels) (*) |
Linking Tags | Help | Top |
---|---|
<a href='url'> link text </a> | Basic Link |
<a> Tag Attributes: | |
href='url' | Location (url) of page to link to. |
name='??' | Name of link (name of anchor, or name of bookmark) |
target='?' | Link target location: _self, _blank, _top, _parent . |
href='url#bookmark' | Link to a bookmark (defined with name attribute). |
href='mailto:email' | Link which initiates an email (dependant on user's email client). |
Lists | Help | Top |
---|---|
<ol> ... </ol> | Ordered List |
<ul> ... </ul> | Un-ordered List |
<li> ... </li> | List Item (within ordered or unordered) |
<ol type='?'> | Ordered list type: A, a, I, i, 1 |
<ol start='??'> | Ordered list starting value |
<ul type='?'> | Unordered list bullet type: disc, circle, square |
<li value='??'> | List Item Value (changes current and subsequent items) |
<li type='??'> | List Item Type (changes only current item) |
<dl> ... </dl> | Definition List |
<dt> ... </dt> | Term or phrase being defined |
<dd> ... </dd> | Detailed Definition of term |
Html Semantic Tags Cheat Sheet Template
Tables | Help | Top |
---|---|
<table> ... </table> | Define a Table |
<table> Tag Attributes: | |
border='?' | Thickness of outside border |
bordercolor='#??????' | Border Colour |
cellspacing='?' | Space between cells (pixels) |
cellpadding='?' | Space between cell wall and content |
align='??' | Horizontal Alignment: left, center, right (*) |
bgcolor='#??????' | Background Colour (*) |
width='??' | Table Width (pixels or %) (*) |
height='??' | Table Height (pixels or %) (*) |
<tr> ... </tr> | Table Row within table |
<th> ... </th> | Header Cell within table row |
<td> ... </td> | Table Cell within table row |
<td> Tag Attributes: | |
colspan='?' | Number of columns the cell spans across (cell merge) |
rowspan='?' | Number of row a cell spans across (cell merge) |
width='??' | Cell Width (pixels or %) (*) |
height='??' | Cell Height (pixels or %) (*) |
bgcolor='#??????' | Background Colour (*) |
align='??' | Horizontal Alignment: left, center, right (*) |
valign='??' | Vertical Alignment: top, middle, bottom (*) |
nowrap | Force no line breaks in a particular cell |
Frames | Help | Top |
---|---|
<frameset> ... </frameset> | Define the set of Frames |
<frameset> Tag Attributes: | |
rows='??,??, ...' | Define row sizes & number of rows (size in pixels or %) |
cols='??,??, ...' | Define column sizes & number of columns (size in pixels or %) |
noresize='noresize' | User cannot resize any frames in frameset |
<frame> ... </frame> | Define a frame within the frameset |
<frame> Tag Attributes: | |
src='url' | Location of HTML File for a frame |
name='***' | Unique name of frame window |
marginwidth='?' | Horizontal margin spacing inside frame (pixels) |
marginheight='?' | Vertical margin spacing inside frame (pixels) |
noresize='noresize' | Declare all frameset sizes as fixed |
scrolling='***' | Can the user scroll inside the frame: yes, no, auto |
frameborder='?' | Frame Border: (1 =yes, 2 =no) |
bordercolor='#??????' | Border Colour (*) |
<noframes> ... </noframes> | Unframed content (for browsers not supporting frames) |
Forms | Help | Top |
---|---|
<form> ... </form> | Form input group decleration |
<form> Tag Attributes: | |
action='url' | URL of Form Script |
method='***' | Method of Form: get, post |
enctype='***' | For File Upload: enctype='multipart/form-data' |
<input> ... </input> | Input field within form |
<input> Tag Attributes: | |
type='***' | Input Field Type: text, password, checkbox, submit etc. |
name='***' | Form Field Name (for form processing script) |
value='***' | Value of Input Field |
size='***' | Field Size |
maxlength='?' | Maximum Length of Input Field Data |
checked | Mark selected field in radio button group or checkbox |
<select> ... </select> | Select options from drop down list |
<select> Tag Attributes: | |
name='***' | Drop Down Combo-Box Name (for form processing script) |
size='?' | Number of selectable options |
multiple | Allow multiple selections |
<option> ... </option> | Option (item) within drop down list |
<option> Tag Attributes: | |
value='***' | Option Value |
selected | Set option as default selected option |
<textarea> ... </textarea> | Large area for text input |
<textarea> Tag Attributes: | |
name='***' | Text Area Name (for form processing script) |
rows='?' | Number of rows of text shown |
cols='?' | Number of columns (characters per rows) |
wrap='***' | Word Wrapping: off, hard, soft |
Special Characters | Help | Top |
---|---|
< | < - Less-Than Symbol |
> | > - Greater-Than Symbol |
& | & - Ampersand, or 'and' sign |
" | ' - Quotation Mark |
© | © - Copyright Symbol |
™ | ™ - Trademark Symbol |
| - A space (non-breaking space) |
&#??; | ISO 8859-1 character - replace ?? with the iso code |
Miscellaneous Tags | Help | Top |
---|---|
<!-- ... --> | Comment within HTML source code |
<!DOCTYPE html ... > | Document Type Definition (wiki) |
<meta> ... </meta> | META information tag |
<meta> Tag Attributes: | |
name='***' | Meta name: description, keywords, author |
http-equiv='***' | HTTP Equivalent Info: title, etc. |
content='***' | Information content |
<link> | LINK content relationship tag |
<link> Tag Attributes: | |
rel='***' | Type of forward relationship |
http='url' | Location (URL) of object or file being linked |
type='***' | Type of object or file, eg: text/css |
title='***' | Link title (optional) |
Body Background & Colours | Help | Top |
---|---|
<body> Tag Attributes: | |
background='url' | Background Image (*) |
bgcolor='#??????' | Background Colour(*) |
text='#??????' | Document Text Colour (*) |
link='#??????' | Link Colour (*) |
vlink='#??????' | Visited Link Colour (*) |
alink='#??????' | Active Link Colour (*) |
bgproperties='fixed' | Background Properties - 'Fixed' = non-scrolling watermark (*) |
leftmargin='?' | Side Margin Size in Pixels (Internet Explorer) (*) |
topmargin='?' | Top Margin Size in Pixels (Internet Explorer) (*) |
(*) Important Note:
Tags marked with (*) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.
Prev | Top | Next
Document
Html Semantic Tags List
<title>
- Second most important piece of content.
- Shown in the browser tab & search results.
- Should be unique for every page on the site.
- For linking CSS and other resources like feeds.
href
is the path the file.rel
has different values for other resources.
<header>
- When inside
<body>
it’s the website masthead. - When inside
<article>
it’s the most important information.
- When inside
<body>
it’s the website footer. - When inside
<article>
it’s the least important information.
<main>
- Primary content of the page.
- Defines a group a navigation links.
<article>
- A piece of content that’s independent.
- Could be removed from this website and still make sense.
- A group in a series of related content pieces.
<aside>
- Secondary content not required to understand the main content.
- Navigation inside header
Lists
<ul>
- An unordered list—the order of items isn’t important.
- Can only have
<li>
elements as direct children.
- An ordered list—the order of the items is important.
- Could be alphabetical, numerical, best to worst, etc.
- Can only have
<li>
elements as direct children.
<li>
- A single list item.
- Must be inside a
<ul>
,<ol>
or<menu>
. - Can have most other elements inside it.
- A description list—a grouping of terms and definitions.
- Words & definitions, titles & summaries, data points, etc.
- Can only have
<dt>
and<dd>
elements as direct children.
<dt>
- Description title, the term of the item.
- Must come before the
<dd>
.
- Description definition, the data, or text of the item.
- Can be multiple
<dd>
tags underneath one<dt>
.
- Unordered list
- Description list
- For semantically marking up a web application’s toolbar of buttons.
- The
<menu>
tag also uses<li>
tags inside—one for each toolbar button. - You may still have to remove the bullets.
- Menu toolbar list
Semantic Html Cheat Sheet
Text
- For making hyperlinks.
href
is the path to where the link should go.
<h1>
- The most important piece of content on the page.
- On the homepage this should be the company’s name.
- On inside pages this should be the page title.
- Content headings, each a sub-heading of the one above.
- The
<h2>
is a sub-heading of<h1>
,<h3>
a sub-heading of<h2>
, etc.
<hgroup>
- Allows you to group multiple headings together and have them semantically treated as a single heading.
- It’s primary purpose is for subheadings.
- A generic paragraph of text.
<blockquote>
- A large, stand alone quote from another source.
- A citation for another source, often used with quotations.
- A person’s name, a URL, a book, a movie title, etc.
<q>
- A small quotation embedded within other content.
- A string of emphasized, slightly more important text.
- Screen readers will change their voice for this text.
<strong>
- A string of highly emphasized, much more important text.
- Screen readers will change their voice for this text.
- Content that was inserted after the document was published.
datetime
defines when it was added.
<del datetime='…'>
- Content that was deleted after the document was published.
datetime
defines when it was removed.
- An acronym or abbreviation, like “HTML”, “CSS”, etc.
title
contains the expanded version, like “Hypertext Markup Language”.
<dfn>
- A definition of a term on the page.
- Should only be used once of the term.
- Used to highlight a piece of text for reference.
- The keywords in a search results page, the current navigation item.
<i>
- Defines technical term, a ship name, a book title, a thought, sarcasm, another language.
- Defines a keyword, like product name in a review, a lead sentence in a paragraph.
<s>
- Content that’s no longer relevant to the document.
- Consider if the
<del>
element is better suited first.
- Labels the text as having a non-textual annotation.
- A misspelled word, a Chinese proper name, etc.
<small>
- Represents side comments and fine print.
- Contact information, email, tel, postal address, etc.
- Blockquotes
- Text edits
- Abbreviations
Images & media
<img src='…' alt='…'>
- Embeds an image that’s important to the content.
src
is a path to the image file.alt
describes the image if it cannot be seen.
- Embeds annotated images, illustrations, photos, code, etc.
- Could be moved out of place and would still make sense.
<figcaption>
- For adding a caption/annotation to the
<figure>
. - Must be inside a
<figure>
element—cannot stand alone.
- Responsive image insertion—allows developers to provide different images for different contexts.
<video poster='…' autoplay loop muted controls>
- For embedding movies into a website.
poster
is the path to an image that’s displayed before the video plays.autoplay
will hint the video to start automatically.loop
triggers whether the video should repeat or not.muted
can be added to not play sound by default.controls
shows or hides the browser’s player buttons.
- For embedding sounds into a website.
autoplay
will hint the audio to start automatically.loop
triggers whether the audio should repeat or not.muted
can be added to not play sound by default.controls
shows or hides the browser’s player buttons.
<source>
- Must be inside
<picture>
,<video>
or<audio>
to define the different versions of content. - For example, in video it gives paths to the MP4 and WEBM formats.
- Used to pair captions, chapters, etc. with
<video>
elements.
- Figures & captions
- Use only if there’s a caption.
- See Responsive & retina images for details.
![Html Semantic Tags Cheat Sheet Html Semantic Tags Cheat Sheet](/uploads/1/1/0/2/110257189/246406839.jpg)
Data & code
<sub>
- Defines text as being subscript.
- Defines text as being superscript.
<var>
- Represents a variable in math or programming.
- Marks some text as a time or date.
datetime
defines the machine readable version.
<data value='…'>
- Marks elements as being a numerical piece of information.
value
provides the machine readable version.
- Represents a single number in a range of numbers.
value
is the current number.min
is the minimum number.max
is the maximum number.
<progress value='…' min='…' max='…'>
- Represents the current position in a series of steps.
value
is the current position.min
is the minimum position.max
is the maximum position.
- Defines a piece of text as a code sample.
<pre>
- A piece of text that has a specific formatting, where tabs, whitespaces, etc. should be maintained.
- Something a user should type into their computer.
<samp>
- Something a user should see output from a computer.
- Time
- Maths
Meaningless tags
- Inherits meaning from its children.
- Divides content into logical groups, when no other tag is better suited.
- Has restrictions on what elements it can be inside.
<span>
- Inherits meaning from its children.
Be careful
- Creates a line break that’s significant to the content.
- Useful in poems and addresses where the division of lines is important.
- Do not use to create space in a design—use margins and padding.
<hr>
- Represents a thematic break in the content.
- For example, a scene change or topic change.
- Do not use to create a horizontal line—use CSS borders.
- Represents a interactive, clickable button.
- Should be used in forms and with JavaScript.
- Do not use to link to another page—use the
<a>
tag.
<wbr>
- Presents an opportunity for the browser to add a line-break if necessary.
- Groups strings of text, when no other tag is better suited.
Links
- The
href
always needs a value--#
means nowhere.
- Links on the same page
- Add an
id='
to the element to jump to, refer to that inside thehref
- Just write the name of the HTML file, also include any folders its inside.
- Links to other websites
- Always start with
https://
or less ideallyhttp://
- Start with
tel:
, use international format - Also send a text message with
sms:
- Links to email addresses
- Pops open a new email message, start with
mailto:
%20
is used to escape spaces—See more percent-encoding examples
Non Semantic Html
Date/time formats
Apply to the
datetime='
attribute of the <time>
, <del>
& <ins>
elements.Html Semantic Tags Cheat Sheet Free
- Format:
YYYY
- Example:
1963
- Year, month
- Format:
YYYY-MM
- Example:
1963-11
- Nov. 1963
- Format:
YYYY-MM-DD
- Example:
1963-11-23
- Nov. 23, 1963
- Year, week
- Format:
YYYY-Wdd
- Example:
1963-W47
- 1936, the week of Nov. 18–24
- Format:
HH:MM
- Example:
17:16
- 5:16 PM
- Hour, minute, second
- Format:
HH:MM:SS
- Example:
17:16:20
- 5:16:20 PM
- Format:
HH:MM:SS.sss
- Example:
17:16:20.258
- 5:16:20.258 PM
- UTC timezone
- Format:
Z
- Example:
Z
- UTC timezone
- Format:
±HH:MM
- Example:
-05:00
- Eastern Standard Time, Daylight Savings
- Year, month, day, hour, minute
- Format:
YYYY-MM-DDTHH:MM
- Example:
1963-11-23T17:16
- Nov. 23, 1963 at 5:16 PM
- Format:
YYYY-MM-DDTHH:MM:SS
- Example:
1963-11-23T17:16:20
- Nov. 23, 1963 at 5:16:20 PM
- Year, month, day, hour, minute, second, millisecond
- Format:
YYYY-MM-DDTHH:MM:SS.sss
- Example:
1963-11-23T17:16:20.258
- Nov. 23, 1963 at 5:16:20.258 PM
- Format:
YYYY-MM-DDTHH:MMZ
- Example:
1963-11-23T17:16Z
- Nov. 23, 1963 at 5:16 PM UTC
- Year, month, day, hour, minute, timezone
- Format:
YYYY-MM-DDTHH:MM±HH:MM
- Example:
1963-11-23T12:16-05:00
- Nov. 23, 1963 at 12:16 AM EST
- Format:
YYYY-MM-DDTHH:MM:SS±HH:MM
- Example:
1963-11-23T12:16:20-05:00
- Nov. 23, 1963 at 12:16:20 AM EST
- Year, month, day, hour, minute, second, millisecond, timezone
- Format:
YYYY-MM-DDTHH:MM:SS.sss±HH:MM
- Example:
1963-11-23T12:16:20.258-05:00
- Nov. 23, 1963 at 12:16:20.258 AM EST
- Format:
PddD
- Example:
P686D
- 686 days
- Period of days, hours
- Format:
PddDThhH
- Example:
P686DT23H
- 686 days, 23 hours
- Format:
PddDThhHmmM
- Example:
P686DT23H18M
- 686 days, 23 hours, 18 minutes
- Period of days, hours, minutes, seconds
- Format:
PddDThhHmmMssS
- Example:
P686DT23H18M14S
- 686 days, 23 hours, 18 minutes, 14 seconds
- Period of days, hours, minutes, seconds, milliseconds
- Format:
PddDThhHmmMss.sssS
- Example:
P686DT23H18M14.400S
- 686 days, 23 hours, 18 minutes, 14 seconds, 400 milliseconds
- Format:
PThhH
- Example:
PT23H
- 23 hours
- Period of minutes
- Format:
PTmmM
- Example:
PT18M
- 18 minutes
- Format:
PTmmMssS
- Example:
PT18M14S
- 18 minutes, 14 seconds
- Exact date example
- Range of time periods