HTML is widely used, standard markup language to create web pages.

An Introduction to HTML

HTML stands for HyperText Markup Language. It is used to structure the content on the web

by using various elements (commonly known as tags). These HTML elements define the

different sections of a web page, such as headings, paragraphs, links to other webpages,

listings, images, tables, etc. These elements tell the browser about the content and formatting

to display.

HTML is HyperText + Markup Language. Where,

 HyperText refers to the way in which Web pages (HTML documents) are linked

together. Thus, the link available on a webpage is called "HyperText".

 Markup Language, which means you use HTML to simply "mark up" a text

document with tags that tell a Web browser how to structure it to display.

HTML - History and Evolution

HyperText Markup Language (HTML) was initially developed by Sir Tim Berners-Lee in

late 1991. It was designed as a standard language for creating and formatting documents on

the World Wide Web. All the web pages on the internet are made from HTML.

From 1990 to 1995, HTML underwent changes and extensions, initially at CERN and then at

the IETF. The World Wide Web Consortium (W3C) became the new home for HTML

development.
HyperText

We must first examine the idea of hypertext in order to comprehend the origins of HTML.

Early 20th-century pioneers like Vannevar Bush proposed the concept of tying information

together through hypertext, envisioning a "memex" machine that could organize enormous

volumes of information using linked microfilm.

However, Ted Nelson, an American philosopher and sociologist, first used the word

"hypertext" in the 1960s. Nelson's idea of hypertext was to develop a network of connected

text and multimedia that permitted non-linear information navigation.

History and Evolution

Here you will see the evolution of HTML over the past couple of decades. The major upgrade

was done in HTML5 in 2012.

Year Progress

Tim Berners-Lee created HyperText Markup Language but it was not officially
1991
released.

1993 Tim Berners-Lee created the first version of HTML that was published and available
 to the public.

HTML 2.0 was released with a few additional features along with the existing
1995
features.

There was an attempt to extend HTML with HTML 3.0, but it was replaced by the
1997
more practical HTML 3.2.

The W3C (World Wide Web Consortium) decided to shift focus to an XML-based
1998
HTML equivalent called XHTML.

HTML 4.01, which became an official standard in December 1999, was the most
1999
widely used version in the early 2000s.

2000 XHTML 1.0, completed in 2000, was a combination of HTML4 in XML.

The introduction of XForms reignited interest in evolving HTML itself rather than

replacing it with new technologies. This new theory recognized that XML was better
2003
suited for new technologies like RSS and Atom, while HTML remained the

cornerstone of the web.

A W3C workshop took place to explore reopening HTML's evolution. Mozilla and
2004
Opera jointly presented the principles that later influenced HTML5.

The W3C expressed interest in HTML5 development and formed a working group to

collaborate with the WHATWG. The W3C aimed to publish a "finished" HTML5
2006
version, whereas the WHATWG focused on a Living Standard, continuously

evolving HTML.

2012 HTML5 can be seen as an extended version of HTML 4.01, which was officially
 published in 2012.

Evolution of HTML Features: From HTML 1.2 to HTML 5

With the introduction of new versions of HTML, support for additional features was added,

and the user experience was enhanced. The following table shows the features introduced in

later versions of HTML:

Type of HTML HTML HTML

Description
Content 1.2 4.01 5

The img tag allows to add images to

Image Yes Yes Yes
HTML document

Paragraph element in HTML is used to

Paragraph Yes Yes Yes represent a paragraph of text on a

webpage.

Heading are used in HTML to define

Heading Yes Yes Yes
variable length headings. (h1 to h6)

Address element in HTML is used to

Address Yes Yes Yes
contain contact information of user.

Anchor tag is used to define hyperlink in

Anchor Yes Yes Yes
webpage.

List Yes Yes Yes List is used in HTML to display list of

 related items.

Table is used to organize data into rows

Table No Yes Yes
and columns

Style is used to add CSS styling to

Style No Yes Yes
webpage

Script No Yes Yes Script is used to add JavaScript to HTML.

