HTML5 Tag Explanation-[ A List of Cheat sheets]

by

HTML 5 Tag Explanation: HTML code is used in the HTML document that represents different types of images, text, formation, base, and so on. Below you can see those document outline tags, tags for formation, tags for tables,and images. Let’s see more in detail about the Tags of HTML5.

HTML Logo
HTML 5

HTML5 Tags:

HTML 5 code for Document outline

Code Description
<!DOCTYPE> For the Version of (x)HTML
<html> Represents an HTML document
<head> This tag is for page information
<body> This tag represents the contents of the page
<!– —> Tag  for Comments

HTML 5 Tag explanation for Page Information

Tag Description
<base/> This represents the base URL
<meta/> This one is for Metadata
<title/> Represents the title
<link/> A link to CSS
<style> To insert CSS
<script> To insert JavaScript

HTML 5 Tag explanation for Document Structure

Tags Description
<h[1-6]> Represents heading
<div> This one represents the page section
<span> Represents inline section
<p> To represent a paragraph
<br/> or <br> This represents a Line break
<hr/> or <hr> For Horizontal rule

HTML 5 Anchor links

Tags Description
<a href=”URL”> This tag is for Anchor link
<a href=”mailto:”> It is for Email link
<a href=”tel:”> This code is for Phone dial Link
<a id=”name”> Tag represents Anchor
<a href=”#name”> Code for Link to anchor
<a target=”_value”> This tag specifies the Link Location
<a title=”title”> This tag is for the extra information that is shown as a tooltip text when the mouse moves over the element
<a download=”name”> or<a download> It represents the one that will be downloaded, the value of the attribute will be the name of the downloaded file
<a hreflang=”language-code”> This code specifies the language of the anchor link
<a rel=”value”> It represents the relationship with the current document

HTML5 Tag for Favicon (shortcut icon)

Tag Explanation
<link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico/> This shortcut is to include an icon in the title

URL Uniform Resource Locators

Scheme Short-for Usage
http HyperText Transfer Protocol It is used to represent the common web pages, not encrypted
https Secure HyperText Transfer Protocol This tag is for secured web pages. Encrypted
ftp File Transfer Protocol It represents the downloading and uploading file
file It is a file on your computer

HTML5 Form tags

Tags Usage
<form action=”URL” method=”get | post”> This tag for a Form
<label for=”id”> Tag for label
<input?> This tag is for Form input
attribute: name Tag  for name for input
attribute: placeholder It is a placeholder for input
attribute: type=”text” Tag for text input
attribute: type=”password” Tag for password input
attribute: type=”hidden” This tag for Hidden input
attribute: type=”date” Tag for Date input
attribute: type=”file” Tag for file input
attribute: type=”submit” This represents the submit button
attribute: type=”image” src=”URL” width=” ” height=” “ This tag is for Image submit button
attribute: type=”email” Tag for email input
attribute: type=”url” Tag for URL input
attribute: type=”search” This tag  is for search input

Radio Button and  Checkbox

 

Tag Description
attribute:type=”radio” value=” “ Tag for Radio button
attribute: type=”checkbox” value =” “ This tag is for checkbox tag
attribute: checked=”checked” Pre-checked input tag

Drop down list Box

Tags Description
<select> Tag for Drop Down List Box
<select size=”#” multiple=”multiple”> This tag is for Multiple select box
<option value=” “> This one is for option for drop down list
attribute: required= “required” Tag for Validation
<button type=”button”> Button Tag
<fieldset> Tag for group forming elements
<legend> Tag for caption
<meta> name attribute
<meta name=”value”>
<meta name=”author” content=” “>
<meta name=”description” content=” “>
<meta name=”keywords” content=” “>
<meta name=”viewport” content=” “>

Other Tags

Tags Description
<embed type=” ” src=””> Tag for external application
<nav> This tag is for Navigation selection
<header> Code for Header section
<footer> Code for Footer section
attribute: contenteditable=”true” Tag to allow editable areas
attribute: spell check=”true” To allow spell check areas

