search

tableSemantic elements

hashtag
📌 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.

hashtag
🏗️ 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 Validatorarrow-up-right.

hashtag
📝 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>

hashtag
🔝 Navbar Template

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

hashtag
📌 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>.

hashtag
📍 Main Content Template

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

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.

hashtag
⚓ Footer Template

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

Tip: You can reuse header elements in the footer.

hashtag
✨ 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.

hashtag
🎯 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.

PreviousButtonsNextDark mode

Last updated