Audio No No Yes Enables introduction of audio to webpage

Video No No Yes Enables introduction of video towebpage.

Enables introduction of graphics elements

Canvas No No Yes
to webpage.

What is an HTML Element?

An HTML element is a basic building block to create a webpage, and It is created by a start

tag, content, and end tag. In an HTML element, the content is placed between a start and end

tag.

The basic syntax of an HTML element is −

<tag_name>content</tag_name>

Consider the following example demonstrates an HTML element −

<h1>It is top-level heading</h1>

Here,

 <h1> is the start tag.

 "It is top-level heading" is the content, which is placed inside the start and end tags.

 </h1> is the closing tag.

HTML Page Structure

HTML page structure (or, HTML basic structure) consists of the essential elements that are

required to create an HTML document that can be displayed on the browser.

The following image shows the page structure of an HTML document −

HTML page structure contains <!DOCTYPE html>, <html>, <head>, <title>, <body>, and

other tags that will be shown on the homepage.

Where,

 <!DOCTYPE html> − It defines the document type as HTML.

 <html> − It is a root element for an HTML document. All elements are placed inside

this element.

 <head> − The head tag may contain scripts and styles that are useful page

functionalities. Meta tags are also placed inside this tag.

 <title> − It defines the webpage's title.

 <body> − It defines the body of the webpage, all elements that are used to display

content on the browser placed inside the body tag.

 <h1> and <p> − The h1 tag defines page heading, and p tag defines paragraph.

Basic HTML Tags

The following are the HTML Basic Tags −

 <h1> to <h6> − These are heading tags and used to write headings for the webpage.

Where, <h1> is the top-level heading and <h6> is the bottom-level (lowest) heading.

 <p> − The <p> tag displays text as a paragraph on the webpage.

 <br> or <br /> − The <br> tag stands for "break", and it inserts a line break on the

webpage.

 <div> − The <div> tag stands for "division", it defines a division or section on the

webpage. You can place any number of elements to group them in a section.
  <ul> and <ol> − The <ul> and <ol> tags insert list items on the webpage, <ol> tag

defines ordered listing, whereas <ul> tag defines unordered listing.

 <img> − The <img> tag is used to insert an image in the webpage.

 <a> − The <a> tag stands for "anchor", and it is used to place a link in the webpage.

 <pre> − The <pre> tag is used to preserve format

HELLO WORLD! Program in html

<DOCTYPE! Html>

<html>

<head>

<title> my first program </title>

</head>

<body>

<h1> hello world </h1>

</body>

</html>

What are HTML Attributes?

HTML attributes are special words that provide additional information to an HTML element.

Attributes are placed inside the element's opening tag, and they are used to configure or

adjust the element's behavior. All attributes are made up of two parts: a name and a value −

 Name: The attribute name is the keyword, also known as the attribute identifier,

which defines a specific characteristic for the element in which it is using. For

example, the paragraph <p> element (in the below-given example) has an attribute

"align", which defines the alignment of the paragraph on the page.

 Value: The attribute value is the data or information that defines the value to be set

for that attribute. The value is assigned within the double quotes. For example, "left",

"center", or "right" can be assigned to the "align" attribute with the paragraph tag (as

shown in the below example).

Rules and Characteristics

The following are the rules and characteristics of HTML attributes; you should follow while

using attributes with HTML elements:

 Attributes are optional; you can use them to provide additional information about an

HTML element.

 Attributes have name and value pairs, but some of the attributes do not require any

value; those are known as Boolean attributes.

 An HTML element can have multiple attributes, and they should be separated by

spaces.

 Attributes should always be written with the opening tag.

 All HTML elements can have attributes except a few like <head>, <title>, <script>,

etc.

 W3C recommends using attributes in lowercase and keeping the value in quotes.
Example of HTML Attributes

HTML Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all)

are −

The id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an

HTML page. There are two primary reasons that you might want to use an id attribute on an

element −

 If an element carries an id attribute as a unique identifier, it is possible to identify just

