Html Semantic Tags Cheat Sheet

Posted : admin On 1/29/2022

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.

Semantic

What is html? What are tags? - Perhaps check out where to start or what is html first :-)

HTML5 supports the traditional HTML and XHTML-style syntax. In this article, we see HTML5 Cheat Sheet For Programmer and create a list of HTML5 new tags and HTML5 tags. In HTML5, new features in its markup, New APIs, XHTML, and error handling. HTML5 is the latest specification of the HTML. Semantic Tag HTML elements that introduce meaning to. CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19. HTML5 Semantic Grouping Tags (all block elements) Tag Description. HTML 5 memperkenalkan sekitar 30-an tag baru, sebagian besar diantaranya berfungsi untuk membuat struktur HTML atau yang dikenal dengan Semantic Tag.Semantic Tag atau Semantic Markup. HTML5 Semantic Grouping Tags (all block elements) Tag Description Container for a header of a document Specifies the main content of a document. The content inside should be unique to the document and not contain content that is repeated across pages (e.g., sidebars, nav links, search bars, etc.).

Basic HTML Structure Help Top

A cheat sheet covering the basic HTML elements and their purpose. Can be multiple tags underneath one.

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(*)
noshadeNo 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

Define Semantic Html

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(*)
nowrapForce no line breaks in a particular cell
Html Semantic Tags Cheat Sheet
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
checkedMark 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
multipleAllow multiple selections
<option> ... </option>Option (item) within drop down list
<option> Tag Attributes:
value='***'Option Value
selectedSet 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
&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
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) (*)
Html Semantic Tags Cheat Sheet

Html5 Semantic Tags Cheat Sheet

(*) 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

While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with an extended HTML documentation as well as a deep instructional HTML how-to. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheatsheet, to give you some quick accurate ready to use code snippets for common usages.

Remember that HTML tags must be used for their semantic, not their appearance. It's always possible to totally change the look and feel of a given tag using CSS so, when using HTML, take the time to focus on the meaning rather than the appearance.

Inline elements

Html Semantic Tags Cheat Sheet Template

Tags

Html Semantic Tags Cheat Sheet Free

An 'element' is a single part of a webpage. Some elements are large and hold smaller elements like containers. Some elements are small and are 'nested' inside larger ones. By default, 'inline elements' appear next to one another in a webpage. They take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row.All inline elements can be implemented within the <body></body> tags.

UsageCode snippetResult
A simple link<a href='https://developer.mozilla.org'>A link to MDN</a>A link to MDN
A simple image<img src='/static/img/beast.png' width='25' />
A generic inline container<p>p its used to <span>style and group</span> particular elements </p>

p its used to style and group particular elements

Another inline container<p>span its used to differentiate a part <span>of the content</span> that we will work on differently </p>

span its used to differentiate a part of the content that we will work on differently

Emphasize some text<em>I'm posh</em>I'm posh
Italic textYou can mark a phrase in the text in <i>italics</i>You can mark a phrase in the text in italics
Bold some text<b>Bold a word or phrase</b>within the textBold a word or phrase within the text
Mark text as important<strong>I'm important</strong>

I'm important

Highlight some text<mark>Notice me</mark>Notice me
Draw a line through irrelevant text<s>I'm irrelevant</s>I'm irrelevant
Underline a non-textual annotationThis is <u>mispelled</u>This is mispelled
Text displayed lower than normal textH<sub>2</sub>OH2O
Small textUsed to represent the <small>small print </small>of a documentUsed to represent the small print of a document
Used for an address<address>Main street 67</address>Main street 67
Used for a textual cite<cite>Lorem ipsum</cite>lorem ipsum
Text displayed higher than normal textx<sup>2</sup>x2
A short inline quotation<q>The q element indicates a short inline quotation.</q>The q element indicates a short inline quotation.
A line breakLine 1<br>Line 2Line 1
Line 2
Suggesting a line breakIt is used to suggest the browser to cut the text on this site if </wbr>there is not enough space to display it on the same lineIt is used to suggest the browser to cut the text on this site if there is not enough space to display it on the same line
Date in readable formIt is used to format the date legibly for the user, such as: <time datetime='2020-05-24' pubdate>published on 23-05-2020</time>It is used to format the date legibly for the user, such as:
Text displayed in code format

<p>This text is in normal format.</p>

<code>This text is in code format.</code>

<pre>This text is in predefined format.</pre>

This text is in normal format.

This text is in code format.
Embedded Audio<audio controls='controls' src='https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/2587/81ebdf32055cc6bb8aab948b51d58d9f/AudioTest%20(1).ogg'>Your browser does not support the HTML5 Audio element.</audio>Your browser does not support the HTML5 Audio element.
Embedded Audio with alternative sources<audio controls='controls'> <source='https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3' type='audio/mpeg'> <source='https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/2587/81ebdf32055cc6bb8aab948b51d58d9f/AudioTest%20(1).ogg' type='audio/mpeg'> Your browser does not support Audio. </audio>Your browser does not support Audio.
Embedded Video<video controls src='https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4'>The <code>video</code> element is unsupported.</video>

Block elements

'Block elements,' on the other hand, take up the entire width of a webpage. They also take up a full line of a webpage; they do not fit together side-by-side. Instead, they stack like paragraphs in an essay or toy blocks in a tower.

UsageCode snippetResult
A simple paragraph

<p>I'm a paragraph</p>
<p>I'm another paragraph</p>

I'm a paragraph

I'm another paragraph

An extended quotation<blockquote>The blockquote element indicates an extended quotation.</blockquote>
The blockquote element indicates an extended quotation.
Additional information<details><summary>Html Cheatsheet</summary><p>Inline elements</p><p>Block elements</p></details>
Html Cheatsheet

Inline elements

Block elements

An unordered list<ul>
<li>I'm an item</li>
<li>I'm another item</li>
</ul>
  • I'm an item
  • I'm another item
An ordered list<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
</ol>
  1. I'm the first item
  2. I'm the second item
A definition list

<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>

A Term
Definition of a term
Another Term
Definition of another term
A horizontal rule<hr>
Text Heading

<h1> This is Heading 1 </h1>

<h2> This is Heading 2 </h2>

<h3> This is Heading 3 </h3>

<h4> This is Heading 4 </h4>

<h5> This is Heading 5 </h5>

<h6> This is Heading 6 </h6>

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

Your browser does not support the audio element.