HTML - semantics, styling, and table

HTML Semantics: An Introductory Guide to Styling Tables

Code Subtle's photo
Code Subtle
·

5 min read

HTML - semantics, styling, and table

Table of contents

1. Understanding and Using Div Tags

The <div> element is a container that helps organize and group content. It's one of the most commonly used HTML elements for layout and styling purposes. While semantically neutral, divs are essential for creating logical content divisions and applying CSS styles.

Basic Syntax and Usage:

<div class="container">
    <div class="header">
        <h1>Welcome</h1>
    </div>
    <div class="content">
        <p>Main content here</p>
    </div>
</div>

Practical Examples:

  1. Creating a Card Layout:
<div class="card">
    <div class="card-header">
        <h2>Article Title</h2>
    </div>
    <div class="card-body">
        <p>Article content goes here...</p>
    </div>
    <div class="card-footer">
        <p>Posted on: July 1, 2023</p>
    </div>
</div>
  1. Building a Layout Structure:
<div class="page-wrapper">
    <div class="sidebar">
        <!-- Navigation items -->
    </div>
    <div class="main-content">
        <!-- Main content -->
    </div>
</div>

Tips for Using Divs:

  • Use meaningful class names

  • Avoid excessive nesting

  • Consider semantic alternatives when appropriate

  • Use divs primarily for styling and layout purposes

2. Understanding Semantic Tags

Semantic tags provide meaning to web content structure, making it more accessible and SEO-friendly. Each semantic element describes its purpose and the type of content it contains.

Common Semantic Elements:

<header>
    <!-- Site/section header content -->
</header>

<main>
    <article>
        <!-- Self-contained content -->
        <section>
            <!-- Thematic grouping -->
        </section>
    </article>

    <aside>
        <!-- Sidebar content -->
    </aside>
</main>

<footer>
    <!-- Site/section footer content -->
</footer>

Detailed Examples:

  1. Blog Post Structure:
<article>
    <header>
        <h1>Blog Post Title</h1>
        <time datetime="2023-07-01">July 1, 2023</time>
    </header>

    <section>
        <h2>Introduction</h2>
        <p>Blog content...</p>
    </section>

    <figure>
        <img src="image.jpg" alt="Descriptive text">
        <figcaption>Image caption here</figcaption>
    </figure>

    <footer>
        <p>Author: John Doe</p>
    </footer>
</article>
  1. Page Layout with Semantic Tags:
<header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <section id="featured">
        <h2>Featured Content</h2>
        <!-- Featured content -->
    </section>

    <aside>
        <details>
            <summary>Additional Information</summary>
            <p>Extended details here...</p>
        </details>
    </aside>
</main>

<footer>
    <p>&copy; 2023 Your Website</p>
</footer>

Tips for Semantic HTML:

  • Choose the most appropriate semantic element for the content

  • Use <main> only once per page

  • Nest elements logically and meaningfully

  • Combine semantic elements with ARIA roles when needed

3. Differentiating Between Block and Inline Elements

HTML elements are categorized as either block-level or inline elements, which affects how they're displayed and how they interact with other elements.

Block Elements:

  • Start on a new line

  • Take up full width available

  • Can contain other block and inline elements

  • Examples: <div>, <p>, <h1>, <section>

Inline Elements:

  • Flow within text content

  • Only take up necessary width

  • Cannot contain block elements

  • Examples: <span>, <a>, <strong>, <em>

Examples:

  1. Block Elements Behavior:
<div style="border: 1px solid black">
    This div takes up full width
</div>
<p style="border: 1px solid red">
    This paragraph starts on a new line
</p>
  1. Inline Elements Behavior:
<p>
    This is a paragraph with <span style="color: blue">inline</span> elements
    and <a href="#">links</a> that flow with the text.
</p>

Tips for Using Block/Inline Elements:

  • Use block elements for structural components

  • Use inline elements for text-level semantics

  • Be aware that some elements can be changed from block to inline (and vice versa) using CSS

  • Remember that inline elements cannot contain block elements

4. Text Formatting Tags in HTML

