Scribd
Upload
2 views

HTML Tutorial

HTML, or Hyper Text Markup Language, is a standard markup language used for creating webpages, first developed by Tim Berners-Lee in 1991. This tutorial covers fundamental concepts, basic structure, and advanced techniques of HTML, making it suitable for both beginners and experienced designers. Key topics include HTML elements, basic tags, the importance of HTML, and its applications in web development.

Uploaded by

saurabhkrsahu720p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML Tutorial

HTML, or Hyper Text Markup Language, is a standard markup language used for creating webpages, first developed by Tim Berners-Lee in 1991. This tutorial covers fundamental concepts, basic structure, and advanced techniques of HTML, making it suitable for both beginners and experienced designers. Key topics include HTML elements, basic tags, the importance of HTML, and its applications in web development.

Uploaded by

saurabhkrsahu720p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 42

HTML Tutorial

 HTML is a standard markup language, which stands


for Hyper Text Markup Language.
 It is widely used language to create webpages.
 HTML invented by Tim Berners-Lee in late 1991, but it's
first version "HTML 1.0" was released in 1993, and
"HTML 2.0" was the first standard HTML specification,
which was published in 1995.
 This HTML tutorial covers everything from basic HTML
fundamental concepts and tags to advanced techniques,
such as forms, modal boxes, multimedia, and HTML5.
 This tutorial is designed to help both beginners and
experienced designers become experts in building
dynamic and responsive websites.
What is HTML?
 HTML (Hyper Text Markup Language) is a standard
markup language to design the structure of a webpage.
 HTML is the combination of Hyper Text and Markup
Language.
 Hyper Text defines the internal links between webpages,
and Markup language defines the layout and presentation
of text and media.

Basic HTML Structure


The basic structure of an HTML document contains the few
mandatory tags, that must be used to create a webpage. This structure
must be followed to create any type of HTML document.

Here is the basic structure of an HTML document −

<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Webpage's Heading</h1>
<p>Content (Your first paragraph) </p>
</body>
</html>

Elements of HTML Basic Structure


The following are the basic tags that define the basic
HTML structure −
1. <!DOCTYPE html>
This element defines the document type as HTML. This
element must be written before writing any HTML
document.
2. <html>...</html>
The <html> tag is the parent tag for all HTML
elements. Everything related to create an HTML
document must be written inside the <html> tag. CSS,
JavaScript, and jQuery must also be written inside this
tag.
3. <head>...</head>
The <head> tag is a container tag for all those elements
that are not directly displayed on the webpage but
required for the page functionalities. It contains meta
tags (which are used for SEO purposes), title tag, script
tags, etc.
4. <title>...</title>
The <title> tag is used to define the title of the webpage
that you can see in the browser's tab, bookmarks list,
and search engine results. This tag is also very
important for SEO purposes to help search engine to
understand the content of the webpage.
5. <body>...<body>
The <body> tag is the container tag for all those
elements, which represents the main content of a
webpage that displays on the browser.
6. <h1>...</h1>
The <h1> tag is one of the heading tags. It is the most
important heading tag, which defines the main title or
headline of the webpage. Any text written inside <h1>
and </h1> is a top-level heading of the content.
7. <p>...</p>
The <p> tag defines a paragraph, anything written
inside <p> and </p> displays as a paragraph on the
webpage. Use multiple <p> tags to display text in
different paragraphs.

Writing Hello World in HTML


By using the above basic HTML structure, we can write
an HTML document to display "Hello World" on the
webpage.
Below is the HTML code to display Hello World on the
webpage in a paragraph

<!DOCTYPE html>
<html>
<head>
<title>Hello World Example by hi hello</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
The above example will display "Hello, World!" on the
browser inside top-level heading (h1).
Comments in HTML
Just like other programming languages, you can keep
any text as a comment inside an HTML document. To
create a comment in HTML, use <!-- and -->.
Any text written inside <!-- and --> considers as
comment and it does not display on the website.
Example
Below is the example of HTML comment −

<!--<h1>Hello World Example</h1>-->

Online HTML Editor


We offer an HTML Online Editor that enables you to edit and
execute HTML code directly within your web browser. By clicking
on the "Edit & Run" button, you can check its output and edit
the code as well.

<!DOCTYPE html>
<html>
<head>
<title>Online HTML Editor</title>
</head>
<body>
<h1>Online HTML Editor</h1>
<p>Hello World</p>
</body>
</html>

Advantages of Learning HTML


