HTML Tags

HTML Tags are used to add content in 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 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.

HTML Tags and elements
HTML Tags and Elements

Type of HTML Tags

Tags in HTML are categorized as Paired Tags and Unpaired Tags on the basics of opening and closing.

  1. Pair Tags
  2. Unpair Tags

Pair 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.

Unpair Tags

Unpaired tags are tags with opening only, example <img>, <input> etc. They can have attributes.

Type Children Plain Text Attributes
Pair Tags
Unpair Tags

Unpaired 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 calles 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

  1. Title Tag
  2. Meta Tag
  3. Link Tag
  4. Script Tag
  5. Style Tag
  6. Base Tag

HTML head tags


<!doctype html>
<html>
<head>
    <title> Title of the webpage </title>
    <meta charset="utf-8" >
    <base href="https://tutorial.techaltum.com/htmlTags.html">
    <meta name="keywords" content="Keywords">
    <meta name="description" content="Search Description">
    <link href="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>
		
		
dialog

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">	
		

As per W3C, it is compulsory to declare meta charset on all webpages.


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

HTML Tags List
S NoTag NameUseversion
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 break 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" input control hidden 4
66 input type="image" input image 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 or ol 4
85 link link for css, icon, canonical etc. 4
86 main main container of page 5
87 map image map 4
88 mark marked or highlighted text 5
89 math MathML root element 5
90 menu 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