From b90b2fa42001e773fcd9e3d93825f54389b0e04d Mon Sep 17 00:00:00 2001
From: intergrav <intergrav@proton.me>
Date: Tue, 9 Jul 2024 22:04:15 -0400
Subject: [PATCH] feat: elements section in readme

---
 README.md | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a6ad521..b0c7e02 100644
--- a/README.md
+++ b/README.md
@@ -33,9 +33,52 @@ I also recommend adding a font through [intergrav/fonts](https://github.com/inte
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
 ```
 
+## Elements
+
+dev.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results.
+
+### Header
+
+Use the `<header>` tag to create a large header for your page. Only use this at the very top of your `<body>`, or else it may look wonky.
+
+For the title, the header should contain an `<h1>` tag. You can also add an `<h4>` tag before the `<h1>` tag if you want to show extra information.
+
+If you need a navigation bar, you can add a `<nav>` with `<a>` links inside it. dev.css will automatically add dividing bullet points between or before the `<a>` tags, depending on whether the user is in topbar or sidebar mode. In sidebar mode, the navigation bar will lay out into separate lines.
+
+Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a description of the page the user is currently on.
+
+### Text
+
+Wrap all body text in `<p>` tags, unless it's the sole child of another element. If you want to write quotes, you can use the `<blockquote>` tag. To highlight text, wrap it in the `<mark>` tag. Want to show code? Use `<code>` for short inline code. Use `<pre>` for code blocks. Use `<kbd>` for keyboard input.
+
+### Button
+
+For a link button, you can wrap the button in an `<a>` tag. Here's a code example:
+
+```html
+<a href="https://example.com">
+  <button>Click me!</button>
+</a>
+```
+
+### Details
+
+The `<details>` element can make a toggle-able dropdown without using any JavaScript. Here's a code example:
+
+```html
+<details>
+  <summary>Click me!</summary>
+  <p>Lorem ipsum dolor sit amet.</p>
+</details>
+```
+
+### More
+
+To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
+
 ## Themes
 
-You can also use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet:
+You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet:
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2/theme/terminal.min.css">
 ```
-- 
2.51.2