Scribd
Upload
2 views21 pages

HTML Unit Ii

Unit II

Uploaded by

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

HTML Unit Ii

Unit II

Uploaded by

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

INTRODUCTION TO HTML

UNIT - II
Tags for Document structure (HTML, Head, Body Tag). Block level text elements:
Headings paragraph(<P> tag)–Font style elements:(bold, italic, font, small, strong,
strike, bigtags)

HTML DOCUMENT STRUCTURE TAGS


An HTML document follows a well-defined hierarchical structure. This structure helps the
browser correctly interpret the document and display its content. The core document structure
tags are:
1. <html>
2. <head>
3. <body>

These tags form the foundation of every web page.


1. <html> Tag
Meaning
The <html> tag is the root (top-level) element of an HTML document. It tells
the browser that the document is written in HTML.
Role and Function
 Encloses the entire HTML document
 Acts as a container for <head> and <body>
 Helps browsers apply HTML parsing rules correctly
Syntax
<html>
<head>...</head>
<body>...</body>
</html>
Key Characteristics
 Mandatory in every HTML document
 Only one <html> tag is allowed
 All other elements are its children
 Supports attributes like lang to specify language
Example:
<html lang="en">
Importance
 Ensures correct document interpretation
 Helps accessibility tools and search engines
 Defines the document as an HTML page
2. <head> Tag
Meaning
The <head> tag contains metadata, which is information about the document
rather than the document’s visible content.
Role and Function
 Provides instructions and information to the browser
 Helps search engines understand the page
 Controls page behavior, styling, and scripts
Syntax
<head>
<title>Page Title</title>
</head>
Elements Commonly Found Inside <head>
Tag Purpose
<title> Displays page title on browser tab
<meta> Metadata like charset, keywords
<link> External CSS files
<style> Internal CSS
<script> JavaScript files
Example:
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="[Link]">
</head>
Important Points
 Content inside <head> is not visible to users
 Appears before the <body> tag
 Only one <head> tag is allowed
Importance
 Improves SEO
 Enables proper page styling
 Defines character encoding and responsiveness

3. <body> Tag
Meaning
The <body> tag contains all the visible content of a web page that users see in
the browser.
Role and Function
 Displays text, images, videos, links, and forms
 Holds the main content of the webpage
Syntax
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
Elements Inside <body>
 Headings (<h1> to <h6>)
 Paragraphs (<p>)
 Images (<img>)
 Links (<a>)
 Lists, tables, forms, multimedia
Important Points
 Only one <body> tag per document
 Everything visible must be inside <body>
 Supports event handling and scripting
4. Relationship Between HTML, Head, and Body Tags
<html>
├── <head> → Metadata & page information
└── <body> → Visible page content
 <html> → Root container
 <head> → Brain (information)
 <body> → Face (displayed content)
5. Complete HTML Document Example (With Explanation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Structure</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This page explains document structure.</p>
</body>
</html>
Explanation
 <!DOCTYPE html> → Declares HTML5
 <html> → Root element
 <head> → Metadata and title
 <body> → Visible content
6. Importance of Document Structure Tags
 Provide logical structure to web pages
 Help browsers render content accurately
 Improve accessibility for screen readers
 Support search engine optimization (SEO)
 Make maintenance and development easier

BLOCK-LEVEL TEXT ELEMENTS IN HTML


Meaning of Block-Level Elements
Block-level text elements are HTML elements that:
 Start on a new line
 Occupy the full width available by default
 Create a visible block of content on the web page
They are mainly used to structure and organize text content in a logical and readable
manner.

Key Characteristics of Block-Level Text Elements


 Always begin on a new line
 Automatically add space (margin) before and after
 Can contain inline elements (like <span>, <a>, <strong>)
 Used for page layout and text structure

Common Block-Level Text Elements


1. <h1> to <h6> – Headings
Purpose
Used to define headings and subheadings.
Description
 <h1> → Largest and most important heading
 <h6> → Smallest heading
Example
<h1>Main Title</h1>
<h2>Sub Title</h2>
Importance
 Improves readability
 Helps search engines understand content structure
2. <p> – Paragraph
Purpose
Defines a paragraph of text.
Example
<p>This is a paragraph of text.</p>
Features
 Adds space above and below
 Automatically wraps text
3. <div> – Division
Purpose
Used as a container to group block-level content.
Example
<div>
<p>Text inside div</p>
</div>
Uses
 Layout design
 Styling with CSS
 Grouping related elements
4. <blockquote> – Block Quotation
Purpose
Displays long quotations.
Example
<blockquote>
Education is the most powerful weapon.
</blockquote>
Feature
 Indents the quoted text
5. <pre> – Preformatted Text
Purpose
Displays text exactly as written (preserves spaces and line breaks).
Example
<pre>
Line one
Line two
</pre>
6. <hr> – Horizontal Rule
Purpose
Creates a horizontal line to separate content.
Example
<hr>
7. <address> – Address Information
Purpose
Used to display contact information.
Example
<address>
Email: example@[Link]
</address>
8. <section> – Section
Purpose
Groups related content into sections.
Example
<section>
<h2>Introduction</h2>
<p>Content here</p>
</section>
Difference Between Block-Level and Inline Elements
Block-Level Inline
Starts on new line Stays in same line
Takes full width Takes only required width
Used for structure Used for formatting

Importance of Block-Level Text Elements


 Provide proper document structure
 Improve readability
 Enhance accessibility
 Support SEO
 Make web pages well-organized

HEADINGS IN HTML
What are Headings?
Headings in HTML are used to define titles and sub-titles of content on a web page.
They help organize information in a hierarchical structure, making the page easier to read for
users and easier to understand for search engines.
HTML provides six levels of headings, from <h1> (most important) to <h6> (least
important).
HTML Heading Tags
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
Description of Each Heading Level
<h1> – Main Heading
 Represents the main title of the page
 Largest in size
 Usually used once per page
<h2> – Sub Heading
 Used for major sections under <h1>
<h3> – Sub-section Heading
 Used for subsections under <h2>
<h4> to <h6> – Lower Level Headings
 Used for smaller divisions
 Text size decreases from <h4> to <h6>
Key Features of Headings
 Headings are block-level elements
 They always start on a new line
 Browsers add default margin before and after headings
 Heading tags are not just for size, but for structure
Importance of Headings
1. Content Organization
Headings divide content into logical sections.
2. Readability
They make long pages easier to scan.
3. SEO (Search Engine Optimization)
Search engines use headings to understand page content.
4. Accessibility
Screen readers use headings to help users navigate content.
Best Practices for Using Headings
 Use only one <h1> per page
 Follow proper order (<h1> → <h2> → <h3>)
 Do not skip heading levels
 Use headings for meaning, not styling
Example Webpage Using Headings
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings 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>

OUTPUT
HTML PARAGRAPH TAG (<P>)
What is the <p> Tag?
The <p> (paragraph) tag is a block-level text element in HTML used to define a
paragraph of text. It helps organize content into readable blocks and automatically adds space
before and after the text.
Syntax
<p>Paragraph content goes here</p>
 <p> → Opening tag
 </p> → Closing tag
Key Features of the <p> Tag
 It is a block-level element
 Always starts on a new line
 Occupies the full width available
 Adds default margin above and below
 Can contain inline elements like <strong>, <em>, <a>, <span>
Example HTML Code (Paragraph Tag)
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>

<p>This is the first paragraph. HTML paragraphs are used to display blocks of text.</p>

<p>This is the second paragraph. Each paragraph starts on a new line and has space
around it.</p>

</body>
</html>
Output (Displayed in Browser)
Explanation of Output
 Each <p> appears on a new line
 Browsers automatically insert spacing between paragraphs
 Text wraps automatically according to screen size
 No need to press Enter inside HTML for new paragraphs
Using Inline Tags Inside <p>
<p>This is <strong>important</strong> and <em>emphasized</em> text.</p>
Output:
This is important and emphasized text.
Important Rules of <p> Tag
 Paragraph tags must be closed
 Paragraphs cannot contain block-level elements (like <div>, <h1>)
 Use CSS for styling instead of extra <br> tags
Difference Between <p> and <br>
<p> <br>
Creates a paragraph Creates a line break
Adds space before & after No extra spacing
Block-level Inline
Importance of Paragraph Tag
 Improves readability
 Structures textual content
 Helps accessibility tools
 Makes content SEO-friendly
 Keeps HTML clean and organized

FONT STYLE ELEMENTS IN HTML


What are Font Style Elements?
Font style elements in HTML are used to change the appearance and emphasis of
text. They control how text looks—such as bold, italic, underline, highlighted, or marked as
important—without changing the document structure.
These elements are mostly inline elements, meaning they do not start on a new line.
Common Font Style Elements
1. <b> – Bold Text
Purpose
Displays text in bold (visual styling only).
Syntax
<b>This text is bold</b>
Output
This text is bold
Note
 Only changes appearance
 Does not add importance
2. <strong> – Important Text
Purpose
Displays important text, usually bold.
Syntax
<strong>This text is important</strong>
Output
This text is important
Note
 Indicates semantic importance
 Preferred over <b> for meaningful emphasis
3. <i> – Italic Text
Purpose
Displays text in italic style.
Syntax
<i>This text is italic</i>
Output
This text is italic
4. <em> – Emphasized Text
Purpose
Emphasizes text (semantic meaning).
Syntax
<em>This text is emphasized</em>
Output
This text is emphasized
Note
 Preferred over <i> for emphasis
5. <u> – Underlined Text
Purpose
Underlines text.
Syntax
<u>This text is underlined</u>
Output
<u>This text is underlined</u>

6. <mark> – Highlighted Text


Purpose
Highlights text with a background color.
Syntax
<mark>This text is highlighted</mark>
Output
🟨 This text is highlighted
7. <small> – Smaller Text
Purpose
Displays text in a smaller font size.
Syntax
<small>This text is small</small>
Output
This text is small
8. <sup> – Superscript Text
Purpose
Displays text slightly above the normal line.
Syntax
H<sup>2</sup>O
Output
H²O
9. <sub> – Subscript Text
Purpose
Displays text slightly below the normal line.
Syntax
CO<sub>2</sub>
Output
CO₂
10. <del> – Deleted Text
Purpose
Shows deleted or removed text (strike-through).
Syntax
<del>Old Price</del>
Output
Old Price
11. <ins> – Inserted Text
Purpose
Shows newly inserted text (usually underlined).
Syntax
<ins>New Price</ins>
Output
<u>New Price</u>
Example Program Using Font Style Elements
<p>
<b>Bold</b>,
<strong>Important</strong>,
<i>Italic</i>,
<em>Emphasized</em>,
<u>Underlined</u>,
<mark>Highlighted</mark>,
H<sub>2</sub>O,
10<sup>2</sup></p>
Output
Difference Between Appearance vs Meaning
Appearance Only Meaning (Semantic)
<b> <strong>
<i> <em>
Important Points
 Font style elements are inline elements
 They do not start on a new line
 Semantic tags (<strong>, <em>) are preferred
 Improves readability and accessibility

BOLD TEXT IN HTML


What is Bold Text?
Bold text is used to highlight or draw attention to important words or phrases in a web
page. In HTML, bold text can be created in two different ways, depending on whether the
purpose is visual styling or semantic importance.
HTML Tags Used for Bold Text
HTML provides two tags to display bold text:
1. <b> — Bold (presentation only)
2. <strong> — Strong importance (semantic)

1. <b> Tag
Definition
The <b> tag is used to make text bold visually without giving it any special
meaning.
Purpose
 Changes appearance only
 Used when text needs to stand out but is not important
Syntax
<b>Bold text</b>
Output
Bold text
Characteristics
 Inline element
 No semantic meaning
 Does not help screen readers or SEO
 Used mainly for design or styling
Example Use Case
 Highlighting keywords
 Styling product names
 Decorative text

2. <strong> Tag
Definition
The <strong> tag indicates that the enclosed text is important or serious.
Purpose
 Adds semantic meaning
 Indicates importance or urgency
Syntax
<strong>Important text</strong>
Output
Important text
Characteristics
 Inline element
 Text appears bold by default
 Screen readers emphasize it
 Improves accessibility and SEO
Example Use Case
 Warnings
 Important instructions
 Key information

Key Differences Between <b> and <strong>


Feature <b> <strong>
Appearance Bold Bold
Meaning No meaning Indicates importance
Semantic ❌ ✅
Accessibility ❌ ✅
SEO friendly ❌ ✅
HTML5 recommendation Less preferred Preferred

Example Program
<p>
<b>This is bold text</b> and
<strong>This is important text</strong>
</p>
Output
This is bold text and This is important text
Why <strong> is Preferred in Modern HTML
 Helps screen readers stress important words
 Helps search engines understand content
 Improves accessibility
 Makes HTML more meaningful
Best Practices
✔ Use <strong> for important content
✔ Use <b> only for visual styling
✔ Do not use bold instead of headings
✔ Do not overuse bold text
Common Mistakes
❌ Using <b> for important warnings
❌ Making whole paragraphs bold
❌ Using bold instead of <h1>–<h6>

ITALIC TEXT IN HTML


What is Italic Text?
Italic text is used to slant words to the right.
It is mainly used to:
 Emphasize words
 Show foreign words
 Highlight terms
 Distinguish special text
In HTML, italic text can be created using two tags:
1. <i>
2. <em>

HTML Tags Used for Italic Text


1. <i> Tag (Italic – Visual Only)
Definition
The <i> tag is used to display text in italic style only for appearance.
Purpose
 Visual styling
 No emphasis or importance
Syntax
<i>This text is italic</i>
Output
This text is italic
Characteristics
 Inline element
 No semantic meaning
 Screen readers treat it as normal text
 Used for names, technical terms, foreign words
Example
<p>The word <i>HTML</i> stands for HyperText Markup Language.</p>

2. <em> Tag (Italic – With Emphasis)


Definition
The <em> tag is used to emphasize text.
Purpose
 Adds meaning and importance
 Emphasizes content
Syntax
<em>This text is emphasized</em>
Output
This text is emphasized
Characteristics
 Inline element
 Semantic tag
 Screen readers stress the text
 SEO friendly
 Preferred in HTML5
Example
<p>Please <em>do not</em> touch the equipment.</p>

Difference Between <i> and <em>

Feature <i> <em>


Appearance Italic Italic
Meaning No meaning Emphasis
Semantic ❌ ✅
Accessibility ❌ ✅
SEO ❌ ✅
Recommended Less Yes
Example Program
<p>
<i>Italic text</i> and
<em>emphasized text</em>
</p>
Output
Italic text and emphasized text

Why <em> is Preferred?


 Adds emphasis
 Helps screen readers
 Improves SEO
 Gives meaning to content
Best Practices
✔ Use <em> for emphasis
✔ Use <i> for styling or special words
✔ Do not overuse italic text
✔ Use CSS for font styling when possible
Common Mistakes
❌ Using <i> instead of <em> for emphasis
❌ Italicizing entire paragraphs
❌ Using italics instead of headings

FONT IN HTML
What is Font?
A font defines how text looks on a web page.
It controls:
 Font type (style of letters)
 Font size
 Font color
 Font appearance (bold, italic, etc.)
Font in HTML – Two Ways
1. Old Method (HTML <font> tag)
2. Modern Method (CSS)
1. <font> Tag (Deprecated)
Definition
The <font> tag was used in older HTML versions to change text appearance.
⚠️Not supported in HTML5
⚠️Not recommended today
Attributes of <font> Tag
Attribute Purpose
size Changes text size
color Changes text color
face Changes font style
Syntax
<font size="4" color="blue" face="Arial">Text</font>
Example
<p>
<font size="5" color="red" face="Verdana">
This is font styled text
</font>
</p>
Output (Conceptual)
This is font styled text
(Displayed in red color, larger size, Verdana font)
Disadvantages of <font> Tag
 Not supported in HTML5
 Poor accessibility
 Bad for SEO
 Mixing content and design

2. Font Styling Using CSS (Recommended)


Why CSS is Used?
CSS separates content and design, making websites:
 Cleaner
 Faster
 More accessible
 Easier to maintain
Common CSS Font Properties
Property Description
font-family Font type
font-size Text size
Color Text color
font-weight Boldness
font-style Italic style

Example Using CSS


<!DOCTYPE html>
<html>
<head>
<style>
p{
font-family: Arial;
font-size: 18px;
color: blue;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>

<p>This is styled text using CSS</p>

</body>
</html>
Output

This is styled text using CSS


(Text appears: Blue, Bold, Italic, Arial font)

Font Style Elements (Inline Text Formatting)


Tag Purpose
<b> Bold
<strong> Important text
<i> Italic
<em> Emphasized
<u> Underline
<mark> Highlight
Tag Purpose
<sub> Subscript
<sup> Superscript

Difference: <font> vs CSS


<font> CSS
Old method Modern method
Deprecated Recommended
Not flexible Highly flexible
Poor accessibility Better accessibility

Important Points
 <font> tag is deprecated
 CSS should be used for font styling
 Font affects readability and appearance
 Inline font tags are for small text formatting

SMALL TEXT IN HTML


What is <small> Tag?
The <small> tag is used to display smaller-sized text compared to normal text.
It is commonly used for side comments, footnotes, copyright text, disclaimers, etc.
Definition
<small> defines less important text and displays it in a smaller font size.
Syntax
<small>Small text</small>
Example HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Small Tag Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><small>This is small text.</small></p>
</body>
</html>
Output (Browser Display)
This is normal text.
This is small text. (appears smaller)
Features of <small> Tag
 Inline element
 Displays text smaller than surrounding text
 Adds semantic meaning (less importance)
 Supported in HTML5
 Can be used inside paragraphs, headings, lists
Common Uses of <small> Tag
 Copyright information
 Terms and conditions
 Legal notes
 Footnotes
 Side comments
Example with Practical Use
<p>
Website developed by ABC
<small>© 2026 All rights reserved</small>
</p>
Difference Between <small> and CSS
<small> CSS
Semantic meaning Styling only
Less important text No meaning
Inline element Depends on CSS
Important Points
 <small> is a semantic tag
 Used for secondary or less important text
 Inline element
 Supported in HTML5

STRONG TAG IN HTML


What is <strong>?
The <strong> tag is used to define important text in HTML.
Browsers display the text in bold, but its main purpose is to convey importance, not just
appearance.
Definition
<strong> represents content of strong importance or seriousness.
Syntax
<strong>Important text</strong>
Example HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Strong Tag Example</title>
</head>
<body>
<p>
<strong>Warning:</strong> Do not switch off the computer while updating.
</p>
</body>
</html>
Output (Browser Display)
Warning: Do not switch off the computer while updating.
Features of <strong> Tag
 Inline element
 Displays text in bold
 Adds semantic meaning
 Supported in HTML5
 Screen readers give extra emphasis
 SEO-friendly
Difference Between <strong> and <b>
<strong> <b>
Indicates importance Only visual bold
Semantic tag Non-semantic
Better accessibility No accessibility meaning
Preferred in HTML5 Less preferred

When to Use <strong>


✔ Important instructions
✔ Warnings and alerts
✔ Key points
✔ Emphasized information

Common Mistakes
❌ Using <strong> only for styling
❌ Overusing it in paragraphs
❌ Using it instead of headings

STRIKE / STRIKETHROUGH TEXT IN HTML


What is Strikethrough Text?
Strikethrough text is used to show that some text is no longer valid, deleted, or
corrected.
The text appears with a line through the middle.
HTML Tags for Strikethrough
There are two tags related to strike text:
1. <strike> — ❌ Deprecated
2. <del> — ✅ Recommended

1. <strike> Tag (Deprecated)


Definition
The <strike> tag was used in older HTML versions to show struck text.
⚠️Not supported in HTML5
⚠️Not recommended
Syntax
<strike>Old text</strike>
Example
<p><strike>Rs. 500</strike> Rs. 300</p>
2. <del> Tag (Recommended)
Definition
The <del> tag represents deleted or removed text.
Syntax
<del>Deleted text</del>
Example HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Strike Example</title>
</head>
<body>
<p>
<del>Old Price: Rs. 500</del><br>
New Price: Rs. 300
</p>
</body>
</html>
Output (Browser Display)
Old Price: Rs. 500
New Price: Rs. 300
Features of <del> Tag
 Inline element
 Displays strikethrough text
 Semantic meaning (deleted content)
 Supported in HTML5
 Useful for corrections and updates
Difference Between <strike> and <del>
<strike> <del>
Deprecated Supported in HTML5
No semantic meaning Semantic meaning
Not recommended Recommended
Styling only Represents deleted text
Alternative Using CSS
<p style="text-decoration: line-through;">
This text is struck
</p>

Important Exam Points


 <strike> tag is deprecated
 <del> is preferred
 Strikethrough shows removed or outdated text
BIG Tag (<big>) IN HTML
What is the <big> Tag?
The <big> tag is used to display text one size larger than the surrounding normal text.
It was mainly used in older versions of HTML to increase text size.
⚠️The <big> tag is deprecated in HTML5 and is not recommended today.
Definition
<big> increases the font size of text relative to the surrounding text.
Syntax
<big>Big text</big>
Example HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Big Tag Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><big>This is big text.</big></p>
</body>
</html>
Output (Browser Display)
This is normal text.
This is big text. (appears larger than normal text)
Features of <big> Tag
 Inline element
 Increases font size slightly
 No semantic meaning
 Deprecated in HTML5
 Not SEO-friendly
Why <big> is Deprecated?
 Poor accessibility
 No semantic meaning
 Mixing content with presentation
 CSS provides better control
Recommended Alternative (CSS)
<p style="font-size: 20px;">
This is big text using CSS
</p>
OR
<style>
big
{
font-size: 1.3em;
}
</style>
<p class="big">This is big text using CSS</p>
Difference Between <big> and CSS
<big> CSS
Deprecated Recommended
Limited control Full control
No meaning Flexible styling
Not HTML5 Modern standard

Important Points
 <big> tag enlarges text
 Deprecated in HTML5
 Inline element
 CSS should be used instead

You might also like