HTML5 Tags for Lists

List Tags Description
<ol> Tag for ordered list
<ol> type=”1|a|A|i|I” 1 ­Default value Decimal numbers 1,2,3,4
a ­ Alp­hab­eti­cal(lower­case) a, b, c, d
A ­Alp­hab­eti­cal (upper­case) A, B, C, D
i ­Roman numerals (lower­case) i, ii, iii, iv
I ­Roman numerals (upper­case) I, II, III, IV
<ol start=”number”> For the number, the list start with
<li value=”number”></li> To overwrite the number, the list will display
<ul> Tag for unordered list
<li> For List item
<dl> Tag for Definition list
<dt> Tag for Definition term
<dd> This Tag is for term description

HTML5 Tag for Text Formatting

Tags Used for
<strong> or<b> Tag for bold text
<em> or <I> To emphasize text
<small> For smaller text
<mark> Tag for Highlighted text
<del> Code for deleted text
<ins> Tag for inserted text
<sub> Code for Subscripted text
<sup> Tag for Superscripted text

HTML5 Tag for Citation and Quotation elements

Tags Description
<q> Tag for Short quotation
<blockquote cite=”URL”> This tag is for Long quotation
<abbr title=” “> Code for Abbreviation
<address> Tag represents address
<cite> Tag for citation
<bdo dir=”value”> value =rtl or ltr This tag is for Bi directional override
<pre> Tag for a pre-formatted text
<dfn> Tag, that is for defining a term
<code> This represents the tag for code
<var> Tag for a variable
<kbd> This represents the tag for Keyboard input
<samp> For sample output

HTML5 Tags for Tables

Tags Used to
<table> To create a Table
<caption> For caption
<head> This tag for the table header
<body> Tag for the Table body
<tfoot> This tag is for table footer
<colgroup> Tag for column group
<tr> To create a row
<th> Tag for Header cell
<td> This tag is for table cell
<td colspan=”#”> Tag for spanning column
<td rowspan=”#”> Tag for spanning row

HTML5 Tag for Image map

Image Maps Tag
<img src=”URL” usemap=”#shapes”>
<map name=”shapes”>
<area shape=”polygon” coords=” , ,”>
<area shape=”rectangle” coords=” , ,”>
<area shape=”circle” coords=” , ,”>
</map>

Codes for Images

Tags Used to
<img /> Tag for Image
<figure> This tag contains images and captions
<figcaption> Tag for caption of image

HTML5 Tags for Character Entities

Tags Character Description
&#34; “ Code for Quotation mark
&#38; & This number code is for Ampersand
&#60; < To generate  less than sign
&#62; > Number tag for greater than sign
&#64; @ “AT” symbol tag
&#128; € This number code was for the Euro symbol
&#149; • Tag small bullet
&#153; ™ To generate  a trademark sign
&#163; £ To generate a  pound sign
&#160; For a non-breaking space
&#169; © To generate copyright symbol

HTML5 Tag for Core Attributes

Tag Used for
class=” “ This tag indicates the class(non-unique)
id=” “ Tag indicates the ID (unique)

JavaScript Tags

Tags Description
<script src=”URL”> </script> Includes JS
<script src=”URL” async> </script> Once JS is fully downloaded, it will interrupt the HTML parsing in order to parse the JavaScript file
<script src=”URL” defer> </script> HTML parsing will only be formed once the HTML is fully parsed
<noscript> JavaScript disabled</noscript> The  content of <noscript> is displayed whenever JavaScript is disabled for the current page

HTML5 Tags for Media elements

Media Elements Usage
<audio controls> Tag for Audio
<source src=” ” type=”audio/mpeg”>
<video width=” ” height=” ” controls> For Video
<source src=” ” type=”video/mp4″>

Leave a Comment