Text formatting tags help emphasize and style text content. While many of these effects can be achieved with CSS, these tags provide semantic meaning to the text.

Common Text Formatting Tags:

<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<small>Smaller text</small>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>
<del>Deleted text</del>
<mark>Highlighted text</mark>

Practical Examples:

  1. Academic Writing:
<p>
    The chemical formula for water is H<sub>2</sub>O, and the formula for 
    squared numbers is x<sup>2</sup>.
</p>
  1. Document Revisions:
<p>
    The meeting is scheduled for <del>Tuesday</del> <ins>Wednesday</ins> at 
    <strong>2 PM</strong>.
</p>
  1. Text Emphasis:
<p>
    The <mark>deadline</mark> for submission is <b>July 1st</b>. Please note 
    that this is <i>very important</i>.
</p>

Tips for Text Formatting:

  • Use semantic elements when they add meaning

  • Consider using CSS for purely visual formatting

  • Combine formatting tags appropriately

  • Don't overuse text formatting

5. Working with HTML Symbols and Special Characters

HTML provides various ways to display special characters and symbols that might otherwise be difficult to include directly in the markup.

Common HTML Entities:

&copy; <!-- Copyright symbol: © -->
&reg; <!-- Registered trademark: ® -->
&trade; <!-- Trademark: ™ -->
&lt; <!-- Less than: < -->
&gt; <!-- Greater than: > -->
&amp; <!-- Ampersand: & -->
&nbsp; <!-- Non-breaking space -->

Examples:

  1. Copyright Notice:
<footer>
    <p>&copy; 2023 My Company&reg;. All rights reserved.</p>
</footer>
  1. Mathematical Expressions:
<p>
    5 &lt; 10 &amp; 10 &gt; 5
    Temperature range: -5&deg;C to 30&deg;C
</p>

Tips for Special Characters:

  • Always use HTML entities for special characters

  • Remember common entities for frequent use

  • Use Unicode values for less common symbols

  • Test special characters across different browsers

6. Working with HTML Tables

Tables are used to present data in rows and columns. They should be used for tabular data, not for layout purposes.

Basic Table Structure:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

Examples:

  1. Simple Product Table:
<table border="1">
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
    </tr>
    <tr>
        <td>Widget</td>
        <td>$10.00</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Gadget</td>
        <td>$15.00</td>
        <td>75</td>
    </tr>
</table>
  1. Complex Table with Spanning:
<table border="1">
    <thead>
        <tr>
            <th colspan="2">Quarter 1</th>
            <th colspan="2">Quarter 2</th>
        </tr>
        <tr>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>100</td>
            <td>150</td>
            <td>200</td>
            <td>250</td>
        </tr>
    </tbody>
</table>

Tables have additional attributes and tags that help structure and style tabular data more effectively.

Additional Table Elements:

<caption> <!-- Table caption -->
<colgroup> <!-- Group of columns -->
<col> <!-- Column properties -->
<tfoot> <!-- Table footer -->

Advanced Table Attributes:

  • colspan: Span columns

  • rowspan: Span rows

  • scope: Associate headers with data cells

  • headers: Associate data cells with headers

Example of Advanced Table:

<table border="1">
    <caption>Annual Sales Report</caption>
    <colgroup>
        <col style="background-color: #f0f0f0">
        <col span="2">
    </colgroup>
    <thead>
        <tr>
            <th rowspan="2">Product</th>
            <th colspan="2">Sales</th>
        </tr>
        <tr>
            <th>Q1</th>
            <th>Q2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Widget</td>
            <td>100</td>
            <td>150</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td colspan="2">250</td>
        </tr>
    </tfoot>
</table>

Tips for Tables:

  • Use tables only for tabular data

  • Include proper table headers

  • Use caption for table description

  • Consider accessibility with scope and headers attributes

  • Use colspan and rowspan judiciously

  • Include thead, tbody, and tfoot when appropriate

HTML5CSScss position HTMLHTML tags HTML CanvasHTML CSS JAVASCRIPTCSS3CSS AnimationCSS Frameworkscss flexboxJavaScriptWeb Developmentwebdevcode subtle