that element and its content.

 If you have two elements of the same name within a Web page (or style sheet), you

can use the id attribute to distinguish between elements that have the same name.

We are using the id attribute to distinguish between two paragraph elements −

The title Attribute

The title attribute gives a suggested title for the element. The syntax for the title attribute is

similar as explained for id attribute –

The behavior of this attribute will depend upon the element that carries it, although it is often

displayed as a tooltip when the cursor comes over the element or while the element is

loading.
The class Attribute

The class attribute specifies one or more CSS classes for an HTML element. Multiple classes

can be used on a single element with this attribute. The value of this attribute is

a space-separated list of class names if you are specifying multiple classes.

The style Attribute

The style attribute allows you to write inline CSS rules for an element.

HTML headings

Html headings are used to define the hierarchy (levels) and structure of content on a web

page. They create a visual hierarchy, with the highest level heading which is h1 indicating the

most important content or the main heading, and lower-level headings like h2, h3, h4, etc. for

subtopics.

Reason to use Headings

Headings are crucial for structuring content and providing a clear visual indication of the

beginning of new sections or topics. Properly structured headings enhance readability and

user experience on websites, ensuring that information is organized and easy to navigate.
  Heading impact on SEO: A well organized headings helps search engines to

understand the content structure and indexing.

 Highlighting Important Topics: Using header tags properly keeps the content

readable.

Examples of HTML Heading

<!DOCTYPE html>

<html>

<head>

<title>headings</title>

</head>

<body>

<h1>hello world</h1>

<h2>hello world</h2.

<h3> hello world</h3>

<h4>hello world</h4>

<h5>hello world</h5>

<h6>hello world</h6>
</body>

</html>

HTML Heading Tags

HTML Heading is created by using using <h1> to <h6> tags. The heading hierarchy

determines the importance of content and aids in creating a clear information flow for both

users and search engines.

Hierarchical Structure of Heading Tags

Below is the list according to the hierarchy of the heading tags (most to least significant).

 HTML <h1> Tag: The top-level heading denotes the main topic or title of the entire

page.

 HTML <h2> Tag: Subheadings under <h1> represent major sections related to the

main topic. They provide a more specific context to the content.

HTML <h3> to <h6> Tags: These tags are used for further subsections or nested content

within <h2> headings. They offer a deeper level of hierarchy for organizing content within

specific sections.

Html paragraph tag :

HTML Paragraphs are block-level elements, used to structure and format text content on a

webpage. A paragraph is basically a collection of words and punctuations together. It allows

us to organize and present textual information in a coherent and readable manner. HTML p

tag is used to create a paragraph element.

Paragrapgh using p tag

HTML <p> tag is used to create a paragraph, it does not matter how you kept the text inside

the p tag it will always make the text in a simple form.

HTML <br> tag is used to insert line breaks within a paragraph to control the text layout.

Example of HTML heading

<!DOCTYPE html>

<html>

<head>

<title>paragraph</title>

</head>

<body>

<P>This is a paragraph</p>

<br>

<P>line break</p>

</body>

</html>

HTML - Fonts

Fonts play a very important role in making a website more user friendly and increasing

content readability. Font face and color depends entirely on the computer and browser that is

being used to view your page but you can use HTML <font>tag to add style, size, and color
to the text on your website. You can use a <basefont> tag to set all of your text to the same

size, face, and color.

HTML font tag is having three attributes called size, color, and face to customize your fonts.

To change any of the font attributes at any time within your webpage, simply use the <font>

tag. The text that follows will remain changed until you close with the </font> tag. You can

change one or all of the font attributes within one <font> tag

n the bellow examples we will see the example codes of "Setting font", "Relative font Size",

"Font face", knows about the basefont as well.

Set Font Size

To set the font size of a web page, we use the size attribute. This attribute allows us to set the

font size between 1 to 7 where 1 is the smallest font size whereas, 7 is the largest. The default

size of a font is 3.

Font Face

You can set font face using face attribute but be aware that if the user viewing the page

