Scribd
Upload
19 views10 pages

1 HTML Tags OBL

HTML, or Hypertext Markup Language, is the primary language used to create and structure web pages through various tags that define headings, paragraphs, and other elements. Learning HTML is essential for web development, as it enables users to create websites, understand web optimization, and learn related technologies. The document outlines the basic structure of HTML documents, key tags, and their applications in web development, along with practical examples.

Uploaded by

Bipra Sitikantha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views10 pages

1 HTML Tags OBL

HTML, or Hypertext Markup Language, is the primary language used to create and structure web pages through various tags that define headings, paragraphs, and other elements. Learning HTML is essential for web development, as it enables users to create websites, understand web optimization, and learn related technologies. The document outlines the basic structure of HTML documents, key tags, and their applications in web development, along with practical examples.

Uploaded by

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

HTML Overview and Tags

HTML stands for Hypertext Markup Language, and it is the most widely used language
to write Web Pages.

 Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.

 As its name suggests, HTML is a 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.
Originally, HTML was developed with the intent of defining the structure of documents
like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags
available in HTML language.

Why to Learn HTML?


Originally, HTML was developed with the intent of defining the structure of documents
like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers. Now, HTML is being widely used to format web
pages with the help of different tags available in HTML language.
HTML is a MUST for students and working professionals to become a great Software
Engineer specially when they are working in Web Development Domain. I will list down
some of the key advantages of learning HTML:
 Create 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 carrer as a professional web
designer, HTML and CSS designing is a must skill.
 Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.
 Learn other languages - Once you understands the basic of HTML then other
related technologies like javascript, php, or angular are become easier to
understand.

Applications of HTML

One Byte Labs | Page 1


As mentioned before, HTML is one of the most widely used language over the web. I'm
going to list few of them here:
 Web pages development - HTML is used to create pages which are rendered
over the web. Almost every page of web is having html tags in it to render its
details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from one
page to another and is heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platform, mobile,
tabs, desktop 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 experience and is now
useful in gaming development arena as well.

Audience
This HTML tutorial is designed for the aspiring Web Designers and Developers with a
need to understand the HTML in enough detail along with its simple overview, and
practical examples. This tutorial will give you enough ingredients to start with HTML
from where you can take yourself at higher level of expertise.

Prerequisites
Before proceeding with this tutorial you should have a basic working knowledge with
Windows or Linux operating system, additionally you must be familiar with −

 Experience with any text editor like notepad, notepad++, or Edit plus etc.
 How to create directories and files on your computer.
 How to navigate through different directories.
 How to type content in a file and save them on a computer.
 Understanding about images in different formats like JPEG, PNG format.

HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format
the content. These tags are enclosed within angle braces <Tag Name>. Except few
tags, most of the tags have their corresponding closing tags. For example, <html> has
its closing tag </html> and <body> tag has its closing tag </body> tag etc.

One Byte Labs | Page 2


Above example of HTML document uses the following tags −

Sr.No Tag & Description

1 <!DOCTYPE...>

This tag defines the document type and HTML version.

2 <html>
This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document body
which is represented by <body>...</body> tags.

3 <head>
This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.

4 <title>
The <title> tag is used inside the <head> tag to mention the document title.

5 <body>
This tag represents the document's body which keeps other HTML tags like <h1>,
<div>, <p> etc.

6 <h1>
This tag represents the heading.

7 <p>
This tag represents a paragraph.

To learn HTML, you will need to study various tags and understand how they behave,
while formatting a textual document. Learning HTML is simple as users have to learn
the usage of different tags in order to format the text or images to make a beautiful
webpage.
World Wide Web Consortium (W3C) recommends to use lowercase tags starting from
HTML 4.

HTML Document Structure

One Byte Labs | Page 3


A typical HTML document will have the following structure −
<html>

<head>
Document header related tags
</head>

<body>
Document body related tags
</body>

</html>
We will study all the header and body tags in subsequent chapters, but for now let's
see what is document declaration tag.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration tag is used by the web browser to understand the
version of the HTML used in the document. Current version of HTML is 5 and it makes
use of the following declaration −
<!DOCTYPE html>

There are many other declaration types which can be used in HTML document
depending on what version of HTML is being used. We will see more details on this
while discussing <!DOCTYPE...> tag along with other HTML tags.

Heading Tags
Any document starts with a heading. 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, browser adds one line before
and one line after that heading.

Example

<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>

One Byte Labs | Page 4


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

This will produce the following result –

This is heading 1
This is heading 2
This is heading 3

This is heading 4
This is heading 5

This is heading 6

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 as
shown below in the example −

Example

<!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>

One Byte Labs | Page 5


</html>
This will produce the following result –

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

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

<!DOCTYPE html>
<html>

<head>
<title>Line Break Example</title>
</head>

<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>

</html>
This will produce the following result –

Hello
You delivered your assignment
on time. One Byte Labs | Page 6
Thanks
One Byte Labs
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.

Example

<!DOCTYPE html>
<html>

<head>
<title>Centring 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>

This will produce following result –

This text is not in the center.

This text is in the center.

Horizontal Lines
Horizontal lines are used to visually break-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.
For example, you may want to give a line between two paragraphs as in the given
example below −

One Byte Labs | Page 7


Example

<!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>

This will produce the following result –

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <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

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the
HTML document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.

Example

<!DOCTYPE html>

One Byte Labs | Page 8


<html>

<head>
<title>Preserve Formatting Example</title>
</head>

<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>

</html>
This will produce the following result –

function testFunction( strText ){


alert (strText)
}

Try using the same code without keeping it inside <pre>...</pre> tags

Nonbreaking Spaces
Suppose 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

<!DOCTYPE html>
<html>

<head>
<title>Nonbreaking Spaces Example</title>

One Byte Labs | Page 9


</head>

<body>
<p>An example of this technique appears in the movie
"12&nbsp;Angry&nbsp;Men."</p>
</body>

</html>

This will produce the following result −

An example of this technique appears in the movie


"12 Angry Men."

One Byte Labs | Page 10

You might also like