Skip to content

Instantly share code, notes, and snippets.

@andishe-wpd

andishe-wpd/semantic.html

Created December 30, 2023 15:41
Show Gist options
  • Save andishe-wpd/73467e18ddb7d727d42f4ddf2a36fb04 to your computer and use it in GitHub Desktop.
Save andishe-wpd/73467e18ddb7d727d42f4ddf2a36fb04 to your computer and use it in GitHub Desktop.
Download ZIP
Using all semantic HTML elements in a single piece of code
Raw
semantic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Example</title>
<style>
/* Add some basic styling for better presentation */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header, nav, main, article, section, aside, footer {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is a sample article content.</p>
<section>
<h3>Subsection Title</h3>
<p>Content of the subsection.</p>
</section>
</article>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
@andishe-wpd
Copy link
Author

header represents the introductory content, which can include headings and navigation.
nav represents a navigation menu.
main contains the main content of the document.
article represents a self-contained piece of content that could be distributed and reused independently.
section represents a generic section of a document.
aside represents content that is tangentially related to the content around it.
footer represents a footer for a section or a page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment