<head>,
<script>,
<style>, <body>, and <div>.
<body> contains all of the page's content, primarily
within child <div>s. These are styled as display:block meaning they
are displayed in a vertical sequence down the page in the order declared
in the page's markup.
1.0 Introduction
<div> like elements that are
display:block but have tag names that identify common usage for
blocks of content, like <header>.
2.0 Table: Semantic Markup Elements:
| Tag | Description | Example |
|---|---|---|
<header> |
Represents introductory content or a group of navigational links.
Typically placed at the top of the page or section. |
|
<nav> |
Defines a section of navigation links.
Often used inside <header> or <aside>.
|
|
<main> |
Contains the main content unique to the document.
Should not be repeated across pages (unlike header or footer). |
|
<section> |
Groups related content under a thematic heading.
Often used inside <main>.
|
|
<article> |
Represents a self-contained composition (e.g., blog post).
Intended for syndication or reuse. |
|
<aside> |
Holds tangential content like sidebars or callouts.
Can appear inside or outside <main>.
|
|
<footer> |
Contains footer content like copyright or links.
Can be at page or section level. |
|
3.0 Markup Example:
- This example is the markup and styles for this page, e.g., the page is its own example. That way, you can see tangible effects of the markup and styles.
-
<header>and<footer>are fixed to the top and bottom of the page respectively. When content scrolls they are always visible. -
<aside>is fixed to the right side of the page and has display:none by default. Clicking the "aside button" toggles its display between block and none.
3.1 - Outline of Example Code
Figure 1. - Partial View of Example Code
Body Parts Markup
Body Parts Styles
<body onload = "load()">
<header>
<h1 class="title">Semantic Markup</h1>
</header>
<!-- fixed menubar, always visible below header -->
-- code elided --
<!-- all visible content resides within main -->
<main id="main">
<section id="prologue">
<t-b>
Web pages are composed with HTML tags referred to as "markup".
These tags describe how the page is structured, e.g., its parts and how the parts
fit together.
</t-b>
-- elided --
</section>
<section id="introduction">
-- elided --
</section>
<section id="markup">
-- elided --
</section>
<section id="example" style="width:100%;">
-- elided --
</section>
<aside id="aside" class="hidden">
-- elided --
<nav>
-- elided --
<ul>
<li>
<a href="javascript:;" onclick="goTo('top')">Page Top</a>
</li>
<li>
<a href="javascript:;" onclick="goTo('introduction')">Introduction</a>
</li>
<li>
<a href="javascript:;" onclick="goTo('markup')">Semantic Markup</a>
</li>
<li>
<a href="javascript:;" onclick="goTo('example')">Example</a>
</li>
<li>
<a href="javascript:;" onclick="goTo('bottom')">Page Bottom</a>
</li>
</ul>
</nav>
</aside>
-- elided --
</main>
<footer>
<div style="vertical-align: center; text-align: center">
© Code Workshop, 2025
</div>
</footer>
<a id="bottom"></a>
</body>
</html>
/*-- styles for Semantic elements and helpers --*/
.title {
margin-left: 2rem;
}
.subtitle {
margin-left: 3.5rem;
}
main {
position:relative;
top: calc(var(--headerh) + var(--topmenuh));
padding: 1rem 2rem;
height: calc(100vh - var(--headerh) - var(--footerh) - var(--topmenuh));
overflow-y: auto;
padding: 1rem 2rem;
}
header {
position: fixed;
top: 0rem;
width: 100%;
z-index: 100;
background-color: var(--dark);
color: var(--atten);
height: var(--headerh);
padding: 0.25rem 1rem 0.5rem 1rem;
}
footer {
position: fixed;
bottom: 0rem;
width: 100%;
background-color: var(--dark);
color: var(--atten);
height: var(--footerh);
display: flex;
justify-content: center;
align-items: center;
}
section {
margin: 0.75rem 0rem;
}
aside {
position: fixed;
top: calc(var(--headerh) + 3rem);
right: 0rem;
width: 13rem;
padding: 1rem;
background-color: var(--light);
color: var(--dark);
border: 2px solid var(--dark);
}
nav {
padding: 1rem 0rem;
}
nav ol, nav ul {
list-style-type: none;
padding: 0.75rem 0rem;
}
nav a {
color: var(--dark);
}
nav#top-menu {
display:flex;
align-items: center;
position: fixed;
z-index: 10;
top: var(--headerh);
padding: 0rem 1rem;
border-top: 2px solid var(--atten);
background-color: var(--dark);
height: var(--topmenuh);
width:100%;
justify-content: center;
align-items: center;
line-height: 1rem;
font-size: 0.9rem;
}
nav#top-menu a {
position: relative;
z-index: 100;
text-decoration: none;
padding:0.15rem 1rem;
background-color: var(--light);
border:1px solid var(--dark);
}
nav#top-menu:hover {
text-decoration: underline;
cursor: pointer;
} 3.2 - Complete Example Code
Figure 2. - Full View of Example Code
Semantic HTML Markup
Semantic Styles
<!--
SemanticMarkup.html
- Semantic markup for this example page
-->
<!DOCTYPE html>
<html id="top" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Markup</title>
<link rel="stylesheet" href="css/SemanticMarkup.css">
<script src="../js/SplitterComponent.js"></script>
<link rel="stylesheet" href="../css/prism.css">
<script src="../js/prism.js"></script>
<script>
/*-- toggle visibility of aside block --*/
function toggleAside() {
const aside = document.getElementById('aside');
aside.classList.toggle('hidden');
}
/*
scroll so element with id is at the top of main
- note that main starts below the top of page
- need special case for bottom which scrolls so
bottom of view is at the bottom of main's
overflow if any.
*/
function goTo(id) {
const main = document.getElementById("main");
const target = document.getElementById(id);
if (main && target) {
if (id === "bottom") {
// Scroll all the way to the bottom of <main>
const scrollMax = main.scrollHeight - main.clientHeight;
main.scrollTo({ top: scrollMax, behavior: "smooth" });
} else {
// Scroll so target top is at top of view
const offsetTop = target.offsetTop;
main.scrollTo({ top: offsetTop, behavior: "smooth" });
}
}
}
/*-- display top of main on load --*/
function load() {
goTo('top');
}
</script>
</head>
<body onload = "load()">
<header>
<h1 class="title">Semantic Markup</h1>
</header>
<!-- fixed menubar, always visible below header -->
<nav id="top-menu">
<a href="../Site/Explore.html?src=SiteHome.html">Home</a>
<a href="../WebDev/ExploreWebDev.html?src=WebDevBites_Html.html">WebDev</a>
<div style="width:calc(100vw - 20rem);"></div>
<a class="right-button" onclick="toggleAside()">Aside</a>
</nav>
<!-- all visible content resides within main -->
<main id="main">
<section id="prologue">
<t-b>
Web pages are composed with HTML tags referred to as "markup".
These tags describe how the page is structured, e.g., its parts and how the parts
fit together.
</t-b>
<t-b>
HTML's primary structuring tags are <code><head></code>,
<code><script></code>,
<code><style></code>, <code><body></code>, and <code><div></code>.
<code><body></code> contains all of the page's content, primarily
within child <code><div></code>s. These are styled as <code>display:block</code> meaning they
are displayed in a vertical sequence down the page in the order declared
in the page's markup.
</t-b>
</section>
<section id="introduction">
<h3>1.0 Introduction</h3>
<indent>
<t-b>
Semantic Markup consists of <code><div></code> like elements that are
<code>display:block</code> but have tag names that identify common usage for
blocks of content, like <code><header></code>.
</t-b>
<t-b>
These purpose specific tag names help developers to understand page markup and
maintain it productively. All the semantic tags are summarized in the table, below.
</t-b>
</indent>
</section>
<section id="markup">
<h3>2.0 Table: Semantic Markup Elements:</h3>
<div style="height:0.75rem;"></div>
<indent>
<table class="semantic">
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><header></code></td>
<td>
Represents introductory content or a group of navigational links.
<hr>
Typically placed at the top of the page or section.
</td>
<td>
<pre><code><header>
<h1>Site Title</h1>
</header></code></pre>
</td>
</tr>
<tr>
<td><code><nav></code></td>
<td>
Defines a section of navigation links.
<hr>
Often used inside <code><header></code> or <code><aside></code>.
</td>
<td>
<pre><code><nav>
<a href="#about">About</a>
</nav></code></pre>
</td>
</tr>
<tr>
<td><code><main></code></td>
<td>
Contains the main content unique to the document.
<hr>
Should not be repeated across pages (unlike header or footer).
</td>
<td>
<pre><code><main>
<h2>Article Heading</h2>
</main></code></pre>
</td>
</tr>
<tr>
<td><code><section></code></td>
<td>
Groups related content under a thematic heading.
<hr>
Often used inside <code><main></code>.
</td>
<td>
<pre><code><section>
<h3>Introduction</h3>
</section></code></pre>
</td>
</tr>
<tr>
<td><code><article></code></td>
<td>
Represents a self-contained composition (e.g., blog post).
<hr>
Intended for syndication or reuse.
</td>
<td>
<pre><code><article>
<h2>News Item</h2>
</article></code></pre>
</td>
</tr>
<tr>
<td><code><aside></code></td>
<td>
Holds tangential content like sidebars or callouts.
<hr>
Can appear inside or outside <code><main></code>.
</td>
<td>
<pre><code><aside>
Related links or notes
</aside></code></pre>
</td>
</tr>
<tr>
<td><code><footer></code></td>
<td>
Contains footer content like copyright or links.
<hr>
Can be at page or section level.
</td>
<td>
<pre><code><footer>
© 2025 MySite
</footer></code></pre>
</td>
</tr>
</tbody>
</table>
</indent>
</section>
<section id="example" style="width:100%;">
<div style="height:0.5rem"></div>
<h3>3.0 Markup Example:</h3>
<indent>
<t-b>
HTML markup and CSS styling codes are shown here to provide a concrete
example of how semantic markup is used.
</t-b>
</indent>
<div class="label">
<div class="left"><strong>Semantic html markup</strong></div>
<div class="right"><strong>Semantic styles</strong></div>
</div>
<splitter-container style="width: calc(100vw - 4rem);">
<div slot="first" style="padding:0rem 0.5rem;">
<pre><code class="language-term">
--- code elided ---
</code></pre>
</div>
<div slot="second" style="padding:0rem 0.5rem;">
<pre><code class="language-term">
--- code elided ---
</code></pre>
</div>
</splitter-container>
</section>
<aside id="aside" class="hidden">
<strong><aside>:</strong><br>
Contains background and reference information about
the main content.
<div style="height:1.5 rem;"></div>
<nav>
<strong><nav>:</strong><br>
Contains links to page contents and to other
relevant pages.
<ul>
<li>
<a href="javascript:;" onclick="goTo('top')">Page Top</a>
</li>
<li>
<a href="javascript:;" onclick="goTo('introduction')">Introduction</a>
</li>
<li>
<a href="javascript:;" onclick="goTo('markup')">Semantic Markup</a>
</li>
<li>
<a href="javascript:;" onclick="goTo('example')">Example</a>
</li>
<li>
<a href="javascript:;" onclick="goTo('bottom')">Page Bottom</a>
</li>
</ul>
</nav>
</aside>
<div style="height:8rem;"></div>
</main>
<footer>
<div style="vertical-align: center; text-align: center">
© Code Workshop, 2025
</div>
</footer>
<a id="bottom"></a>
</body>
</html>/*-----------------------------------------------
SemenaticMarkup.css
Styles for:
- Semantic Markup elements
<header>, <main>, <aside>, <footer>, ...
- Custom styles for Semantic Markup example
page
*/
/* Basic reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*-- set basis for page sizes --*/
html {
/* height: 100vh; */
width: 100vw;
}
/*-- define CSS shared variable values --*/
:root {
--light: #fefefa;
--dark: #224466;
--menu: #eee;
--atten: #9cfbf5;
--hr: #224466;
--border: #224466;
--headerh : 3.5rem;
--footerh : 3rem;
--mainh : calc(100% - var(--headerh) - var(--footerh));
--topmenuh: 2.25rem;
}
/*--- Styles for this example --*/
h1 {
font-size: 1.5rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
header h1 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
h2 {
font-size: 1.35rem;
margin-top: 1.25rem;
margin-bottom: 1.0rem;
}
h3 {
font-size: 1.2rem;
margin-top: 1.00rem;
margin-bottom: 0.75rem;
}
h4 {
font-size: 1.1rem;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
hr {
opacity: 0.6;
}
body {
width:100%;
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.25;
font-size: 16pt;
background-color: var(--light);
color: var(--dark);
overflow-y: auto;
user-select: none;
}
.right-button {
float:right;
}
splitter-container {
display: flex;
width:100%;
overflow: auto;
}
splitter-container > div[slot] {
overflow: visible;
flex: 1;
}
.hidden {
display: none;
}
.indent {
margin-left: 1rem;
margin-right: 1rem;
}
.label {
display:flex;
flex-direction: row;
padding:0.5rem 1rem;
width: calc(100vw - 4rem);
font-weight: bold;
}
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
t-b {
display: block;
margin: 0.75rem 0rem;
max-width: 50rem;
}
table.semantic {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size: 0.95rem;
}
table.semantic col:first-child {
width: 7rem;
}
table.semantic col:nth-child(2) {
width: 36rem;
}
table.semantic col:nth-child(3) {
width: auto;
}
table.semantic th,
table.semantic td {
border: 1px solid var(--dark);
padding: 0.25rem 1rem;
text-align: left;
vertical-align: top;
}
th {
background-color: var(--dark);
color: var(--light);
font-size: 1.15rem;
}
td {
background-color: var(--light);
color: var(--dark);
}
indent {
display:block;
margin-left:1rem;
margin-right:1rem;
}
/*-- styles for Semantic elements and helpers --*/
.title {
margin-left: 2rem;
}
.subtitle {
margin-left: 3.5rem;
}
main {
position:relative;
top: calc(var(--headerh) + var(--topmenuh));
padding: 1rem 2rem;
height: calc(100vh - var(--headerh) - var(--footerh) - var(--topmenuh));
overflow-y: auto;
padding: 1rem 2rem;
}
header {
position: fixed;
top: 0rem;
width: 100%;
z-index: 100;
background-color: var(--dark);
color: var(--atten);
height: var(--headerh);
padding: 0.25rem 1rem 0.5rem 1rem;
}
footer {
position: fixed;
bottom: 0rem;
width: 100%;
background-color: var(--dark);
color: var(--atten);
height: var(--footerh);
display: flex;
justify-content: center;
align-items: center;
}
section {
margin: 0.75rem 0rem;
}
aside {
position: fixed;
top: calc(var(--headerh) + 3rem);
right: 0rem;
width: 13rem;
padding: 1rem;
background-color: var(--light);
color: var(--dark);
border: 2px solid var(--dark);
}
nav {
padding: 1rem 0rem;
}
nav ol, nav ul {
list-style-type: none;
padding: 0.75rem 0rem;
}
nav a {
color: var(--dark);
}
nav#top-menu {
display:flex;
align-items: center;
position: fixed;
z-index: 10;
top: var(--headerh);
padding: 0rem 1rem;
border-top: 2px solid var(--atten);
background-color: var(--dark);
height: var(--topmenuh);
width:100%;
justify-content: center;
align-items: center;
line-height: 1rem;
font-size: 0.9rem;
}
nav#top-menu a {
position: relative;
z-index: 100;
text-decoration: none;
padding:0.15rem 1rem;
background-color: var(--light);
border:1px solid var(--dark);
}
nav#top-menu:hover {
text-decoration: underline;
cursor: pointer;
}