HTML text formatting and Headings Tags

HTML Text Formatting and Headings: Organizing Your Content

Proper text formatting makes your content readable and well-structured. HTML provides several elements for this purpose.

1. Heading Elements (h1 to h6)

Headings create a hierarchy for your content:

<h1>Main Title (Most Important)</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>

2. Paragraphs and Basic Text Elements

<p>This is a paragraph.</p>
<br>  <!-- Line break -->
<hr>  <!-- Horizontal rule -->

3. Text Formatting Tags

<b> - Bold text
<strong> - Important text (semantic bold)
<i> - Italic text
<em> - Emphasized text (semantic italic)
<mark> - Marked/highlighted text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

4. Blockquote and Preformatted Text

<blockquote cite="source-url">
  This is a long quotation from another source.
</blockquote>

<pre>
  This text will
  preserve both spaces
  and line breaks.
</pre>

Practical Example

<article>
  <h1>The Importance of Semantic HTML</h1>
  <p>Posted by <strong>Web Dev Expert</strong> on <time datetime="2023-05-15">May 15, 2023</time></p>
  
  <p>Semantic HTML helps <mark>search engines</mark> understand your content better.</p>
  
  <blockquote cite="https://developer.mozilla.org">
    "Semantics is the study of the meanings of words and phrases in a language."
  </blockquote>
</article>

Using proper text formatting makes your content more accessible and improves SEO!