Headings: <h1> to <h6>,Breaks

[chrismory]

4.1 Headings: <h1> to <h6>
Headings are the backbone of document structure, providing hierarchy and organization to your content.

The Heading Hierarchy

<h1>Main Title of the Page</h1>

<h2>Major Section Heading</h2>

<h3>Subsection Heading</h3>

<h4>Detailed Topic Heading</h4>

<h5>Minor Point Heading</h5>

<h6>Smallest Significant Heading</h6>

Semantic Importance and SEO

Correct Structure:

<!-- Proper hierarchical structure -->

<h1>How to Bake a Chocolate Cake</h1>

<h2>Ingredients Needed</h2>

<h3>For the Cake</h3>

<h3>For the Frosting</h3>

<h2>Preparation Steps</h2>

<h3>Mixing the Batter</h3>

<h4>Dry Ingredients</h4>

<h4>Wet Ingredients</h4>

<h3>Baking Process</h3>

Incorrect Structure:

<!-- AVOID: Skipping heading levels -->

<h1>Main Title</h1>

<h3>Suddenly jumping to h3</h3>

<h5>Then jumping to h5</h5>

<!-- AVOID: Using headings for styling only -->

<h1>Welcome to our site!</h1>

<h4>Special offer this week!</h4> <!-- Should be lower importance -->

Accessibility Considerations

<!-- Good: Clear, descriptive headings -->

<h1>Annual Financial Report 2024</h1>

<h2>Quarterly Performance Analysis</h2>

<h3>Q1 Revenue Breakdown</h3>

<!-- Poor: Vague headings -->

<h1>Report</h1>

<h2>Stuff</h2>

<h3>Things</h3>

Best Practices