The following are some of the key advantages of learning HTML
−
 Create a web site − You can create a website or customize an
existing web template if you know HTML well.
 Become a web designer − If you want to start a career as a
professional web designer, HTML and CSS designing is a
must-have skill.
 Understand web − If you want to optimize your website, to
boost its speed and performance, it is good to know HTML
to yield the best results.
 Learn other languages − Once you understand the basics of
HTML, then other related technologies like JavaScript,
PHP, or Angular are easier to understand.
Applications of HTML
As mentioned before, HTML is one of the most widely used
languages on the web. Here are some of the applications of HTML
−
 Website development − HTML is used to create webpages
(websites) that are rendered over the web. Almost every page
of the web has html tags in it to render its details in the
browser.
 Internet Navigation − HTML provides tags that are used to
navigate from one page to another and is heavily used in
internet navigation.
 Responsive UI − HTML pages now-a-days work well on all
platforms, mobile, tabs, desktops, or laptops owing to
responsive design strategy.
 Offline support − HTML pages, once loaded, can be made
available offline on the machine without any need of
internet.
 Game development − HTML5 has native support for rich
experiences and is now useful in the gaming development
arena as well.
 Mobile application development − HTML with CSS3 and
JavaScript can be used for developing cross-platform mobile
applications.
 Multimedia and video streaming − HTML5 offers support
for multimedia elements like video and audio, which enables
seamless media playback directly in web browsers.

HTML Overview and Introduction

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.

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 History and Evolution
HTML was initially developed by 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 created with HTML.
The following image shows the evolution of HTML over the
period of years −

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 formatting.
You can find more tags here. Visit: HTML Tag References.
HTML First Example
HTML first example shows the HTML page structure along with
the essential tags. In the following example, we are creating an
HTML document. This example contains all necessary tags and
other basic tags. Click on "Edit and Run" to display the result
how this example looks like on the webpage.
HTML Tags Vs. Elements Vs. Attributes
HTML tags are the keywords that can be used for a specific
purpose to display and format the content on the webpage.
HTML elements are the basic building blocks that are made with
the help of tags and content. An HTML element is created with a
start tag, a content, and an end tag.
And, HTML attributes provide additional information about
HTML elements; in order to define or change their behavior.
Attributes are used with an opening tag.
HTML Tags Case Sensitivity
HTML tags are not case-sensitive. They can be written in
uppercase or in lowercase. But the World Wide Web Consortium
(W3C) recommends using lowercase tags starting from HTML 4.
Importance of HTML
HTML is the fundamental building blocks of the World Wide
Web. Any page that you visit on the web contains HTML tags.
HTML is important for the various reasons −
 HTML defines webpage structure and helps to design
websites.
 With the help of CSS and JavaScript, HTML helps to create
beautiful and interactive websites.
 HTML helps in search engine optimization by optimizing the
tags based on the targeted keywords.
 HTML helps to navigate (or browse) different pages and
websites from anywhere on the internet.
 HTML supports user input and forms; you can easily get
information from anywhere in the world (you may need
background database support for it).
 HTML follows an open standard by W3C. Thus, HTML
supports all browsers on any type of device. You do not need
to change the HTML for the different browsers or devices.

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


1991
but it was not officially released.

Tim Berners-Lee created the first version of HTML that


1993
was published and available to the public.

HTML 2.0 was released with a few additional features


1995
along with the existing features.

There was an attempt to extend HTML with HTML 3.0,


1997
but it was replaced by the more practical HTML 3.2.

The W3C (World Wide Web Consortium) decided to shift


1998 focus to an XML-based HTML equivalent called
XHTML.

1999 HTML 4.01, which became an official standard in


December 1999, was the most widely used version in the
early 2000s.

XHTML 1.0, completed in 2000, was a combination of


2000
HTML4 in XML.

The introduction of XForms reignited interest in evolving


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

A W3C workshop took place to explore reopening


2004 HTML's evolution. Mozilla and 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
2006 WHATWG. The W3C aimed to publish a "finished"
HTML5 version, whereas the WHATWG focused on a
Living Standard, continuously evolving HTML.

HTML5 can be seen as an extended version of HTML


2012
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


Image Yes Yes Yes add images to 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


Anchor Yes Yes Yes define hyperlink in
webpage.

List is used in HTML


List Yes Yes Yes to display list of related
items.

Table is used to
Table No Yes Yes organize data into rows
and columns
Style is used to add
Style No Yes Yes
CSS styling to webpage

Script is used to add


Script No Yes Yes
JavaScript to HTML.

