0% found this document useful (0 votes)
2 views19 pages

HTML UNIT 2

The document provides a comprehensive overview of HTML document structure, including essential tags and their functions, such as <html>, <head>, and <body>. It explains the importance of headings, paragraphs, images, links, and lists in organizing web content, along with the history and advantages of HTML. Additionally, it covers various text formatting elements and best practices for using HTML effectively.
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
0% found this document useful (0 votes)
2 views19 pages

HTML UNIT 2

The document provides a comprehensive overview of HTML document structure, including essential tags and their functions, such as <html>, <head>, and <body>. It explains the importance of headings, paragraphs, images, links, and lists in organizing web content, along with the history and advantages of HTML. Additionally, it covers various text formatting elements and best practices for using HTML effectively.
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/ 19

UNIT – 2

TAGS FOR DOCUMENT STRUCTURE IN HTML

What is an HTML Document?


HTML documents are text files that contains structured code which tells
browsers how to display a webpage. These documents are made up of
HTML tags which define elements like headers, paragraphs, images,
links, and more.

Structure of an HTML Document


An HTML document consists of specific tags that form the skeleton of the
page. Here’s a look at a basic HTML document structure

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content=

"width=device-width, initial-scale=1.0" />

<title>Structure of HTML Document</title>

</head>

<body>

<!-- Main content of website --> → comment line

<h1>GeeksforGeeks</h1>

<p>A computer science portal for geeks</p>

</body>
</html>

Let’s see each part of this structure to understand its function and
importance.
1. <!DOCTYPE HTML>: The <!DOCTYPE html> declaration is
placed at the beginning of the document. It tells the browser
that the document follows HTML5 standards, ensuring
consistent rendering across browsers.
2. <html> Tag: The <html> tag wraps the entire document,
serving as the root element of an HTML page. It typically
includes the lang attribute to specify the language of the
content.
3. <head> Section: The <head> section contains metadata,
scripts, styles, and other information not displayed directly on
the page but essential for functionality and SEO.
4. <body> Section: The <body> section contains all the visible
content of the web page, including text, images, videos, links,
and more. This is where you’ll add the main elements to display
on the page.
Tags and Elements for Structuring an HTML
Document
HTML tags are structural components enclosed in angle brackets. They
are typically opened and closed with a forward slash (e.g., <h1></h1>).
Some tags are self-closing, while others support attributes like width,
height, and controls for defining properties or storing metadata.
There are generally two types of tags in HTML
1. Paired Tags: These tags come in pairs i.e. they have both
opening(< >) and closing(</ >) tags.
Example: <p> </p> - paragraph tag
<body></body> - body tag
2. Empty Tags: These tags are self-closing and do not require a
closing tag.
Example: <br> - break tag
<img> - image tag

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end


tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Understanding these key tags will allow you to organize content


effectively and create more readable and accessible webpages.
• Headings (<h1> to <h6>): Headings are important for
structuring the content within the <body> section. They define
the hierarchy of information, where <h1> is the highest-level
heading.
• Paragraphs (<p>): The <p> tag is used for creating
paragraphs, which help to group text into readable sections.
This tag automatically adds some spacing between
paragraphs to improve readability.
• Images (<img>): The <img> tag is used to add images to a
webpage. It requires the src attribute to specify the image path
and the alt attribute for accessibility.
• Links (<a>): Links are created with the <a> tag. The href
attribute defines the destination URL, and the text within the
<a> tag serves as the clickable link text.
• Lists (<ul>, <ol>, <li>): Lists allow you to organize items in
bullet points (<ul>) or numbered order (<ol>). Each item within
a list is wrapped in <li> tags.
• Divisions (<div>): The <div> tag is a container used to group
other elements together, often for layout. It does not add any
style or structure on its own but is useful for applying CSS
styles to sections of content.

HISTORY OF HTML:
What is 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
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

Currently, we are using HTML5, which is the latest and most advanced
version of HTML.

HTML was initially created by Tim Berners-Lee in 1991 as a way to


share and structure documents on the web.
The first-ever version was HTML 1.0, a basic and limited version.
However, the first standardized version, HTML 2.0, was published in
1995, laying the foundation for web development as we know it today.