doesn't have the font installed, they will not be able to see it. Instead user will see the default

font face applicable to the user's computer.

Setting Font Color

We can set any font color of our choice to the texts using color attribute.To specify the color,

we can use either the color name or hexadecimal code of that

color.specify the color, we can use either the color name or hexadecimal code of that color.

Example:

<!DOCTYPE html>

<html>

<head>

<title>font style</title>

</head>

<body>

<font size=”1” font color=”blue” font face=”time new roman”> welcome to AITRC</font>

</body>

</html>

HTML – Formatting

HTML Formatting is the way of representing textual context on the website in a better way,

so the user can easily navigate through your website. HTML Formatting are done by using

HTML physical and logical tags. Here in this article we will focus on the text appearance

with HTML formatting.

What is the use of html formatting?

Without formatting nothing looks good or soothing to our eyes. But HTML Formatting is not

only for soothing to the eye or make textual content attractive. There are few reason to do the

HTML Formatting.

Appearance of any text can gives us the idea that how important is that keyword is, like if we

bold some keyword that indicate the importance of that keyword. Same goes with italic,

underline each one of them carry an important meaning as well.

 Formatting helps search engines to crawl the website, in a structure form things are

scan bale to the readers as well as search engines

HTML Formatting Tags

We can use CSS to do the HTML formatting, but when HTML is providing the feature to

format the textual content, then why not to use them.

Tag Description

<b> This physical tag is used to make the text bold.

This logical tag is used to make the text important, but this also make the text
<strong>
bold visually.

<i> This physical tag is used to make the text italic.

<em> This logical tag is used to make the text italic.

<big> This physical tag is used to make the bigger size text. It is not supported in
 HTML5.

<small> This physical tag is used to make the smaller size text.

This tag is used to make the text superscript text(Slightly above the normal
<sup>
line).

This tag is used to make the text subscript text(Slightly below the normal
<sub>
line).

<ins> This tag is used to indicate that the content is added.

<del> This tag is used to indicate that the content is deleted.

<u> This tag is used to put an underline on the text.

<strike> This tag is use to cut the lines or strike on text. It is not supported in HTML5.

<mark> This tag is used to mark the keyword or sentence in yellow color(background).

This tag is used to make the text appeared in teletype, and it is not supported
<tt>
in HTML5.

HTML - Text Links

A webpage can contain various links that take us directly to other web pages or resources and

even specific parts of a given page.

A hyperlink is a specific type of link that allows users to navigate from one web page or

resource to another by clicking on it. You can create hyperlinks using text or images available

on a webpage. A hyperlink is specified using HTML tag <a>. This tag is called anchor

tag and anything between the opening <a> tag and the closing </a> tag becomes part of the

link and a user can click that part to reach the linked document.

Create a hyperlink

<!DOCTYPE html>

<html>

<head>

<title> hyperlink </title>

</head>

<body>

<h1> click the following link<h1>

<a href=http://www.google.com/> visit google </a>

</body>

</html>
HTML – Colors

HTML Colors are a way of specifying the appearance of web elements. Colors are very

important aspects of web design, as they not only enhance the visual appeal but also influence

user behavior. They are also used to evoke emotions and highlight important content.

In HTML, colors are generally used to color backgrounds, borders and texts.

HTML Color Coding Methods

The following three methods are mostly used to set colors in HTML:

 Color Names: We can specify color names directly like green, blue or red.

 HEX Color Codes: A six-digit code representing the amount of red, green, and blue

that makes up the color.

 RGB Color Values: This value is specified using the rgb() property.

Setting background color:

<DOCTYPE! Html>

<html>

<head>

<title>setting background color</title>

</head>

<body bgcolor=”yellow” body text=”blue”>

<p>
 Use different colors

</p>

</html>

HTML – Images

HTML Images provides a visual content for web pages, enhancing user experiences and

conveying information. They can be photographs, graphics, icons, or illustrations. To insert

an image on HTML document we can use <img> tag.

Examples of HTML images

