Introduction to HTML
Introduction to HTML
What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create
and
design web pages on the internet. It was introduced by Tim Berners-Lee in 1991 at CERN as
a simple markup language. Since then, it has evolved through versions from HTML 2.0 to
HTML5 (the latest 2024 version).
HTML is a combination of Hypertext and Markup language. Hypertext defines the link
between the web pages and Markup language defines the text document within the tag.
Explained
● The <html> declaration defines that this document is an HTML document
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
● Title Tag
The title tag <title> specifies the HTML page title, which is shown in the browser’s title bar.
● Body Tag
The body tag <body> is where you insert your web page’s content.
● Paragraph Tag
A paragraph tag <p> is used to define a paragraph on a web page.
● Heading Tag
The HTML heading tag is used to define the heading of the HTML document. The <h1> tag
defines the most important tag, and <h6> defines the least.
1. Paired Tags
An HTML tag is known as a paired tag when the tag consists of an opening tag and a closing
tag as its companion tag. An HTML Paired tag starts with an opening tag: the tag name
enclosed inside the angle brackets; for example, a paragraph opening tag is written as ‘<p>’.
The content follows the opening tag, which ends with an ending tag: the tag name starting
with a forward slash; for example, an ending paragraph tag is written as ‘</p>’. The first tag
can be referred to as the ‘Opening Tag’, and the second tag can be called Closing Tag.
Example #1:
<p> This text is a paragraph . </p>
Example #2:
Another example of a paired tag is italic and/or bold tags:
<i> <b> This is a bold and italicized text </b> </i>
2. Unpaired Tags
An HTML tag is called an unpaired tag when the tag only has an opening tag and does not
have a closing tag or a companion tag. The Unpaired HTML tag does not require a closing
tag; an opening tag is sufficient in this type. Unpaired tags are sometimes also named as
Standalone Tags or Singular Tags since they do not require a companion tag.
Example:
<p> This is a paragraph </p>
<hr>
<b> This is a bold text </b>
<br>
<i> This is a italicized text </i>
Here, the <hr> and <br> is the unpaired tag. <hr> tag is used to create a horizontal line and
<br> tag is used to insert a line break within text, allowing e content to continue on the next
line.
Note: In older versions, you might see hr tag written as <hr/> instead of <hr>. These tags are
also called Empty Tag.
HTML Attributes
● HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element.
● Each element or tag can have attributes, which defines the behaviour of that
element.
● The Attribute should always be applied with its name and value pair.
● The Attributes name and values are case sensitive, and it should be written in
Lowercase only.
● You can add multiple attributes in one HTML element, but need to give space
between two attributes.
Example:
<body bgcolor=”green”>
Example:
Example:
3. Underline (<u>)
The <u> tag is used to underline text.
Example:
Example:
5. Superscript (<sup>)
The <sup> tag is used to display text as superscript (raised above the normal text).
Example:
E = mc<sup>2</sup>
6. Subscript (<sub>)
The <sub> tag is used to display text as subscript (lowered below the normal text).
Example:
H<sub>2</sub>O
Example:
Example:
Example:
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you
when
you edit the source code at a later date.
<!-- This is a comment →
Note: that you need an exclamation point after the opening bracket, but not before the
closing
bracket.