Semantic elements

📌 Semantic Elements & Page Structure in Atomix

Semantic elements are essential for accessibility, SEO, and modern web technologies. This section provides guidance on building a structured and valid website using Atomix.

Note: While Atomix encourages semantic HTML, some elements are mandatory for Atomix to work properly.

🏗️ Building a Site with Atomix

To ensure proper functionality, follow these basic structure guidelines:

✅ Add the body class to the <body> tag. ✅ Use semantic elements like <header>, <main>, and <footer>, each with a corresponding class (header, main, footer). ✅ Assign specific classes to elements:

<p> should have the paragraph class.
<a> should have the link class. ✅ Structure your content with meaningful containers (<article>, <section>, etc.). ✅ Validate your code using the W3C Validator.

📝 Basic HTML Template

Here's a minimal Atomix-ready HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Atomix Tester</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/enioaiello/atomix/dist/atomix.min.css">
</head>
<body class="body">
    <header class="header">
        <nav class="navbar">
            <!-- Navigation content here -->
        </nav>
    </header>
    <main class="main">
        <!-- Main content here -->
    </main>
    <footer class="footer">
        <!-- Footer content here -->
    </footer>
</body>
</html>

The navbar is essential for navigation. It includes a logo, menu, separators, and icons.

<header class="header">
    <nav class="navbar">
        <div class="brand">
            <a href="index.html" class="link">
                <img src="../assets/images/logo.png" alt="Atomix logo" class="logo">
                <h1 class="name">Atomix Tester</h1>
            </a>
        </div>
        <ul class="menu">
            <li class="item"><a href="#" class="link">Home</a></li>
            <li class="item"><a href="#" class="link">About</a></li>
            <li class="item"><a href="#" class="link">Contact</a></li>
        </ul>
        <div class="separator"></div>
        <div class="icons">
            <a href="#" class="icon"><i class="ri-search-fill"></i></a>
            <a href="#" class="icon"><i class="ri-shopping-cart-fill"></i></a>
            <a href="#" class="icon"><i class="ri-account-circle-fill"></i></a>
        </div>
    </nav>
</header>

📌 Explanation:

navbar contains the navigation bar.
brand stores the logo and project name.
menu holds navigation links.
separator spaces out elements automatically.
icons contains functionality icons (e.g., search, cart, account).

Tip: To make the navbar stick to the top, add fixed to <header>.

📍 Main Content Template

The <main> contains the core content of the page.

<main class="main">
    <!-- Your website content here -->
</main>

If empty, it will automatically expand to push the footer down.

You can align content using:

horizontal → Aligns content horizontally.
vertical → Aligns content vertically.
center → Centers content both ways.

⚓ Footer Template

The <footer> stores copyrights, credits, and useful links.

<footer class="footer">
    <div class="content">
        <p class="copyright">&copy; 2025, AtomixCSS.</p>
    </div>
</footer>

Tip: You can reuse header elements in the footer.

✨ Additional Usable Elements

Element/Class

Description

line

Displays a 25% wide line to separate content.

separator

Creates an invisible gap in content. Comes in small, normal, and big sizes.

center

Centers content both horizontally and vertically.

horizontal

Aligns content horizontally.

vertical

Aligns content vertically.

fixed

Makes the header stick to the top of the page.

🎯 Conclusion

Use semantic HTML for a structured website.
Atomix requires a body class, structured sections, and meaningful containers.
Use predefined classes for layout consistency.
Validate your code with W3C standards.

PreviousButtons NextDark mode

Last updated 5 months ago