Text and Semantic Elements

2 min read

The content displayed in the <body> of a webpage relies on tags that structure and define the purpose of text.

1. Headings (`<h1>` to `<h6>`)

Headings define the titles and subheadings of your content. They create an important outline or hierarchy for your document.

Hierarchy: Ranks from the most important (<h1>) to the least important (<h6>).
Rule: Every page should have one, and only one, <h1> tag, which typically summarizes the main topic of the page.
SEO & Accessibility: Headings are vital for both search engines (to understand content relevance) and screen readers (to allow users to jump between sections).

<h1>The Main Topic of the Entire Page</h1>
<section>
    <h2>A Major Section Subtitle</h2>
    <p>Content for the major section.</p>
    
    <h3>A Sub-Topic within the Major Section</h3>
    <p>Content for the sub-topic.</p>
</section>

2. Paragraphs and Line Breaks

Paragraph (<p>): The standard tag for grouping a block of related text. Browsers automatically add a margin (space) before and after paragraph elements.
Line Break (<br>): A void element that forces a line break. Use it only when the line break is necessary for the content itself (e.g., in a poem or an address), not for visual spacing (use CSS for spacing).

<p>
    This is the first sentence of a paragraph.<br>
    This line is forced immediately below the first using &lt;br&gt;.
</p>

3. Text Formatting

HTML offers various tags to assign meaning or emphasis to specific words or phrases.

Tag	Purpose (Semantic)	Description
`<strong>`	Strong Importance	Indicates text that is of high importance or seriousness. (Typically rendered as bold).
`<em>`	Emphasis	Indicates text that should be emphasized. (Typically rendered as italic).
`<u>`	Unarticulated Annotation	Represents text that should be styled differently, like a misspelling. (Rendered as <u>underlined</u>).
`<span>`	Generic Inline Container	Used purely to apply a `class` or `id` for styling via CSS or manipulation via JavaScript; carries no inherent meaning.

<p>
    Please read this note: <strong>Do not forget the deadline!</strong> 
    This part is <em>very</em> important.
</p>

4. Semantic HTML5 Structure

Prior to HTML5, developers used generic <div> (division) elements with ids and classes to define sections: <div id="header">, <div id="footer">.

HTML5 introduced semantic elements which carry built-in meaning, making the document structure clearer for search engines, assistive technologies, and other developers.

Element	Purpose
`<header>`	Introductory content, usually containing a heading, logo, and navigation links.
`<nav>`	A section containing major navigation links (e.g., a main menu).
`<main>`	The dominant content of the document. There should be only one per page.
`<article>`	Independent, self-contained content (e.g., a blog post, a forum comment).
`<section>`	A thematic grouping of content, typically with its own heading.
`<aside>`	Content related to the surrounding content but distinct from it (e.g., a sidebar, pull quote).
`<footer>`	Typically contains copyright information, author links, or related document links.
`<div>`	Generic Block Container—only used when no other semantic element is appropriate.

Example: Semantic Structure

<body>
    <header>
        <h1>Website Title</h1>
        <nav>...</nav>
    </header>
    
    <main>
        <article>
            <h2>My First Blog Post</h2>
            <p>...</p>
        </article>
        
        <aside>
            <h4>Related Content</h4>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 My Company</p>
    </footer>
</body>

What are your Feelings