• Use only one <h1> per page
• Maintain logical hierarchy (don't skip levels)
• Make headings descriptive and concise
• Use headings to create a document outline

---

​

4.2 Paragraphs: <p>

The paragraph element is the primary container for blocks of text content.

Basic Usage

<p>This is a simple paragraph of text. It contains sentences that form a coherent block of content.</p>

<p>This is another paragraph. It's separated from the first paragraph by default spacing.</p>

Paragraphs with Mixed Content

<p>

This paragraph contains <strong>important text</strong>,

<em>emphasized content</em>, and even

<a href="#">links to other resources</a>.

You can include <code>code snippets</code> and

<abbr title="HyperText Markup Language">HTML</abbr> abbreviations too.

</p>

Accessibility and Readability

<!-- Good: Reasonable paragraph length -->

<p>Web accessibility ensures that people with disabilities can perceive, understand, navigate, and interact with the web. This includes auditory, cognitive, neurological, physical, speech, and visual disabilities.</p>

<!-- Better: Breaking up long content -->

<p>Web accessibility ensures that people with disabilities can use the web effectively.</p>

<p>This includes supporting various disability types: auditory, cognitive, neurological, physical, speech, and visual impairments.</p>

---

​

4.3 The Art of Line Breaks: <br>

The line break element creates a single line break within text content.

Appropriate Use Cases

<!-- Address formatting -->

<p>

123 Main Street<br>

Suite 400<br>



New York, NY 10001<br>


United States

</p>

<!-- Poetry or verse -->

<p>

Two roads diverged in a yellow wood,<br>

And sorry I could not travel both<br>

And be one traveler, long I stood<br>

And looked down one as far as I could

</p>

<!-- Song lyrics -->

<p>

Hello, is it me you're looking for?<br>

I can see it in your eyes<br>

I can see it in your smile
</p>

When NOT to Use <br>

<!-- POOR: Using <br> for visual spacing -->

<p>First paragraph<br><br>Second paragraph</p>

<!-- INSTEAD, use CSS: -->

<p>First paragraph</p>

<p style="margin-top: 20px;">Second paragraph</p>

<!-- POOR: Creating lists with <br> -->

<p>

Item 1<br>

Item 2<br>

Item 3

</p>

<!-- INSTEAD, use proper list: -->

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

---

​

4.4 Thematic Breaks: <hr>

The horizontal rule element represents a thematic break or scene change in content.

Semantic Usage

<!-- Scene change in a story -->

<section>

<h2>Chapter 1: The Beginning</h2>

<p>The story starts on a dark and stormy night...</p>

</section>

<hr>

<section>

<h2>Chapter 2: The Journey</h2>

<p>Morning arrived with bright sunshine...</p>

</section>

Content Separation

<!-- Separating main content from footer -->

<article>

<h1>Article Title</h1>

<p>Main article content goes here...</p>

</article>

<hr>

<footer>

<p>Published on January 20, 2024</p>

<p>Author: John Smith</p>

</footer>

Topic Transition

<!-- Changing topics within an article -->

<section>

<h2>Technical Specifications</h2>

<p>Detailed technical information...</p>

</section>

<hr>

<section>

<h2>User Reviews</h2>

<p>What customers are saying...</p>

</section>

---

​

4.5 Text-Level Semantics

Text-level semantic elements add meaning to specific portions of text.

Bold: <strong> vs. <b>

<strong> - Strong Importance

<p>

<strong>Warning:</strong> This action cannot be undone.

Please confirm you want to proceed.

</p>

<p>


Before operating the machinery,

<strong>always wear safety goggles</strong>

and protective gloves.

</p>

<b> - Stylistically Bold (No Semantic Meaning)

<p>

The product name is <b>SuperPro 5000</b>

and it comes in three colors.

</p>

<p>

The <b>key terms</b> in this document are

highlighted for quick reference.

</p>

Italic: <em> vs. <i>

<em> - Emphasized Text

<p>

I <em>really</em> need you to finish this by Friday.

</p>

<p>

That is <em>not</em> the correct way to handle the situation.

</p>

<i> - Alternative Voice or Mood

<p>

The term <i>de facto</i> means "in fact" in Latin.

</p>

<p>

The ship was named <i>Queen Anne's Revenge</i>.

</p>

<p>

<i>What was she thinking?</i> he wondered.

</p>

Underline: <u>

Appropriate Uses:

<p>
This text contains a <u>speling</u> error.
</p>

<p>

The Chinese word for computer is

<u lang="zh">电脑</u> (diànnǎo).

</p>

<p>

You can <u>underline important text</u>
for visual emphasis when needed.

</p>

Strike-through: <s> and <del>

<s> - No Longer Accurate/Relevant

<p>

Sale price: <s>$99.99</s> $79.99

</p>


<p>

Meeting time: <s>2:00 PM</s> (rescheduled)

</p>

<del> - Deleted Content (with <ins> for additions)

<article>

<h1>Document Revision History</h1>

<p>

The company will <del>close at 5 PM</del>

<ins>remain open until 7 PM</ins> during holidays.

</p>

<p>

Employees must submit reports

<del>monthly</del><ins>weekly</ins>.

</p>

</article>

Inserted Text: <ins>

<p>

The event will take place on

<ins datetime="2024-01-15T14:30:00Z">February 1st</ins>.

</p>

<p>

Please bring your <ins>government-issued ID</ins>

for verification.

</p>

Marking Text: <mark>

<!-- Search results highlighting -->

<p>

In our discussion about web development,

we covered <mark>HTML semantics</mark> and

their importance for accessibility.

</p>

<!-- Important passages -->

<p>

To save your work, press

<mark>Ctrl + S</mark> regularly.


</p>

<!-- Study notes -->

<p>

The capital of France is <mark>Paris</mark>,

and the official language is <mark>French</mark>.

</p>

Small Print: <small>

<article>

<h1>Software License Agreement</h1>

<p>Main terms and conditions...</p>

<small>

© 2024 Company Name. All rights reserved.

This software is licensed under the MIT License.

</small>

</article>

<form>

<label for="email">Email address:</label>

<input type="email" id="email">

<small>We'll never share your email with anyone else.</small>

</form>

Superscript and Subscript: <sup>, <sub>

<sup> - Superscript

<p>

The area of a circle is πr<sup>2</sup>.

</p>

<p>

Water chemical formula: H<sub>2</sub>O

</p>

<p>

The 1<sup>st</sup> and 2<sup>nd</sup>

places receive prizes.

</p>

<sub> - Subscript

<p>

Carbon dioxide: CO<sub>2</sub>

</p>

<p>

Mathematical variable: x<sub>1</sub> + x<sub>2</sub>

</p>

<p>

The molecular formula for glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.

</p>

Code: <code>, <kbd>, <samp>, <var>

<code> - Inline Code

<p>

Use the <code>console.log()</code> function

for debugging in JavaScript.

</p>

<p>

In HTML, the <code>&lt;div&gt;</code> element

is a generic container.

</p>

<kbd> - Keyboard Input

<p>

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.


</p>

<p>

To save the file, type <kbd>:w</kbd> in Vim.

</p>

<samp> - Program Output

<p>

After running the command, you should see:

<samp>Installation completed successfully.</samp>

</p>


<p>

The program output was:

<samp>Error: File not found</samp>

</p>

<var> - Variables

<p>

The equation <var>E</var> = <var>m</var><var>c</var><sup>2</sup>

represents mass-energy equivalence.

</p>

<p>

In the function <code>f(<var>x</var>)</code>,

<var>x</var> represents the input value.

</p>

Preformatted Text: <pre>

<!-- Code blocks -->

<pre>

function helloWorld() {

console.log("Hello, World!");

return true;


}

</pre>
<!-- ASCII art -->

<pre>



_______



/ \



| O O |



| ∆ |



\ _____ /

</pre>
<!-- Preserving whitespace -->
<pre>
Name: John Smith
Email: john@example.com
Phone: 555-0123

</pre>

Combined with <code>:

<pre><code>

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;My Page&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;Hello World&lt;/h1&gt;

&lt;/body&gt;

&lt;/html&gt;

</code></pre>

Abbreviations: <abbr>

<p>
<abbr title="HyperText Markup Language">HTML</abbr>

is the standard markup language for web pages.

</p>

<p>

The <abbr title="World Health Organization">WHO</abbr>

was founded in 1948.

</p>

<p>

<abbr title="Professor">Prof.</abbr> Smith

will be teaching the advanced course.
</p>

Definitions: <dfn>

<p>

A <dfn>semantic element</dfn> is an HTML element

that clearly describes its meaning to both the

browser and the developer.

</p>
<p>

The term <dfn id="html-def">HTML</dfn> stands for

HyperText Markup Language. You can reference

<a href="#html-def">HTML</a> elsewhere in the document.

</p>

Quotations: <q> and <blockquote>

<q> - Inline Quotations

<p>

The manager said,

<q cite="https://example.com/speech">We need to focus on quality over quantity.</q>

</p>

<p>

As Shakespeare wrote,

<q>To be, or not to be: that is the question.</q>

</p>

<blockquote> - Block Quotations

<blockquote cite="https://www.goodreads.com/quotes/7-it-is-our-choices-harry-that-show-what-we">

<p>

It is our choices, Harry, that show what we truly are,

far more than our abilities.

</p>

<footer>— J.K. Rowling, <cite>Harry Potter and the Chamber of Secrets</cite></footer>

</blockquote>

Citations: <cite>

<p>



Learn more in



<cite>HTML & CSS: Design and Build Websites</cite>



by Jon Duckett.



</p>







<blockquote>

<p>The only way to do great work is to love what you do.</p>

<footer>— <cite>Steve Jobs</cite></footer>

</blockquote>

<p>

The painting <cite>Starry Night</cite>

was created by Vincent van Gogh in 1889.

</p>

Bi-Directional Text: <bdi> and <bdo>

<bdi> - Bi-directional Isolation

<!-- User-generated content with mixed directions -->

<p>

User <bdi>إيان</bdi> posted:

"Hello everyone!"

</p>

<p>

Top contributors:

<span>John (120 points)</span>,

<bdi>محمد (95 points)</bdi>,

<span>Maria (88 points)</span>

</p>

<bdo> - Bi-directional Override

<!-- Left-to-right override -->

<p>

The Arabic word for book is

<bdo dir="rtl">كتاب</bdo>.

</p>

<!-- Right-to-left text -->

<p>

This is normal text.

<bdo dir="rtl">This text is right-to-left.</bdo>

Back to normal.

</p>

Ruby Annotations: <ruby>, <rt>, <rp>

Japanese Furigana:



With Fallback for Non-supporting Browsers:

<ruby>

漢字 <rp>(</rp><rt>kanji</rt><rp>)</rp>

</ruby>

<!-- In supporting browsers: 漢字 with annotation above -->

<!-- In non-supporting browsers: 漢字 (kanji) -->

Complex Ruby Annotations:

<!-- Multiple annotations for one base -->

<ruby>

嬉 <rt>うれ</rt>


し <rt>しい</rt>

</ruby>

<!-- Grouped ruby -->

<ruby>

東京<rt>とうきょう</rt>

大学<rt>だいがく</rt>

</ruby>

---

​

Complete Example: Putting It All Together

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Text Semantics Demonstration</title>

<style>

body { font-family: Arial, sans-serif; line-height: 1.6; margin: 2rem; }

pre { background: #f4f4f4; padding: 1rem; border-radius: 4px; }

blockquote { border-left: 4px solid #ccc; margin: 1rem 0; padding-left: 1rem; }

mark { background: yellow; padding: 2px; }

</style>

</head>

<body>

<article>

<h1>Advanced HTML Text Formatting</h1>

<p>

This article demonstrates various <strong>text-level semantic elements</strong>

in <abbr title="HyperText Markup Language">HTML</abbr>. Understanding these

elements is <em>crucial</em> for creating <mark>accessible and meaningful</mark>

web content.

</p>

<hr>

<h2>Code Examples</h2>

<p>

In JavaScript, use <code>console.log()</code> for debugging.

Press <kbd>F12</kbd> to open developer tools.

</p>

<pre><code>

function calculateArea(radius) {

return Math.PI * radius<sup>2</sup>;

}

</code></pre>

<h2>Scientific Content</h2>

<p>

The chemical formula for water is H<sub>2</sub>O.

Einstein's famous equation is <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.

</p>

<blockquote cite="https://example.com/quote">

<p>

The <dfn>semantic web</dfn> is an extension of the World Wide Web

through standards set by the

<abbr title="World Wide Web Consortium">W3C</abbr>.

</p>

<footer>— <cite>Tim Berners-Lee</cite></footer>

</blockquote>

<h2>Multilingual Content</h2>

<p>

User <bdi>محمد</bdi> commented:

<q>This is excellent information!</q>

</p>

<p>

Japanese word: <ruby>漢字<rt>かんじ</rt></ruby> (kanji)

</p>

<small>
Last updated: <time datetime="2024-01-20">January 20, 2024</time>

</small>

</article>

</body>

</html>

---

​

Chapter 4 Summary

In this chapter, you've learned:

• Headings (<h1>-<h6>) - Document structure and hierarchy
• Paragraphs (<p>) - Main content containers
• Line breaks (<br>) - Controlled line endings
• Thematic breaks (<hr>) - Content separation
• Text-level semantics - Adding meaning to specific text portions

Key Semantic Pairs:

• <strong> vs <b> - Importance vs styling
• <em> vs <i> - Emphasis vs alternate voice
• <del> vs <s> - Removed content vs irrelevant content

Technical Text Elements:

• <code>, <kbd>, <samp>, <var> - Programming content
• <sup>, <sub> - Mathematical and scientific notation
• <pre> - Preformatted text preservation

Reference and Citation:

• <abbr>, <dfn> - Definitions and abbreviations
• <q>, <blockquote>, <cite> - Quotations and citations

Internationalization:

• <bdi>, <bdo> - Bi-directional text handling
• <ruby>, <rt>, <rp> - East Asian typography

Practice Exercise: Create a technical article that uses at least 15 different text-level semantic elements appropriately, demonstrating understanding of when and why to use each one.

In the next chapter, we'll explore organizing content with HTML5 semantic elements and creating meaningful document structures.

---

​

Key Terms to Remember:

• Semantic HTML, Accessibility
• Text-level semantics, Inline elements
• Hierarchy, Document structure
• Internationalization, Bi-directional text
• Code formatting, Technical content