HTML element is the combination of HTML starting tag, HTML ending tag and the content that's inside the starting tag and ending tag.
Table of Contents
Why we use HTML Elements
HTML Elements are used for the following reasons.
- HTML elements provide information about the Web Page to the Browser. This information is also known as metadata. MetaData Elements are placed inside the head of the document or web page.
- HTML Elements are used to structure the web page in a proper way. We can structure any web page in any way we like.
- HTML Elements are used to embed content like images, videos, audios or other multimedia files.
- HTML Elements are used to create lists.
- HTML Elements are used to create forms.
- HTML Elements are used to create Table.
- HTML Elements are used to link to different style-sheets to give a unique style to the Web Page.
- HTML Elements are used to include different scripts to make the page more interactive for the user.
Difference between HTML Elements and HTML Tags
A Web Page is made up of HTML Elements. All HTML Elements are Descendants of one or more HTML Elements.
Sometimes HTML Element is also refereed as HTML Tag. HTML Element is combination of both HTML Starting Tag and HTML Ending Tag and the content inside that tag. The content inside the tags can be simple Text. The only difference between the opening tag and closing tag is that the closing tag has forward slash.
While HTML Tags is nothing but the container which contains the content of Web Page. It tells your browser what to display and how to display it.
The term HTML Tags and HTML Elements are interchangeable, you will see people using these terms for each other. Programmers might use term HTML Tags for HTML Elements and vice versa but the main difference is already explained.
Types of HTML Elements
Some important types of HTML Elements are given below.
Common HTML Elements
Common HTML Elements are those elements that have an opening tag and a closing tag with the content inside both of them. There are many examples of Common HTML Elements that are used to construct the HTML Web Page.
Example of common HTML Elements are given below.
- HTML Element (html tag)
- HTML head Element (head tag)
- HTML body Element (body tag)
- HTML meta Element (meta tag)
- HTML link Element (link tag)
- HTML style Element (style tag)
- HTML title Element (title tag)
- HTML base Element (base tag)
- HTML header Element (header tag)
- HTML div Element (div tag)
- HTML footer Element (footer tag)
- HTML heading Element (h1, h2, h3, h4, h5 and h6 tag)
- HTML nav Element (nav tag)
- HTML section Element (section tag)
- HTML main Element (main tag)
- HTML paragraph Element (p tag) and many more.
We will explain the function of these and some more HTML Elements in the later part of article.
Note: Never forget the ending or closing tag, the web page might work fine in some browsers but sometimes it might produce errors or might effect the structure of HTML Web Page.
Empty HTML Elements or Self Closing HTML Elements
Some Elements do not need a closing tag. They only have an opening tag and they are self closing tags, that is why they are also called Self Closing HTML Elements. These tags are also empty, meaning that they don't have any content inside them. That is why they are also known as Empty HTML Elements.
Most common example of Empty HTML Element is.
- Line Break Element (br tag)
This Element is used to produces a line break during the normal flow of web page. It is useful for writing a content, where the division of lines is required.
Empty elements is closed in the opening tag with the forward slash. However HTML5 specifications doesn't require forward slash inside the opening tag.
Nested HTML Elements
HTML Elements can be nested inside other HTML Elements. In a Web Page some HTML Elements are nested inside other HTML Elements to structure the page.
For Example: Both Head HTML Element (head tag) and Body HTML Element (body tag) are nested inside main HTML Element (html tag).
Similarly all other HTML Elements are nested inside head HTML Element and body HTML Element.
HTML Block Level Elements
HTML Block Level Elements are elements that always start from the next line and take full space or width available. The default display value of Block Level Elements is block (display:block;).
You can add margin and padding to all four sides of block level elements. Some examples of block level elements are body tag, div tag and p tag.
Most common HTML Block Level Elements are.
- address tag
- article tag
- aside tag
- blockquote tag
- canvas tag
- div tag
- fieldset tag
- figure tag
- footer tag
- form tag
- h1 tag
- h2 tag
- h3 tag
- h4 tag
- h5 tag
- h6 tag
- header tag
- hr tag
- li tag
- main tag
- nav tag
- ol tag
- p tag
- section tag
- table tag
- ul tag
- video tag
HTML Inline Elements
HTML Inline Elements are elements that never start from next line and only take space that is required. The default display value of Inline Elements is inline (display:inline;).
You can't set width or height of Inline Elements.
Tip: if we set position property of Inline Element to absolute then it acts like Block Level Element (position:absolute;).
Most Common example of HTML Inline Elements are given below.
- a tag
- abbr tag
- acronym tag
- b tag
- big tag
- br tag
- button tag
- cite tag
- code tag
- i tag
- img tag
- input tag
- label tag
- map tag
- object tag
- output tag
- samp tag
- script tag
- select tag
- small tag
- span tag
- strong tag
- sub tag
- sup tag
- textarea tag
HTML Inline-Block Elements
Inline-Block Elements are similar to Inline Elements but you can set their width and height unlike Inline Elements. To convert Inline Element into Inline-Block Element you have to set display property to Inline-Block (display:inline-block;).
HTML Semantic Elements
HTML Semantic Elements are elements that describe their meaning themselves. Their names tell about their purpose and the type of content that is inside them.
Some Common example of HTML Semantic Elements are given below.
- header tag
- nav tag
- section tag
- footer tag
- aside tag
- p tag
- h1 tag
- h2 tag
- h3 tag
- h4 tag
- h5 tag
- h6 tag
- cite tag
- code tag
- address tag
- img tag
- label tag
- map tag
- samp tag
- sub tag
- sup tag
- var tag
Main Root HTML Elements
The main HTML Element (html tag) is the top level element of any HTML document. All other HTML Elements are placed inside this element. It is also known as Root HTML Element.
html tag is main root tag.
HTML MetaData Elements
HTML Metadata Elements contain important information about the web page or website. This information helps the search engines to rank and crawl the the website. They also help browsers to render the page using styling information and make the web page interactive using the script information.
Some metadata elements are.
- base tag
- meta tag
- head tag
- link tag
- style tag
- title tag
Content Related HTML Elements
Content related HTML Elements are those elements that we use to place our content inside the main section or body of our Web Page.
Some common content related html elements are.
- header tag
- footer tag
- section tag
- aside tag
- article tag
- address tag
- h1 tag
- h2 tag
- h3 tag
- h4 tag
- h5 tag
- h6 tag
- nav tag
- main tag
Embedded Content HTML Elements
Other than images, videos we can also embed other type of interactive content on our web page using Embedded Content HTML Elements
Some common Embedded Content HTML Elements are.
- iframe tag
- object tag
- applet tag
- embed tag
- picture tag
- source tag
Image and Multimedia HTML Elements
There are many Multimedia HTML Elements that allow us to embed different type of multimedia content on our website.
Some common Multimedia HTML Elements are.
- img tag
- video tag
- audio tag
- map tag
- track tag
- area tag
Interactive HTML Elements
There are many Interactive HTML Elements that make the Web Page user friendly and a lot more interactive
Some common Interactive HTML Elements are.
- menu tag
- summary tag
- menu item tag
- map tag
- details tag
- dialog tag
Function of Some Important HTML Elements
html tag: Html Element is the main root tag of web page. All other elements are placed inside this tag.
head tag: Head Element contains all the important metadata for the browser and search engines.
link tag: Link Element is used to build a link or relationship between your main web page and external stylesheets or styling files for fonts and stuff.
script tag: Script Element is used to embed JAVASCRIPT on web page to make it more interactive.
style tag: Style Element contains the CSS for the Web Page.
title tag: Title Element is used define main title of the web page that is displayed in browser's tab.
meta tag: Meta Element is used to represent metadata of website like description about website and it's main keywords etc.
body tag: Body Element is the tag that contains all the information and content that we see on our web page. Only one body tag is allowed in a web page.
h1 tag to h6 tag: These are heading elements and are used to write headings, h1 is main heading and h6 is least important sub heading.
p tag: Paragraph Element is used to write text in the form of paragraph. It's a block level element.
header tag: Header Element represents the main head section of our web page. It may contain the logo, navigation, slogan or introductory part of the website.
address tag: Address Element contains the contact information of a person or organization.
article tag: Article Element contains the independent and unique information which is self explanatory.
aside tag: Aside Element contains the side information about the web page or website.
main tag: Main Element contains the main section and content of the web page.
nav tag: Nav Element contains the navigation bar or menu of the website.
section tag: Section Element is used to make different main sections of the web page that are independent from each other.
footer tag: Footer Element usually contains copyright information, some useful links and contact information.
div tag: Div Element is a container which contains other HTML Elements or Tags.
ul tag: Ul Element is used to make an unordered list.
li tag: Li Element is used to represent list items in the list.
ol tag: Ol Element is used to make an ordered list.
a tag: Anchor Element or 'a' Element is used to make anchor links or hyper links to internal or external destinations.
cite tag: Cite Element is used to represent a cited work of someone.
abbr tag: Abbr Element is a used to represent abbreviation.
code tag: Code Element is used to represent or write computer code.
span tag: Span Element is used to give styles to specific element or text by grouping them together in span tag or element.
audio tag: Audio Element is used to embed audio files.
img tag: Img Element is used to display images.
video tag: Video Element is used to embed video content on web page.
iframe tag: Iframe Element is used to embed another page or document in current HTML document.
table tag: Table Element is used to make tables, nowadays Div is used mostly in place of tables.
tbody tag: Tbody Element is used to make body of table.
tfoot tag: Tfoot Element is used to make footer of table.
thead tag: Thead Element is used to make header section of table.
td tag: Td Element is used to define a single cell inside the table which contains the data.
tr tag: Tr Element is used to define a row of table.
th tag: Th Element is used to define a header cell of table which contains important or main headings or data.
form tag: Form Element is used to make a form.
input tag: Input Element is used to take input data from the user.
button tag: Button Element is used to make clickable buttons.
textarea tag: Textarea Element is used to take comparatively large amount of textual data from user as an input.
select tag: Select Element is used to create a selection menu or drop down menu.
option tag: Option Element is used to represent options of selection menu inside select element.
label tag: Label Element is used to create a label, caption or name for a certain field or item within the form or anywhere else.