HTML Headings

Last modified on: October 19, 2024

<h3>HTML Headings</h3>
<p>HTML <strong>headings</strong> are used to define titles and subtitles on a webpage. They help structure the content, making it easier for users to read and for search engines to understand the hierarchy of the document. Headings also play a key role in accessibility and SEO.</p>
<p>HTML provides six levels of headings, from <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>, with <code>&lt;h1&gt;</code> being the most important (or highest level) and <code>&lt;h6&gt;</code> being the least important (or lowest level).</p>
<h3>1. <strong><code>&lt;h1&gt;</code>: Main Heading</strong></h3>
<ul>
<li>
<p>Used for the main title or primary heading of a page.</p>
</li>
<li>
<p>Each page should ideally have only <strong>one <code>&lt;h1&gt;</code></strong> to signify the main topic.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;h1&gt;This is the main heading&lt;/h1&gt;</code></pre>
</div>
</div>
</li>
</ul>
<h3>2. <strong><code>&lt;h2&gt;</code>: Secondary Heading</strong></h3>
<ul>
<li>
<p>Used for major sections within the content that fall under the <code>&lt;h1&gt;</code> heading.</p>
</li>
<li>
<p>There can be multiple <code>&lt;h2&gt;</code> elements on a page.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;h2&gt;This is a secondary heading&lt;/h2&gt;
</code></pre>
</div>
</div>
</li>
</ul>
<h3>3. <strong><code>&lt;h3&gt;</code>: Tertiary Heading</strong></h3>
<ul>
<li>
<p>Used for subsections under an <code>&lt;h2&gt;</code> heading.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;h3&gt;This is a tertiary heading&lt;/h3&gt;
</code></pre>
</div>
</div>
</li>
</ul>
<h3>4. <strong><code>&lt;h4&gt;</code>: Quaternary Heading</strong></h3>
<ul>
<li>
<p>Used for subsections under an <code>&lt;h3&gt;</code> heading.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;h4&gt;This is a quaternary heading&lt;/h4&gt;
</code></pre>
</div>
</div>
</li>
</ul>
<h3>5. <strong><code>&lt;h5&gt;</code>: Quinary Heading</strong></h3>
<ul>
<li>
<p>Used for subsections under an <code>&lt;h4&gt;</code> heading.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;h5&gt;This is a quinary heading&lt;/h5&gt;
</code></pre>
</div>
</div>
</li>
</ul>
<h3>6. <strong><code>&lt;h6&gt;</code>: Senary Heading</strong></h3>
<ul>
<li>
<p>Used for subsections under an <code>&lt;h5&gt;</code> heading.</p>
</li>
<li>
<p>Generally used sparingly as it represents the least significant headings.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;h6&gt;This is a senary heading&lt;/h6&gt;
</code></pre>
</div>
</div>
</li>
</ul>
<hr />
<h3>Example of Headings Hierarchy</h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;h1&gt;My Blog&lt;/h1&gt;

&lt;h2&gt;Introduction to Web Development&lt;/h2&gt;
&lt;p&gt;This section introduces the basics of web development.&lt;/p&gt;

&lt;h3&gt;HTML Basics&lt;/h3&gt;
&lt;p&gt;HTML is the foundation of web pages...&lt;/p&gt;

&lt;h3&gt;CSS Basics&lt;/h3&gt;
&lt;p&gt;CSS is used to style web pages...&lt;/p&gt;

&lt;h2&gt;Advanced Topics&lt;/h2&gt;
&lt;p&gt;This section covers more advanced web development topics.&lt;/p&gt;

&lt;h3&gt;JavaScript&lt;/h3&gt;
&lt;p&gt;JavaScript adds interactivity to web pages...&lt;/p&gt;

&lt;h4&gt;DOM Manipulation&lt;/h4&gt;
&lt;p&gt;The DOM allows JavaScript to interact with the HTML...&lt;/p&gt;
</code></pre>
</div>
</div>
<p>In this example:</p>
<ul>
<li><code>&lt;h1&gt;</code> is the main heading of the blog.</li>
<li><code>&lt;h2&gt;</code> introduces main sections (e.g., "Introduction to Web Development").</li>
<li><code>&lt;h3&gt;</code> and <code>&lt;h4&gt;</code> introduce subsections under those main sections.</li>
</ul>
<h3>Best Practices</h3>
<ol>
<li><strong>Use Headings in a Logical Order</strong>: Avoid skipping heading levels (e.g., going from <code>&lt;h1&gt;</code> to <code>&lt;h4&gt;</code> without using <code>&lt;h2&gt;</code> or <code>&lt;h3&gt;</code>).</li>
<li><strong>SEO</strong>: Proper use of headings improves search engine rankings, as search engines use headings to understand the content structure.</li>
<li><strong>Accessibility</strong>: Screen readers use headings to help visually impaired users navigate a webpage efficiently.</li>
</ol>
<hr />
<h3>Styling Headings</h3>
<p>By default, headings are bold and differ in size depending on their level. You can customize the appearance of headings using CSS.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;style&gt;
  h1 {
    color: blue;
    font-size: 36px;
  }

h2 {
    color: green;
    font-size: 30px;
  }
&lt;/style&gt;
</code></pre>
</div>
</div>
<p>This CSS example changes the color and size of <code>&lt;h1&gt;</code> and <code>&lt;h2&gt;</code> elements.</p>
<h3>Conclusion</h3>
<p>Headings are vital for structuring content, providing clarity to users, and boosting SEO. Using them properly enhances both the user experience and the accessibility of your webpage.</p>

Web Technology View More