Introduction to HTML
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for
creating Web pages. HTML describes the structure of a Web page. HTML consists of a series
of elements. HTML elements tell the browser how to display the content.
Tags or Elements: Tags in HTML play an essential role in organizing and displaying content.
Each tag has a distinct purpose, specifying various elements on a web page. Tags are
enclosed within angle brackets and consist of an opening tag ‘< >’ that begins an element and
a closing tag ‘</ > that marks its end.
Tags are two types- Container tag and empty tag.
1. Container Tag: A container tag is an HTML that consists of both an opening tag and a
corresponding closing tag. Container tags are used to enclose and define a block of content
or a group of nested elements.
Some container tags are <B>, <BODY>, <TITLE> etc.
2. Empty Tag: An empty tag is an HTML tag that doesn't require a separate closing tag
because it doesn't have any content or nested elements.
Some empty tags are <BR>, <IMG>, <HR> etc.
Attribute: HTML attributes are special words used inside the opening tag/empty tag to change
the default behaviour of the tag.
Syntax:
Attribute = “Value”
e.g.
Align = “Center”
Structure of an HTML Document:
An HTML Document is mainly divided into two parts:
• HEAD Part: This contains the information about the HTML document including the
Title of the page, other language used in html etc.
• Body Part: This part includes the information that you wish to display on a web page.
Essential HTML Tags
An HTML document's basic structure consists of 5 elements:
1. <!Doctype>
The tag in HTML is used to inform the browser about the HTML version used in the web page.
2. <HTML>: The <html> tag informs the browser that this is an HTML document.
3. <HEAD>: The <head> tag in HTML is used to contain information about the web page like
title of page, keywords for find contents, other including files etc. The head of an HTML
document is a section of the document whose content is not displayed in the browser when
the page loads.
4. <Title>: This <title> tag in HTML displays the title of a web page. It appears at the top of the
browser window.
5. <BODY>: The <body> tag in HTML specifies the main content of an HTML document that
appears on the browser. It can contain headings, text, paragraphs, photos, tables, links,
videos, etc.
Some important tags.
The <H> tag: The <H> tag is used for heading or subheading that we want to display on a
webpage. In HTML, there are six headings defined using <h1> to <h6> tags. h1 is the highest
level or the main heading, while h6 is the least heading size.
e.g.
<H1>Main Heading</H1>
The <P> tag: This tag is used to define a paragraph. The end of the paragraph is marked by
</P>.
The <BR> tag: It is use to give a line break in a single paragraph. It is an empty tag.
Align Attribute: Align attribute is used to change the default alignment of a content. The
values used with align attributes are “left”, “right”, “center” and “justify”.
Changing Background colour: The BGColor attribute of the <BODY> tag is used to set the
background colour of the document page.
Syntax:
<BODY BGColor=”ColourName”>
e.g.
<BODY BGColor=”Yellow”>
Changing the Text colour: The Text attribute of the <BODY> tag is used to set the text
colour of the document page.
Syntax:
<BODY Text=”ColourName”>
e.g.
<BODY Text=”Red”>
Setting a background image: The Background attribute of the <BODY> tag is used to set
a background image on the HTML document page.
Syntax:
<BODY Background = ”URL of imagefile”>
e.g.
<BODY Background =”[Link]”> OR <BODY Background=”C:\user1\picture\[Link]” >
Text formatting tags: In HTML character rendering tags are used for text formatting. The
<B> tag use for boldface, <I> for italic, <U> for underline, <SUB> for Subscript, <SUP> for
Superscript, and <STRIKE> use for Strikethrough.
The <CENTER> tag: HTML <center> tag is used to make center align the block-level and
content at once.
Syntax:
<Center> Block of content </Center>
e.g.
<Center>
<H1>First Heading</H1>
<H2> Second Heading </H2>
<H3> Third Heading </H3>
</Center>
All the three headings will be center align at once.
Lists in HTML: HTML lists come in three main categories: ordered lists, unordered lists
and definition lists. Each type serves a specific purpose and can be customized to fit your
design and content needs.
1. Ordered List: HTML Ordered List or Numbered List displays elements in numbered format.
The HTML <OL> tag is used for ordered list. It is used in conjunction with the LI (List Item)
tag, which is used to tag the individual list items in a list.
Syntax:
<OL>
List of items
</OL>
Using TYPE attribute in an Ordered List: You can use the TYPE attribute to specify the
number type for an Ordered List. The values that you can use with the TYPE attribute are “A”,
“a”, “I”, “i” and “1” for specifying uppercase letters, lowercase letters, uppercase roman
numerals, lowercase roman numerals or Numeric numbers respectively.
Using START and VALUE attribute in an Ordered List: The START attribute in an <OL>
tag is used to start the numbering sequence at a particular number. You can use the VALUE
attribute in an <LI> tag to restart the numbering sequence at a particular number.
2. Unordered List: In HTML unordered list or Bulleted list, the list items have no specific
order or sequence and the list items are marked with bullets. It begins with the <UL> tag and
closes with a </UL> tag. The list items begin with the <LI> tag and end with </LI> tag.
Syntax
<ul>
List of Items
</ul>
Using TYPE attribute in an Unordered List: The TYPE attribute can be used to specify the
type of bullet for an unordered list. The values that you can use with the TYPE attribute are
“disc”, “circle” and “square”.