HTML Tags
HTML Tags are the build blocks of webpage. Tags are used to add content into html, like text, headings, table, list links etc. Tags along with attributes are core components of HTML. The latest version of HTML, i.e HTML5 includes 145 tags. View HTML Tags List.
HTML tags are used to build webpage structure, like p, h1, h2, h3, address, b, i, etc. Tags can have attributes to add extra information.
HTML Element
An HTML Tag with opening tag, closing tag, attributes and content is called HTML Element. Element include start tag, end tag, attributes and content inside.
Basically all HTML Elements are build using html tags.
Type of HTML Tags
Tags in HTML are categorized as Paired Tags and Void Tags on the basics of opening and closing.
- Paired Tags
- Void Tags
Paired Tags
Paired Tags are tags with both opening and closing. They can have child tags, plain text and attributes. For example <p>, <h1>, <body> etc.
Void Tags
Void tags are tags with opening only, example <img>, <input> etc. They can have attributes.
| Type | Children | Plain Text | Attributes |
|---|---|---|---|
| Paired Tags | |||
| Void Tags |
Void elements don't have any child or children. They are last node of HTML DOM Tree.
HTML Tag <html>
HTML or HTML Tag is the parent tag of all HTML Elements. Its is also called root tag. HTML Tag is defined just after doctype declaration. To know more about html doctype, click html doctype.
HTML Tag has two children, head tag and body tag. Since HTML3, It is compulsory to define doctype and then HTML tag.
lang attribute is used inside html tag to define language. An option dir="ltr" is also used to add direction which is by default left to right.
For Urdu and Arabic, use dir="rtl" in html tag.
<!doctype html>
<html lang="en">
<head>
<title> Title of the webpage </title>
<meta charset="utf-8" >
</head>
<body>
</body>
<html> HEAD Tag
HTML Head tag is the first child of HTML. Head includes all the information related to webpage seo, css links, scripts and meta tags.
Head is not visible to user. It is mainly for search engines and browsers.
Tags in head
- Title Tag
- Meta Tag
- Link Tag
- Script Tag
- Style Tag
- Base Tag
HTML head tags
<!doctype html>
<html lang="en">
<head>
<title> Title of the webpage </title>
<meta charset="utf-8" >
<base href="https://tutorial.techaltum.com/htmlTags.html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="Keywords">
<meta name="description" content="Search Description">
<link href="css/style.css" rel="stylesheet">
<style></style>
<script></script>
</head>
<body>
Body Content
</body>
</html>
BODY Tag <body>
HTML Body Tag is used to define the body of our HTML Document, basically the content visible to user.
The Body Tag contain all visible contents of a web page like paragraph, headings, tables, lists, images, videos visible to user.
By default, body is 100% wide, having white background and took a margin of 8px.
<body>
Body tag for content visible to user
</body>
TITLE TAG
HTML Title Tag is the compulsory child of HEAD. Title is compulsory and should be unique on all webpages. Title enhance search engine visibility of a webpage on various search engines. Maximum limits of characters inside title tag is 70 for maximum search engines.
Always use the first targeted keyword in title for best seo results.
<title> Title of the webpage </title>
META CHARSET
Meta charset was introduced in HTML5. Earlier meta tag with content and http-equiv was used to declare charset.
Meta charset is used to declare webpage character encoding. The recommended charset for maximum websites is UTF-8. The default charset for windows OS is windows-1252.
HTML4 Meta Charset
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 Meta Charset
<meta charset="utf-8">
It is compulsory to declare meta charset on all webpages.
UTF-8 encoding is used by 97.6% websites worldwide including google, facebook, youtube, techaltum, and tutorial.techaltum.com.
HTML Tags List
HTML5 includes 145 tags in early versions. Some Html4/XHTML tags are removed in HTML5, and some new tags are added in HTML5. Also some tags are renamed in HTML5. Here is a complete list of HTML5 Tags with name, use and version in which they were introduced.
Red marked rows are HTML5 Tags.
List of html tags
| S No | Tag Name | Use | version |
|---|---|---|---|
| 1 | a | Hyperlink, formerly anchor tag | 4 |
| 2 | abbr | abbreviation | 4 |
| 3 | address | To add postal address | 4 |
| 4 | area | Hyperlink for Image Map | 4 |
| 5 | article | An independent article for blog post. | 5 |
| 6 | aside | side bar for layout | 5 |
| 7 | audio | To play audio file | 5 |
| 8 | b | bold text | 4 |
| 9 | base | base URL | 4 |
| 10 | bdi | BiDirectional Isolate | 5 |
| 11 | bdo | BiDirectional Override | 4 |
| 12 | blockquote | Block level quotation | 4 |
| 13 | body | body of web document | 4 |
| 14 | br | line break | 4 |
| 15 | button | Default button | 4 |
| 16 | button type="button" | button tag | 4 |
| 17 | button type="reset" | reset button for form | 4 |
| 18 | button type="submit" | submit button for form | 4 |
| 19 | canvas | canvas tag for drawing, graphics and games | 5 |
| 20 | caption | caption for table tag | 4 |
| 21 | cite | cited title | 4 |
| 22 | code | Code to show | 4 |
| 23 | col | column for table colgroup | 4 |
| 24 | colgroup | group for table columns | 4 |
| 25 | data | machine readable data with value attribute | 5 |
| 26 | datalist | datalist for input controls | 5 |
| 27 | dd | description data in dl | 4 |
| 28 | del | deleted text | 4 |
| 29 | details | details for collapsible content | 5 |
| 30 | dfn | Define Instance | 4 |
| 31 | dialog | Dialog box or window | 5 |
| 32 | div | division, block level element for grouping | 4 |
| 33 | dl | Description List | 4 |
| 34 | dt | Description term of dl | 4 |
| 35 | em | emphasize text | 4 |
| 36 | embed | To embed plugins | 5 |
| 37 | fieldset | group of form controls | 4 |
| 38 | figcaption | caption for figure | 5 |
| 39 | figure | Items like picture or graphical content | 5 |
| 40 | footer | footer of content | 5 |
| 41 | form | form to submit user information to web server | 4 |
| 42 | h1 | Heading level 1 | 4 |
| 43 | h2 | Heading level 2 | 4 |
| 44 | h3 | Heading level 3 | 4 |
| 45 | h4 | Heading level 4 | 4 |
| 46 | h5 | Heading level 5 | 4 |
| 47 | h6 | Heading level 6 | 4 |
| 48 | head | head tag | 4 |
| 49 | header | header for article or section | 5 |
| 50 | hgroup | group for headings | 5 |
| 51 | hr | thematic break, formerly known as horizontal rule | 4 |
| 52 | html | root element | 4 |
| 53 | i | italic text | 4 |
| 54 | iframe | inline frame for external webpages or plugins | 4 |
| 55 | img | image tag | 4 |
| 56 | input | input control | 4 |
| 57 | input type="text" | input control for text field | 4 |
| 58 | input type="password" | input control for password | 4 |
| 59 | input type="checkbox" | input control for checkbox | 4 |
| 60 | input type="radio" | input control for radio | 4 |
| 61 | input type="button" | input control for button | 4 |
| 62 | input type="submit" | submit button | 4 |
| 63 | input type="reset" | reset button | 4 |
| 64 | input type="file" | file upload control | 4 |
| 65 | input type="hidden" | hidden input control | 4 |
| 66 | input type="image" | input with image background | 4 |
| 67 | input type="datetime" | input control for global date and time | 5 |
| 68 | input type="datetime-local" | input control for local date and time | 5 |
| 69 | input type="date" | input control for date | 5 |
| 70 | input type="month" | input control for month | 5 |
| 71 | input type="time" | input control for time | 5 |
| 72 | input type="week" | input control for week and year | 5 |
| 73 | input type="number" | input control for numbers | 5 |
| 74 | input type="range" | input control for range | 5 |
| 75 | input type="email" | input control for email id | 5 |
| 76 | input type="url" | input control for URL | 5 |
| 77 | input type="search" | input control for search field | 5 |
| 78 | input type="tel" | input control for telephone no | 5 |
| 79 | input type="color" | input control for color | 5 |
| 80 | ins | inserted text | 4 |
| 81 | kbd | keyboard command | 4 |
| 82 | label | caption for input and form controls | 4 |
| 83 | legend | title for fieldset | 4 |
| 84 | li | list item of ul, ol and menu | 4 |
| 85 | link | link for css, icon, canonical etc. | 4 |
| 86 | main | main content of webpage | 5 |
| 87 | map | image map | 4 |
| 88 | mark | marked or highlighted text | 5 |
| 89 | math | MathML root element | 5 |
| 90 | menu (removed in HTML5.3) | list of commands | 4 |
| 91 | meta | metadata | 4 |
| 92 | meta name | metadata for key-value, exp description, keywords etc | 4 |
| 93 | meta http-equiv="refresh" | metadata to refresh page | 4 |
| 94 | meta http-equiv="default-style" | metadata for preferred stylesheet | 4 |
| 95 | meta charset | metadata for charset encoding declaration, exp utf-8 | 5 |
| 96 | meta http-equiv="content-type" | metadata for charset encoding | 4 |
| 97 | meter | meter, a scalar gauge | 5 |
| 98 | nav | group of navigation links | 5 |
| 99 | noscript | fallback text if JavaScript is disabled in browser | 4 |
| 100 | object | genetic external object | 4 |
| 101 | ol | ordered list | 4 |
| 102 | optgroup | group of options in select | 4 |
| 103 | option | option for select and datalist | 4 |
| 104 | output | result of calculations | 5 |
| 105 | p | paragraph | 4 |
| 106 | param | initialization parameter for plugins | 4 |
| 107 | picture | images for media source | 5 |
| 108 | pre | preformatted text | 4 |
| 109 | progress | progress indicator | 5 |
| 110 | q | inline quoted text | 4 |
| 111 | rp | ruby parenthesis | 5 |
| 112 | rt | ruby text | 5 |
| 113 | ruby | ruby annotation | 5 |
| 114 | s | struck text | 4 |
| 115 | samp | sample output | 4 |
| 116 | script | internal or external javascript code | 4 |
| 117 | section | generic section of page or article | 5 |
| 118 | select | select dropdown | 4 |
| 119 | slot | shadow slot root | 5 |
| 120 | small | small print | 4 |
| 121 | source | media source for audio, video and picture | 5 |
| 122 | span | inline level grouping element | 4 |
| 123 | strong | strong importance | 4 |
| 124 | style | internal or embedded stylesheet | 4 |
| 125 | sub | subscript | 4 |
| 126 | summary | caption for details element | 5 |
| 127 | sup | superscript | 4 |
| 128 | svg | SVG root element | 5 |
| 129 | table | table element | 4 |
| 130 | tbody | table body row group | 4 |
| 131 | td | table data or cell | 4 |
| 132 | template | Template for dynamic data from DOM api | 5 |
| 133 | textarea | input textarea | 4 |
| 134 | tfoot | table footer row group | 4 |
| 135 | th | table header cell | 4 |
| 136 | thead | table heading group | 4 |
| 137 | time | date or time | 5 |
| 138 | title | title for web document | 4 |
| 139 | tr | table row | 4 |
| 140 | track | media track or subtitle | 5 |
| 141 | u | underline text | 4 |
| 142 | ul | unordered list | 4 |
| 143 | var | variable text | 4 |
| 144 | video | video tag | 5 |
| 145 | wbr | possible line break | 5 |