HTML Tags and Elements

HTML Tags and Elements
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. 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

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.
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. It 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.
Example:
<!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
Basic HTML Program:
<!doctype html>
<html>
<head>
<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>
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.
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 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
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 4
break
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- input control for local date and time 5
local"
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, 4
keywords etc
93 meta http-equiv="refresh" metadata to refresh page 4
94 meta http-equiv="default- metadata for preferred stylesheet 4
style"
95 meta charset metadata for charset encoding declaration, exp 5
utf-8
96 meta http-equiv="content- metadata for charset encoding 4
type"
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
HTML Attributes
Attributes:
HTML elements can have attributes in opening tag. Attribute provides additional information about
that element. HTML attributes are added in opening tag and can have some value. Some
popular Global Attributes are class, id, title, style etc.
HTML attributes are always defined in the start tag. Attributes are written in name/value pair
like: <tag attributename="attributevalue">. Attribute once used can't be repeat in same element.
HTML Attributes Type:
HTML Attributes are categorized on the basics of their functionality and the way they are written in
HTML.
Attribute Type Meaning
Global Attribute Attributes meant for all html elements. Exp : class, id
Boolean Attribute Attribute with Attribute name only, no value.
Exp :disabled, hidden, reversed etc.
Presentational Attributes Attributes used to style HTML Element.
For example
: style, size, color, border, cellspacing, cellpadding etc.
Event Attributes Event attributes are used to add javascript event on html
element, like onclick, onmouseover, onmouseout, etc.
Note: Except style and size, all presentational attributes are removed in HTML5.
HTML Attributes List:
Hers is a list of html tags with their name, description and how to use them. These are
popular html attributes.
Attribute Element Description
class Global Attribute used to group elements for css
id Global Attribute Assign a unique id for the element
style Global Attribute CSS attribute for tags (Specifies an inline style
for an element)
title Global Attribute Specifies extra information about an element
(displayed as a tooltip)
lang Global Attribute Language of text
dir Global Attribute direction of text, ltr or rtl only
type <input>, <audio>, <video>, Defines type of element.
<embed>, <iframe>, <source>,
<script>,
<track>, <ol>
src <img>, <script>, <input>, source of media element
<audio>, <video>, <embed>,
<iframe>, <source>, <track>
href <a>, <link> hypertext reference, path of hyperlink and link
tag
tabindex <a>, <input>, <select>, <button to override default tab order and follow the
>, specific one.
<select>, <textarea>
width <img>, <embed>, <video>, <ifr Set width of element
ame>
value <input>, <option>, Set default value of element visible at
pageload
size <input>, <select> Width of element in px. For input type text,
size means no of characters
Attributes Removed in HTML5
bgcolor Background Color of the <body bgcolor="aqua">
document
(Removed in HTML5)
backgroun Background Image of the <body background="img/bg.png">
d document
(Removed in HTML5)
border To set border of table element. <table border="1"> </table>
(Removed in HTML5)
align Align left, right, center <p align="center">
(Removed in HTML5)
valign Align top, middle, bottom <p valign="middle">
(Removed in HTML5)
cellspacin change space (margin) between <table cellspacing="10px">
g table cells
(Removed in HTML5)
cellpaddin inner space ( padding) between <table cellspacing="10px">
g table cells
(Removed in HTML5)
bottomma Margin from bottom <body bottommargin="20">
rgin (Removed in HTML5)
topmargin Margin from top <body topmargin="10">
(Removed in HTML5)

HTML Tags and Elements

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tags and Elements

Uploaded by

Copyright:

Available Formats

HTML Tags and Elements

HTML Tags and Elements

popular Global Attributes are class, id, title, style etc.

HTML Attributes Type:

Attribute Type Meaning

Boolean Attribute Attribute with Attribute name only, no value.

Exp :disabled, hidden, reversed etc.

Presentational Attributes Attributes used to style HTML Element.

: style, size, color, border, cellspacing, cellpadding etc.

element, like onclick, onmouseover, onmouseout, etc.

popular html attributes.

Attribute Element Description

class Global Attribute used to group elements for css

id Global Attribute Assign a unique id for the element

title Global Attribute Specifies extra information about an element

lang Global Attribute Language of text

dir Global Attribute direction of text, ltr or rtl only

type <input>, <audio>, <video>, Defines type of element.

<embed>, <iframe>, <source>,

src <img>, <script>, <input>, source of media element

<audio>, <video>, <embed>,

<iframe>, <source>, <track>

href <a>, <link> hypertext reference, path of hyperlink and link

>, specific one.

width <img>, <embed>, <video>, <ifr Set width of element

value <input>, <option>, Set default value of element visible at

size means no of characters

Attributes Removed in HTML5

bgcolor Background Color of the <body bgcolor="aqua">

backgroun Background Image of the <body background="img/bg.png">

border To set border of table element. <table border="1"> </table>

align Align left, right, center <p align="center">

valign Align top, middle, bottom <p valign="middle">

cellspacin change space (margin) between <table cellspacing="10px">

cellpaddin inner space ( padding) between <table cellspacing="10px">

bottomma Margin from bottom <body bottommargin="20">

rgin (Removed in HTML5)

topmargin Margin from top <body topmargin="10">

You might also like