HTML5 Tags
abbr - abbreviation
Eg:
Abbreviation for HTML.
<abbr title="Hyper Text Markup Language">HTML</abbr>
address - to display address details
Eg:
Company/NameAddress Line 1
Address Line 2
Area - Pincode
City, State, Country
Phone
<address>
Company/Name
Address Line 1
Address Line 2
Area - Pincode
City, State, Country
Phone
</address>
area - used to mark coordinates in an image
map - used to specify image map
area - alt, coords (rect = "left, top, right, bottom" | circ = "center-x, center-y, radius" | poly= "x1, y1, x2, y2, .., xn, yn"), href, shape (rect, rectangle, circ, circle, poly, polygon), target
Eg:
<img src="../img/usemap.gif" alt="usemap" usemap="#area">
<map name="area">
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="#" alt="" target="_blank">
<area shape="rect" coords="22,83,126,125" alt="" href="#" target="_blank">
<area shape="circle" coords="73,168,32" alt="" href="#" target="_blank">
</map>
</acronym>
audio - to play audio files
audio - autoplay, controls, loop, muted, preload, src
Supports: MP3 (audio/mpeg), OGG (audio/ogg), WAV (audio/wav)
Eg:
<audio controls>
<source src="../img/sample-audio.mp3" type="audio/mpeg">
Your browser does not support the audio.
</audio>
bdo - displays text direction
This paragraph will display right-to-left.
<bdo dir="rtl">This paragraph will display right-to-left.</bdo>
blockquote - displays quoted content
cite - specify the source of quote
Quoted Text goes here...
<blockquote cite="http://www.domain.com/index.html">
Quoted Text goes here...
</blockquote>
canvas - used to draw shapes using JavaScript
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ct = c.getContext("2d");
ct.fillStyle = "#FF00AA";
ct.fillRect(0, 0, 140, 100);
</script>
colgroup - group for columns in table
col - attributes for columns in table
| Head 1 | Head 2 | Head 3 |
|---|---|---|
| Col 1 | Col 2 | Col 3 |
| Col 4 | Col 5 | Col 6 |
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
</tr>
</table>
datalist - new list attribute for input for combo box
<form>
<input list="subjects" name="subj">
<datalist id="subjects">
<option value="Maths">
<option value="Science">
<option value="Social Science">
<option value="English">
<option value="Language">
</datalist>
<input type="submit">
</form>
details - specifies additional information on demand/click
Eg:
Copyright
- by Dinesh. All Rights Reserved.
All content and materials on this web site are the property of Dinesh.
<details>
<summary>Copyright</summary>
<p> - by Dinesh. All Rights Reserved.</p>
<p>All content and materials on this web site are the property of Dinesh.</p>
</details>
dfn - defines a term
Eg:
HTML stands for Hyper Text Markup Language.
<p><dfn>HTML</dfn> stands for Hyper Text Markup Language.>/p>
fieldset - groups related elements in a form
legend - specifies the title for fieldset
Eg:
<form>
<fieldset>
<legend>Login</legend>
<p>Username: <input type="text"></p>
<p>Password: <input type="text"></p>
<input type="submit">
</fieldset>
mark - used to highlight
Eg:
This part of the text is marked/highlighted in this paragraph.
<p>This part of the text is <mark>marked/highlighted</mark> in this paragraph.</p>
meter - used to display range (guage)
Eg:
<meter value="2" min="0" max="10">2 / 10</meter> (2 / 10)
<meter value="0.75">75%</meter>
optgroup - group related options in select tag
Eg:
<select>
<optgroup label="Science">
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</optgroup>
<optgroup label="Social Science">
<option value="History">History</option>
<option value="Civics">Civics</option>
</optgroup>
</select>
progress - to display progess bar
Eg:
(35 / 100)
<progress value="35" max="100"></progress>
svg - to draw circle, rectangle, polygon and even SVG type logo
Eg:
Circle:
Rectangle:
Rounded Corners:
Polygon:
SVG Logo:
<p>Circle:
<svg width="100" height="100">
<circle cx="50" cy="50" r="20" stroke="black" stroke-width="4" fill="red">
</svg>
</p>
<p>Rectangle:
<svg width="200" height="100">
<rect width="200" height="100" style="fill:rgb(255,125,255);stroke-width:8;stroke:rgb(0,10,120)">
</svg>
</p>
<p>Rounded Corners:
<svg width="400" height="100">
<rect x="50" y="20" rx="20" ry="20" width="100" height="50" style="fill:black;stroke:orange;stroke-width:5;opacity:0.5">
</svg>
</p>
<p>Polygon:
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:purple;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</p>
<p>SVG Logo:
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1">
<stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1">
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)">
<text fill="maroon" font-size="35" font-family="Verdana" x="50" y="86">LOGO</text>
</svg>
</p>
video - to display videos
Supports: MP4 (video/mp4), WebM (video/webm), Ogg (video/ogg)
Eg:
<video width="320" height="240" controls>
<source src="../img/sample-video.mp4" type="video/mp4">
<source src="../img/sample-video.ogv" type="video/ogg">
<source src="../img/sample-video.webm" type="video/webm">
<source src="../img/sample-video.3gp" type="video/3gp">
<source src="../img/sample-video.flv" type="video/flv">
<track src="../img/subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
wbr - break words
Eg:
This is a longlonglonglonglonglonglonglonglonglonglonglonglonglong
This is a longlonglonglonglonglonglonglonglonglonglonglonglonglong<wbr>longwordthatwillbreakatspecificplaceswhenthewbrtagused<wbr>againplaceswhenthewbrtagused.