# 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](https://validator.w3.org/).

***

### 📝 Basic HTML Template

Here's a **minimal Atomix-ready HTML template**:

```html
<!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>
```

***

### 🔝 Navbar Template

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

```html
<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.

```html
<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**.

```html
<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**.