Enables introduction
Audio No No Yes
of audio to webpage

Enables introduction
Video No No Yes
of video to webpage.

Enables introduction
Canvas No No Yes of graphics elements to
webpage.

Popular HTML Editors

There are several HTML editors available to the user (paid and
unpaid, both). The following is the list of some popular editors:
1. Notepad
2. TextEdit
3. Notepad++
4. Sublime
5. Visual Studio Code
6. Atom
7. Brackets
8. Adobe Dreamweaver CC
9. CoffeeCup

Advantages of Using HTML Editors


There are several advantages to using HTML editors to write and
manage your HTML codes. Some of the main advantages are as
follows:
 Error Reduction: HTML editors are useful to identify and
correct the syntax errors during writing the HTML codes.
 Syntax Highlighting: Most of the HTML editors come with
the syntax highlighting features that enable color-coding to
distinguish HTML tags, attributes, and content that makes
the code clear and readable.
 Code Autocompletion: Most of the HTML editors
autocomplete the tags or attributes while writing the code.
For example, if you start writing a paragraph and type <p>,
editors will automatically insert a closing tag </p>. The
editors also suggest the syntax of the elements.
 Code Validation: Most of the HTML editors have code
validating features; you don't need any other tool to validate
your code. This feature helps to validate the errors.
 Collaboration Tools: Some of the HTML editors come with
version control systems that make it easier for teams to
collaborate and track changes.

HTML - Basic Tags


HTML tags are the fundamental elements of HTML used for
defining the structure of the document. These are letters or words
enclosed by angle brackets (< and >).
Usually, most of the HTML tags contain an opening and a closing
tag. Each tag has a different meaning, and the browser reads the
tags and displays the contents enclosed by them accordingly.
For example, if we wrap any text in the paragraph (<p></p>) tag,
the browser displays it as a separate paragraph. In this tutorial,
we will discuss all the basic tags in HTML.

Heading Tags
Heading tags are used to define headings of documents. You can
use different sizes for your headings. HTML also has six levels of
headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>,
and <h6>. While displaying any heading, the browser adds one
line before and one line after that heading.
Example
Following HTML code demonstrates various levels of headings:

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Paragraph Tag
The <p> tag offers a way to structure your text into different
paragraphs. Each paragraph of text should go in between an
opening <p> and a closing </p> tag.
Example
The following example demonstrates the use of paragraph (<p>)
tag, here we are defining 3 paragraphs −

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

Line Break Tag


Whenever you use the <br /> element, anything following it starts
from the next line. This tag is an example of an empty element,
where you do not need opening and closing tags, as there is
nothing to go in between them.
The <br /> tag has a space between the characters br and the
forward slash /. If you omit this space, older browsers will have
trouble rendering the line break, while if you miss the forward
slash character and just use <br>, it is not valid in XHTML.
Example
The following example demonstrates the use of break (<br />) tag
−
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br /> You delivered your assignment on time.<br />
Thanks<br /> Mahnaz</p>
</body>
</html>

Center Tag
The <center> tag aligns text, images, or other HTML elements in
the middle of a web page.
Note: The <center> tag is deprecated in HTML5. You can use
the CSS text-align property to center elements.
Example
The following example demonstrates the use of the <center> tag.
Here, we are displaying the second paragraph in center
alignment:

<!DOCTYPE html>
<html>
<head>
<title>Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

Horizonal Rule Tag


The horizontal rule (<hr>) tag displays a horizonal line. A
horizontal line visually breaks up sections of a document.
The <hr> tag creates a line from the current position in the
document to the right margin and breaks the line accordingly.
Example
The following example draws a horizontal line between two
paragraphs −

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
On executing the above example, you can see a straight line
dividing the two paragraphs.
The <hr /> tag is an example of the empty element, where you do
not need opening and closing tags, as there is nothing to go in
between them.
The <hr /> element has a space between the characters hr and the
forward slash. If you omit this space, older browsers will have
trouble rendering the horizontal line, while if you miss the
forward slash character and just use <hr>, it is not valid in
XHTML.

Non-breaking Spaces
Non-breaking spaces prevent an automatic line break and are
displayed using the &nbsp; entity.
Suppose if you want to use the phrase "12 Angry Men." Here, you
would not want a browser to split the "12, Angry" and "Men"
across two lines −
An example of this technique appears in the movie "12 Angry
Men."
In cases, where you do not want the client browser to break text,
you should use a nonbreaking space entity &nbsp; instead of a
normal space. For example, when coding the "12 Angry Men" in
a paragraph, you should use something similar to the following
code −
Example
The following example demonstrates the use of &nbsp; entity −
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12
Angry Men."</p>
<p>An example of this technique appears in the movie
"12&nbsp;&nbsp;&nbsp;Angry Men."</p>
</body>
</html>