Advantages of HTML
• HTML is used to build websites.
• It is supported by all browsers.
• It can be integrated with other languages like CSS, JavaScript,
etc.
Disadvantages of HTML
• HTML can only create static web pages. For dynamic web
pages and logic, we need JavaScript.
• A large amount of code has to be written to create a simple
web page.

BLOCK LEVEL TEXT ELEMENTS:

HEADINGS <h1> to <h6>


HTML Headings are used to define the content hierarchy and structure
of a webpage. They range from <h1> to <h6>, with <h1> being the most
important heading and <h6> the least important. Proper use of headings
helps improve readability, SEO, and accessibility. The ‘h’ inside the tag
should always be in lowercase.
Syntax of HTML Headings:
Here’s the basic syntax for creating headings in HTML:
<!DOCTYPE html>

<html>

<body>

<h1>This is the Main Heading</h1>

<h2>This is a Subheading</h2>

<h3>This is a Smaller Subheading</h3>

<h4>This is a Sub-Subheading</h4>

<h5>This is a Minor Subheading</h5>

<h6>This is the Smallest Heading</h6>

</body>

</html>

Levels of HTML Heading Tags


HTML offers six levels of heading tags, each serving a different purpose
in structuring your content:
<h1> – Main Heading (Largest)
• Represents the primary focus of the page, usually used for the
main title.
• Use only one <h1> tag per page for the best SEO practices.
• Makes it clear to both users and search engines what the main
topic is.
<h2> – Subheadings
• Ideal for dividing the content into major sections.
• If the content has further subsections, use <h3> to create a
logical flow.
<h3> to <h6> – Smaller Headings
• These heading levels are used for finer subdivisions, gradually
decreasing in size and importance.
• <h3> is used for subsections under <h2>, while <h4> to <h6> are
used for additional, less important subdivisions.
• <h6> defines the least important heading.

Best Practices for Using HTML Headings


• Use Only One <h1> per Page: The <h1> tag should be
reserved for the main title of the page. Too many <h1> tags
can confuse both users and search engines about the
content’s priority.
• Maintain a Logical Structure: Follow a logical hierarchy of
headings (<h1> → <h2> → <h3>) to ensure content is
organized. Don’t jump directly from <h1> to <h4>, as it can
make the content harder to navigate.
• Keep Headings Descriptive: Headings should clearly
describe the content that follows. This makes it easier for
readers to understand what each section is about.
• Avoid Overusing Heading Tags: Headings are for organizing
content, not for styling text. Use them where appropriate and
avoid using heading tags for emphasis or styling alone.

HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p>
tag. The <p> tag helps divide content into manageable, readable
sections. It’s the go-to element for wrapping text in a web page that is
meant to be displayed as a distinct paragraph.
Syntax:
<p> Content</p>

How HTML Paragraphs are Rendered?


In HTML, when you wrap text inside the <p> tag, it automatically:
• Adds space before and after the paragraph to visually separate
it from other content.
• Breaks the text into a single block, creating an easy-to-read
section.
HTML Paragraph Code Example
Example 1: Here’s an example showing two paragraphs in HTML:
<!DOCTYPE html>

<html lang="en">

<head>

<title>The p tag</title>

</head>

<body>

<p>A Computer Science portal for geeks.</p>

<p>It contains well written, well thought articles.</p>

</body>

</html>

Output:

Properties of the paragraph Tag:


• The browser reduces multiple spaces added by users to a
single space.
• If a user adds various lines, the browser compresses them into
one line.
• By default, the display of the paragraph element is set to
“block,” meaning each new paragraph is placed on a new line.
This behavior can be modified using CSS.
The <br> tag
The HTML <br> tag element creates a line break, giving you a new line
without starting a new paragraph. Use <br> when you want to move to
the next line without beginning a whole new paragraph.

FONT STYLE ELEMENTS


BOLD

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>

OUTPUT:

This text is normal.

This text is bold.

The HTML <strong> element defines text with strong importance. The
content inside is typically displayed in bold.
Example
<strong>This text is important!</strong>

OUTPUT:

This text is normal.

This text is important!

HTML <i> Elements

The HTML <i> element defines a part of text in an alternate voice or


