1 HTML Tags OBL
1 HTML Tags OBL
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.
Applications of HTML
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.
1 <!DOCTYPE...>
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.
<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.
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>
</html>
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>
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>
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 −
<!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>
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>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
This will produce the following result –
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 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>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>