On executing the above example, it will display the sentence: An


example of this technique appears in the movie "12 Angry
Men." twice. Since we have added 3 " " characters
between 12 and men, the second time, you can observe three
spaces.
Listing Tags
The <ul> and <ol> tags create the unordered and ordered listings,
and to display list items, the <li> tag is used.
Example
The following example demonstrates the use of listing tags −

<!DOCTYPE html>
<html>
<head>
<title>Listing Tags Example</title>
</head>
<body>
<h2>Unordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Ordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

HTML - Elements

HTML elements are the basic building blocks to create a web


page; they are created with the help of an opening tag, content,
and ending tag. HTML documents consist of a tree of these
elements, and they specify how HTML documents should be built,
and what kind of content should be placed within various parts of
an HTML document.

What is an HTML element?


An HTML element is a fundamental component of an HTML
document that can contain data to display on the webpage, such
as text, image, link, or sometimes nothing. An HTML element
includes an opening tag, content, and a closing tag, where the
opening tag may also include attributes.
An HTML document consists of a tree of HTML elements, and
they define the content and layout of a webpage, like how and
what content should display in the different sections of a webpage.
Example
Some of the examples of HTML elements are as follows:
<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>
The following table displays the different parts (opening tag,
content, and closing tag) of the HTML elements used in the above
example:

Opening Tag Content Closing Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

So here <p>...</p> is an HTML element, <h1>...</h1> is another


HTML
HTML Element Structure
The following image demonstrates the structure of an element,
like how an HTML element is written with the opening and
closing tags:

HTML Elements Vs. Tags


HTML elements are created using the HTML tags. An HTML
element is defined by a pair of starting and closing tags having
content between them, which defines the content and structure of
the webpage. Whereas, HTML tags are like keywords and part of
HTML elements enclosed in angel brackets (<>).
For example, <p> is the starting tag of a paragraph, and </p> is
the closing tag of the same paragraph, but <p>This is
paragraph</p> is a paragraph element.

Nested HTML Elements


HTML allows nesting of elements. The nested elements are
created by placing one or more HTML elements inside an HTML
element. Where the container element can be considered as a
parent element and others are as child elements. The child
elements are nested inside the parent element. We can have
multiple levels of nesting; however, it requires some guidelines to
follow −
 Every opening tag must have a corresponding closing tag.
 The closing tag of the parent element must come after the
closing tag of the child element.
 The nested elements must be valid HTML elements.
Example
In the following example, we are nesting the italicized
element (<i>...</i>) within the h1 element and
underline (<u>...</u>) element within the paragraph element.

<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
On executing the above example, we can observe the two
sentences where we have nested one HTML within another.
Note: In the above example, the <html>, <head>, and <body> tags
are also nested elements as they have one or more elements inside
them.

HTML Void Elements


HTML void elements are those elements that don't require closing
tags. These tags don't have any content model and even don't
allow nesting of elements. The void elements are also known as
empty or self-closing elements.
Some of the void elements are such as <img />, <hr />,
and <br /> elements. The below table shows a list of void elements
−

S.No Elements & Description

<img />
1
Used for inserting images within HTML documents.

<hr />
2
It displays a horizontal rule.

<br />
3
It is used to provide a line break.

<source />
4 It is used for embedding media resources like audio and
video.

Example
The following example demonstrates the example of HTML void
elements −

<!DOCTYPE html>
<html>
<body>
<p>This line contains a line break tag, <br> hence content is
visible in two separate lines.</p>
<p>This line is <hr>separated by a horizontal rule.</p>
</body>
</html>
On executing, the above code will produce two paragraphs, one
with a line break and the other with a horizontal rule.

Attributes With HTML Elements


The attributes can be placed with an opening tag by using the
pairs of attribute name and value. Multiple attributes can be
separated with a space.
The following statement demonstrates the use of two
attributes src and alt with an HTML element img:

<img src="logo.jpg" alt="TutorialsPoint Logo" />

Mandatory Closing HTML Elements