mood. The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.

Example

<i>This text is italic</i>

OUTPUT:

This text is normal.

This text is italic.

HTML FONT TAG

The <font> tag was used in HTML 4 to specify the font face, font size,
and color of text.

The HTML <font> Tag plays an important role in the web page to
create an attractive and readable web page. The font tag is used to
change the color, size, and style of a text and it was used in HTML4.
The base font tag is used to set all the text to the same size, color, and
face.

EXAMPLE:

<!DOCTYPE html>

<html>

<body>

<p>This is sample paragraph</p>

<font face="Arial" size="4" color="green">

This paragrap style by font tag

</font>

</body>

</html>

Syntax
<font size="number" face="font_family"
color="color_name|hex_number|rgb_number">

What to Use Instead?


Example

Set the color of text (with CSS):

<p style="color:red">This is a paragraph.</p>


<p style="color:blue">This is another paragraph.</p>

OUTPUT:
This is a paragraph.

This is another paragraph.

HTML <small> Tag


The <small> tag in HTML is used to define smaller text, reducing font
size. It decreases the font size by one size (from medium to small, from
x-large to large). It has a display property of inline.
The <small> tag also supports the Global Attributes and Event
Attributes in HTML. This tag is not deprecated, but it is possible to
achieve better results or nearly the same effect with CSS.
Syntax:
<small> Contents... </small>
Example:

<html>

<head>

<title>HTML small Tag</title>

</head>

<body>

<h1>

GeeksforGeeks

</h1>

<h2>

&lt;small&gt; Tag
</h2>

<!-- html small tag is used here -->

<small>

Welcome to GeeksforGeeks!

</small>

</body>

</html>

Output:

STRONG TAG
The <strong> tag is used to define text with strong importance. The
content inside is typically displayed in bold. The HTML <strong> Tag is
the parsed tag and is used to show the importance of the text. The
content inside it is generally in bold format. The primary purpose
of <strong> tag is to provide semantic meaning to the content,
indicating its importance to both browsers and developers.

Syntax
<strong> Contents... </strong>
EXAMPLE:

<!DOCTYPE html>

<html>

<body>

<h1>

GeeksforGeeks

</h1>

<h2>

&lt;strong&gt; Tag

</h2>

<!-- HTML Strong Tag used here -->

<strong>

Welcome to geeksforGeeks!

</strong>

</body>

</html>

OUTPUT:
HTML <strike> Tag
The <strike> tag defines a strike or line through Text. This tag creates
a cut line in the text. This tag is depreciated from HTML 5. Now,
the <del> tag is used instead of this tag.

Syntax:
<strike> Contents </strike>

Example:

<!DOCTYPE html>

<html>

<body>

<!-- Strike Tag -->

<h2>

Welcome To GeeksforGeeks

</h2>

<strike>

Hi Geeks!

</strike>

</body>

</html>

OUTPUT:
HTML del Tag(alternative)
The HTML <del> tag is used to indicate text that has been deleted from
a document.
• It visually represents this deletion by striking through the text,
which helps in tracking changes or revisions in documents.
• It provides semantic meaning for content that has been
intentionally removed, such as in editing or version control
scenarios.

EXAMPLE:
<!DOCTYPE html>

<html>

<body>

<p>

Sanskrit is a

<del>mathematic</del>

language

</p>

</body>

</html>
OUTPUT:

Sanskrit is a mathematic language

HTML big Tag


The <big> tag in HTML was used to increase the font size of text by
one level compared to the surrounding text.
• However, it has been deprecated in HTML5. Instead, it’s
advisable to use CSS for styling text sizes.
• Instead, it’s advisable to use CSS for styling text sizes.
Syntax
<big> Text line </big>

Example:

<!DOCTYPE html>

<html>

<body>

<p>This is paragraph text</p>

<big>This is big Tag text</big>

</body>

</html>

Output:

This is paragraph text

This is big Tag text

Alternative of <big> Tag


<!DOCTYPE html>
<html>

<body>

<p>This is normal paragraph text</p>

<div style="font-size:40px; ">

style font using css properties

</div>

</body>

</html>

OUTPUT:

This is normal paragraph text

You might also like