In the bellow examples we will see how to set the width, height, title, how to make image

more attarctive on the webpage! and so many many other things on images.

Inserting an Image in HTML

You can insert any image in your web page by using <img> tag. The <img> tag is an empty

tag, which means that, it can contain only list of attributes and it has no closing tag.

<!DOCTYPE html>

<html>

<head>
<title> images</image>

</head>

<body >

<p> simple image insert</p>

<img src=flower.jpg>

</body>

</html>

HTML – Lists

HTML List is a collection of related infomation. The lists can be ordered or underdered

depending on the requirement. In html we can create both order and unorder lists by

using <ol> and <ul> tags. Each type of list can be decorated using porper attributes or CSS

also. There is one more list which is description list - HTML <dl>, <dt> & <dd> tag are used

to create description lists.

Lists in HTML

As HTML offers three ways for specifying lists of information namely ordered, unordered,

and definition lists. All lists must contain one or more list items.
HTML Unorder Lists

Unorder lists are marked with bullet points, by using html <ul> & <li> tag we can create a

unorder list. This is also know as unorder list.

<!DOCTYPE html>

<html>

<head>

<title> html list </title>

</head>

<h1> list of ice-cream</h1>

<li> vanilla</li>

<li> mango</li>

<li>chocolate</li>

<li> black current</li>

</body>

</html>

HTML Order Lists

Order list are marked with numbers by default, we can xhnage the number into alphabet,

roman numbers, etc. By using html <ol> & <li> tag we can create a order list and using type

attribute we can change the default numeric marking.

<!DOCTYPE html>

<htlm>

<head>

<title> html order list </title>

</head>
<body>

<h1> list of ice-cream>

<ol>

<li> vanilla</li>

<li> mango</li>

<li>chocolate</li>

<li> black current</li>

</body>

</html>

HTML – Tables

HTML Tables allow us to present data in a organized way by providing row and column

facility. Also offer a visual structure that aids in clarity and comprehension, making them a

fundamental element in web development.

Why Tables are Used in HTML?

Tables are included in HTML for various reasons, primarily centered around organizing and

presenting data effectively. Some key purposes include

 Structuring Data: Tables provide a coherent structure for organizing and displaying

data, making it easier for users to interpret information.

 Comparative Presentation: When there is a need to compare different sets of data

side by side like difference between two concepts, tables offer a clear and visually

accessible format.
  Tabular Data Representation: Information that naturally fits into rows and columns,

such as schedules, statistics, or pricing tables, can be well-represented using HTML

tables.

How to create a Table in HTML?

Creating tables in HTML involves several elements that define the structure and content. The

primary tags used are <table>, <tr>, <td>, and <th>.

 HTML <table> Tag: This tag is used to create the table that wrap the rows and

columns within it.

 HTML <tr> Tag: Stands for "table row" and is used to create a row within the table.

 HTML <td> Tag: Represents "table data" and is used to create standard cells within

a row.

 HTML <th> Tag: Represents "table header" and is used to create header cells within

a row.

Define an HTML Table

An HTML table is defined using <table> tag, to create row <tr> tag, <th> & <td> are used

to create table header and table data cell.

Example:

Consider a table representing a simple list of products with their respective categories and

prices. This basic table structure organizes data in a clear, tabular format, making it easy to
read and understand. Here, the border is an attribute of <table> tag and it is used to put a

border across all the cells. If you do not need a border, then you can use border="0".

HTML - Forms
HTML forms are simple form that has been used to collect data from the users. HTMl form

has interactive controls and various input types such as text, numbers, email,

password, radio buttons, checkboxes, buttons, etc. We can see its application in

multiple sites, including registration forms, customer feedback forms, online survey

forms and many more.

Why use HTML Forms?

An HTML form is used to collect data from the user and send it to the server. Consider a
scenario where we incorporate a Form section into our HTML webpage. Whenever the
browser loads that page and encounters the <form> element, it will generate controls on
the page allowing users to enter the required information according to the type of
control.