The HTML elements that are opened must be closed. Only the
void elements like <img />, <hr />, <br />, etc. do not require
closing tags; other elements such as <p> and <h1> require closing
tags after the content part.
If any HTML element does not include a closing tag, it may not
cause an error, and some content may still display properly.
However, never miss the closing tag, as it may lead to unexpected
and inconsistent results.
Example
In this example, we are removing the closing tags from the
paragraph tag. Still, it will show the correct result.

<!DOCTYPE html>
<html>
<body>
<p>This line contains a line break tag, <br /> hence content is
visible in two separate lines.
<p>This line is <hr /> separated by a horizontal rule.
</body>
</html>

The above HTML code will produce two paragraphs, one with a
line break and the other with a horizontal rule.
Are HTML Elements Case-sensitive?
No, HTML elements are not case-sensitive, which means we can
write HTML elements either in uppercase or lowercase. However,
it is not a good practice, as W3C recommends and demands
lowercase. Hence, always try to use lowercase for the tag names.
Example
In the following example, we are writing HTML elements (tag
names) in uppercase and mixed case (uppercase and lowercase);
see the output; there is no error and HTML code runs fine −

<!DOCTYPE html>
<HTml>
<BODY>
<P>HTML is not case sensitive i.e we can use both upper or,
lower case letters in the tags.</p>
</BOdy>
</html>

HTML - Attributes

We have seen a few HTML tags and their usage, like heading
tags <h1>, <h2>, paragraph tags <p>, and other tags. We used
them so far in their simplest form, but most of the HTML tags can
also have attributes, which are extra bits of information.
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).
Below is the syntax of an element HTML having attribute −

<tag_name attribute="Value">...</tag_name>

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
This example demonstrates the use of attributes with HTML
elements. Here, we are using the align attribute with different
paragraph elements −

<!DOCTYPE html>
<html>

<head>
<title>Example of HTML Attributes</title>
</head>

<body>
<p align="left">Left Aligned</p>
<p align="center">Center Aligned</p>
<p align="right">Right Aligned</p>
</body>

</html>

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 −
Example

<!DOCTYPE html>
<html>
<head>
<title>ID Attribute Example</title>
</head>
<body>
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style
Sheet</p>
</body>
</html>
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.
Example

<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

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.
Example

class="className1 className2 className3"

The style Attribute


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

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Welcome to
bansal...</p>
</body>
</html>

HTML Internationalization Attributes


There are three internationalization attributes, which are
available for most (although not all) XHTML elements.
The dir Attribute
The dir attribute allows you to indicate to the browser about the
direction in which the text should flow. The dir attribute can take
one of two values, as you can see in the table that follows −

S.No Value & Meaning

ltr
1
Left to right (the default value)

2 rtl
Right to left (for languages such as Hebrew or Arabic that
are read right to left)

<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>

The lang Attribute


The lang attribute allows you to indicate the main language used
in a document, but this attribute was kept in HTML only for
backwards compatibility with earlier versions of HTML. This
attribute has been replaced by the xml:lang attribute in new
XHTML documents.
The values of the lang attribute are ISO-639 standard two-
character language codes. Check HTML Language Codes: ISO
639 for a complete list of language codes.

<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>

HTML Boolean Attributes


Boolean attributes represent true and false values and do not
require any value with the attribute name. To set the true value,
you need to write the attribute's name, and to set it false, the
attribute should be omitted altogether.
Here are some Boolean attributes –
 disabled
 readonly
 required
 inert
 autocomplete
Example
Here is an example of an HTML Boolean attribute (required) −

<!DOCTYPE html>
<html>
<body>

<h1>Example of "required" attribute</h1>


<form>
<label for="user_name">Input User Name:</label>
<input type="text" id="user_name" name="user_name"
required>
<input type="submit">
</form>

</body>
</html>

The xml:lang Attribute


The xml:lang attribute is the XHTML replacement for the lang
attribute. The value of the xml:lang attribute should be an ISO-
639 country code, as mentioned in the previous section.
HTML Generic Attributes
Here's a table of some other attributes that are readily usable
with many of the HTML tags.

Attribute Options Function

align right, left, center Horizontally aligns tags

Vertically aligns tags within


valign top, middle, bottom
an HTML element.

bgcolor numeric, Places a background color


hexidecimal, RGB behind an element
values

backgroun Places a background image


URL
d behind an element

Names an element for use


id User Defined
with Cascading Style Sheets.

Classifies an element for use


class User Defined
with Cascading Style Sheets.

Specifies the width of tables,


width Numeric Value
images, or table cells.

Specifies the height of


height Numeric Value
tables, images, or table cells.

"Pop-up" title of the


title User Defined
elements.

You might also like