Scribd
Upload
13 views2 pages

Text Formating and Heading in html5

This document covers text formatting and headings in HTML5, detailing the use of headings from <h1> to <h6> for structuring content. It explains the use of paragraphs, line breaks, and various text formatting tags, as well as lists in HTML, including unordered, ordered, and definition lists. A practice exercise is included to create a simple webpage demonstrating these concepts.

Uploaded by

boubaabdou064
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
13 views2 pages

Text Formating and Heading in html5

This document covers text formatting and headings in HTML5, detailing the use of headings from <h1> to <h6> for structuring content. It explains the use of paragraphs, line breaks, and various text formatting tags, as well as lists in HTML, including unordered, ordered, and definition lists. A practice exercise is included to create a simple webpage demonstrating these concepts.

Uploaded by

boubaabdou064
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

Lesson 2: Text Formatting and Headings in HTML5

1. Headings in HTML

Headings help structure a webpage and range from <h1> (largest) to <h6> (smallest).

Example:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>
<h4>Subsection</h4>
<h5>Smaller Subsection</h5>
<h6>Smallest Heading</h6>

Usage Rules:

✔ Use only one <h1> per page (for SEO and accessibility).
✔ Headings should follow a logical hierarchy.
✔ Do not use headings just for styling; use them for content organization.

2. Paragraphs and Line Breaks

The <p> tag is used for paragraphs, while <br> is for line breaks.

Example:

<p>This is a paragraph of text.</p>


<p>This is another paragraph.</p>
<p>This is a line <br> with a break.</p>

🔹 <br> vs. <p>: Use <br> inside paragraphs for single line breaks, but separate
topics with <p>.

3. Text Formatting Tags

HTML provides several tags to style text:


Tag Description Example
<b> Bold(without emphasis) <b>Bold text</b>
<strong> Bold(with importance) <strong>Important
text</strong>
<i> Italic(without emphasis) <i>Italic text</i>
<em> Italic(with emphasis) <em>Emphasized
text</em>
<u> Underline <u>Underlined text</u>
<mark> Highlight text <mark>Highlighted
text</mark>
<small> Smaller text <small>Small
text</small>
<del> Strikethrough text <del>Deleted
text</del>
<ins> Inserted/Underlined text <ins>Inserted
text</ins>
<sub> Subscript text H<sub>2</sub>O
<sup> Superscript text x<sup>2</sup>

4. Lists in HTML
Unordered List (<ul>)

Displays bullet points.

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>

Ordered List (<ol>)

Displays numbered items.

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Definition List (<dl>)

Used for definitions.

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Practice Exercise

Task: Create a webpage with:

✅ A title
✅ A main heading (<h1>)
✅ A paragraph (<p>)
✅ A bold and italic word
✅ An ordered list

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Formatting</title>
</head>
<body>
<h1>Welcome to HTML Formatting</h1>
<p>This is a <strong>bold</strong> and <em>italic</em> text example.</p>
<h2>My Favorite Fruits</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ol>
</body>
</html>

You might also like