MACRO NEPAL
Complete Guide to HTML and CSS Document Structure
awiskar acharya
March 12, 2026
11:05 am

Introduction to Document Structure

The structure of HTML and CSS documents is fundamental to creating well-organized, maintainable, and semantically meaningful web pages. Understanding how to properly structure your HTML markup and organize your CSS code is essential for professional web development.

Key Concepts

  • HTML Document Structure: The skeleton that defines the parts of a web page
  • CSS Organization: How to structure and organize style rules
  • Semantic Markup: Using HTML elements for their intended meaning
  • Separation of Concerns: Content (HTML) separate from presentation (CSS)
  • Document Flow: How elements are arranged on the page by default

1. HTML Document Structure

Basic HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Structure Example</title>
<meta name="description" content="A comprehensive example of HTML document structure">
<meta name="keywords" content="HTML, CSS, structure, tutorial">
<meta name="author" content="Your Name">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- CSS Links -->
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/main.css">
<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- External Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/page-url">
<!-- Open Graph tags (for social media) -->
<meta property="og:title" content="Document Structure Example">
<meta property="og:description" content="A comprehensive example of HTML document structure">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page-url">
<meta property="og:type" content="website">
<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Document Structure Example">
<meta name="twitter:description" content="A comprehensive example of HTML document structure">
<meta name="twitter:image" content="https://example.com/image.jpg">
<!-- Robots meta tag -->
<meta name="robots" content="index, follow">
<!-- Theme color for mobile browsers -->
<meta name="theme-color" content="#007bff">
<!-- Base URL for relative links -->
<base href="https://example.com/">
</head>
<body>
<!-- Page content goes here -->
</body>
</html>

DOCTYPE Declaration

<!-- HTML5 DOCTYPE (recommended) -->
<!DOCTYPE html>
<!-- Older DOCTYPEs (for legacy documents) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The <html> Element

<!-- Basic html element -->
<html lang="en">
<!-- With additional attributes -->
<html lang="en" dir="ltr" data-theme="light">
<!-- For multilingual sites -->
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- With manifest (deprecated) -->
<html manifest="appcache.manifest">

The <head> Section

<head>
<!-- Character encoding (must be within first 1024 bytes) -->
<meta charset="UTF-8">
<!-- Viewport settings for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<!-- Page title (required) -->
<title>Page Title - Site Name</title>
<!-- Meta descriptions -->
<meta name="description" content="A brief description of the page content (150-160 characters)">
<meta name="keywords" content="HTML, CSS, JavaScript, tutorial">
<meta name="author" content="Author Name">
<!-- HTTP-equiv equivalents (deprecated but still used) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Refresh" content="30;url=https://example.com/new-page">
<!-- CSS Links -->
<link rel="stylesheet" href="/css/styles.css" media="all">
<link rel="stylesheet" href="/css/print.css" media="print">
<link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width: 768px)">
<!-- JavaScript (with defer/async) -->
<script src="/js/main.js" defer></script>
<script src="https://cdn.example.com/library.js" async></script>
<!-- Preload critical resources -->
<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/critical.js" as="script">
<!-- Prefetch for future navigation -->
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/images/large-image.jpg">
<!-- DNS Prefetch -->
<link rel="dns-prefetch" href="https://api.example.com">
<link rel="dns-prefetch" href="https://images.example.com">
<!-- Preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Alternate versions -->
<link rel="alternate" href="https://example.com/en" hreflang="en">
<link rel="alternate" href="https://example.com/es" hreflang="es">
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml">
<!-- Canonical URL (prevents duplicate content issues) -->
<link rel="canonical" href="https://example.com/canonical-url">
<!-- Prev/Next for pagination -->
<link rel="prev" href="https://example.com/page-1">
<link rel="next" href="https://example.com/page-3">
<!-- Icons -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Page Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Page description">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@author">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<!-- Pinterest -->
<meta name="pinterest" content="nopin" description="Don't save this content">
<!-- Theme color (mobile browsers) -->
<meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
<!-- Robots -->
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="googlebot" content="index, follow">
<!-- Verification (Google Search Console, etc.) -->
<meta name="google-site-verification" content="verification-code">
<meta name="msvalidate.01" content="bing-verification-code">
<meta name="yandex-verification" content="yandex-verification-code">
<!-- Script with JSON-LD structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Page Title",
"description": "Page description",
"author": {
"@type": "Person",
"name": "Author Name"
},
"datePublished": "2024-03-12",
"dateModified": "2024-03-12"
}
</script>
</head>

The <body> Section

<body>
<!-- Page header -->
<header>
<h1>Site Title</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main>
<article>
<header>
<h2>Article Title</h2>
<p>Published on <time datetime="2024-03-12">March 12, 2024</time></p>
</header>
<section>
<h3>Section Title</h3>
<p>Section content...</p>
</section>
<section>
<h3>Another Section</h3>
<p>More content...</p>
</section>
<footer>
<p>Article footer</p>
</footer>
</article>
<aside>
<h3>Related Content</h3>
<ul>
<li><a href="#">Related article 1</a></li>
<li><a href="#">Related article 2</a></li>
</ul>
</aside>
</main>
<!-- Page footer -->
<footer>
<p>&copy; 2024 Site Name. All rights reserved.</p>
<address>
Contact: <a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>
<!-- Scripts at end of body for performance -->
<script src="/js/main.js"></script>
</body>

2. Semantic HTML Structure

Document Outline with Headings

<body>
<!-- Proper heading hierarchy -->
<h1>Main Page Title (only one per page)</h1>
<section>
<h2>Section Level 2</h2>
<p>Content...</p>
<section>
<h3>Subsection Level 3</h3>
<p>More content...</p>
<h4>Level 4 if needed</h4>
<p>Even more specific content...</p>
</section>
<section>
<h3>Another Subsection</h3>
<p>Different content...</p>
</section>
</section>
<section>
<h2>Another Main Section</h2>
<p>More content...</p>
</section>
</body>

Article Structure

<article>
<!-- Article header -->
<header>
<h1>Article Title</h1>
<div class="byline">
<address class="author">
<a rel="author" href="/authors/john-doe">John Doe</a>
</address>
<time datetime="2024-03-12T14:30" pubdate>March 12, 2024</time>
</div>
</header>
<!-- Article content -->
<div class="content">
<p>Introduction paragraph...</p>
<h2>First Section</h2>
<p>Section content...</p>
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Image caption</figcaption>
</figure>
<h2>Second Section</h2>
<p>More content...</p>
<blockquote cite="https://example.com/source">
<p>Notable quote from the article...</p>
</blockquote>
<h3>Subsection</h3>
<p>Detailed content...</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<!-- Article footer with metadata -->
<footer>
<p>Categories: <a href="/category/tech">Tech</a>, <a href="/category/web">Web</a></p>
<p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/css">CSS</a></p>
<p>Share: 
<a href="https://twitter.com/share?url=...">Twitter</a>
<a href="https://facebook.com/sharer.php?u=...">Facebook</a>
</p>
</footer>
</article>

Navigation Structures

<!-- Main navigation -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/products">Products</a>
<ul>
<li><a href="/products/electronics">Electronics</a></li>
<li><a href="/products/clothing">Clothing</a></li>
<li><a href="/products/books">Books</a></li>
</ul>
</li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/products/electronics">Electronics</a></li>
<li aria-current="page">Smartphones</li>
</ol>
</nav>
<!-- Pagination -->
<nav aria-label="Pagination">
<ul class="pagination">
<li><a href="?page=1" aria-label="Previous page" rel="prev">&laquo;</a></li>
<li><a href="?page=1" aria-label="Page 1">1</a></li>
<li><span aria-current="page">2</span></li>
<li><a href="?page=3" aria-label="Page 3">3</a></li>
<li><a href="?page=4" aria-label="Page 4">4</a></li>
<li><a href="?page=3" aria-label="Next page" rel="next">&raquo;</a></li>
</ul>
</nav>

3. CSS Document Structure

CSS File Organization

/* ========================================
RESET / NORMALIZE
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ========================================
VARIABLES / CUSTOM PROPERTIES
======================================== */
:root {
/* Colors */
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;
--color-warning: #ffc107;
--color-info: #17a2b8;
--color-light: #f8f9fa;
--color-dark: #343a40;
--color-white: #ffffff;
--color-black: #000000;
/* Typography */
--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-serif: Georgia, 'Times New Roman', Times, serif;
--font-family-mono: 'Courier New', Courier, monospace;
--font-size-base: 16px;
--font-size-sm: 0.875rem;
--font-size-lg: 1.125rem;
--font-weight-normal: 400;
--font-weight-bold: 700;
--line-height-base: 1.5;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;
/* Border radius */
--border-radius-sm: 0.25rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 1rem;
--border-radius-circle: 50%;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 300ms ease;
--transition-slow: 500ms ease;
/* Z-index */
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-tooltip: 1070;
/* Container widths */
--container-sm: 540px;
--container-md: 720px;
--container-lg: 960px;
--container-xl: 1140px;
--container-xxl: 1320px;
}
/* Dark theme variables */
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #375a7f;
--color-light: #2d2d2d;
--color-dark: #f8f9fa;
--color-white: #1a1a1a;
--color-black: #ffffff;
}
}
/* ========================================
BASE STYLES
======================================== */
html {
font-size: var(--font-size-base);
scroll-behavior: smooth;
}
body {
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-base);
color: var(--color-dark);
background-color: var(--color-white);
min-height: 100vh;
text-rendering: optimizeSpeed;
}
/* ========================================
TYPOGRAPHY
======================================== */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: var(--spacing-md);
font-weight: var(--font-weight-bold);
line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p {
margin-top: 0;
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
/* ========================================
LAYOUT
======================================== */
.container {
width: 100%;
padding-right: var(--spacing-md);
padding-left: var(--spacing-md);
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container { max-width: var(--container-sm); }
}
@media (min-width: 768px) {
.container { max-width: var(--container-md); }
}
@media (min-width: 992px) {
.container { max-width: var(--container-lg); }
}
@media (min-width: 1200px) {
.container { max-width: var(--container-xl); }
}
@media (min-width: 1400px) {
.container { max-width: var(--container-xxl); }
}
/* ========================================
COMPONENTS
======================================== */
/* Buttons */
.btn {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-lg);
font-size: 1rem;
font-weight: var(--font-weight-normal);
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast);
}
.btn-primary {
color: var(--color-white);
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-primary:hover {
color: var(--color-white);
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
/* Cards */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: var(--color-white);
background-clip: border-box;
border: 1px solid rgba(0,0,0,0.125);
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-normal);
}
.card:hover {
box-shadow: var(--shadow-lg);
}
.card-body {
flex: 1 1 auto;
padding: var(--spacing-lg);
}
.card-title {
margin-bottom: var(--spacing-sm);
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
}
.card-text {
margin-bottom: var(--spacing-md);
}
/* ========================================
UTILITIES
======================================== */
/* Spacing utilities */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }
/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
/* Flex utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
/* Responsive utilities */
@media (min-width: 768px) {
.d-md-none { display: none; }
.d-md-block { display: block; }
.text-md-center { text-align: center; }
}
/* ========================================
ANIMATIONS
======================================== */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.animate-fade-in {
animation: fadeIn var(--transition-normal);
}
.animate-slide-up {
animation: slideInUp var(--transition-normal);
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
body {
font-size: 12pt;
line-height: 1.5;
color: #000;
background: #fff;
}
.no-print {
display: none !important;
}
a[href]::after {
content: " (" attr(href) ")";
}
a[href^="#"]::after {
content: "";
}
}

4. CSS Organization Methodologies

BEM (Block Element Modifier)

/* BEM Naming Convention */
/* Block: standalone component */
.card { }
/* Element: part of a block (double underscore) */
.card__title { }
.card__image { }
.card__content { }
/* Modifier: variation of block/element (double dash) */
.card--featured { }
.card__title--large { }
/* Example */
.nav {
background: #333;
}
.nav__list {
display: flex;
list-style: none;
}
.nav__item {
margin-right: 1rem;
}
.nav__link {
color: white;
text-decoration: none;
}
.nav__link--active {
font-weight: bold;
border-bottom: 2px solid white;
}
.nav__link:hover {
text-decoration: underline;
}

SMACSS (Scalable and Modular Architecture for CSS)

/* ========================================
SMACSS Categories
======================================== */
/* Base Styles */
body {
margin: 0;
font-family: sans-serif;
}
h1, h2, h3 {
margin: 0 0 1rem 0;
}
a {
color: blue;
}
/* Layout Styles */
.l-header {
position: fixed;
top: 0;
width: 100%;
}
.l-main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.l-footer {
margin-top: 2rem;
padding: 1rem;
background: #f5f5f5;
}
/* Module Styles */
.module-card {
border: 1px solid #ddd;
border-radius: 4px;
}
.module-card-header {
padding: 1rem;
background: #f5f5f5;
}
.module-card-body {
padding: 1rem;
}
/* State Styles */
.is-hidden {
display: none;
}
.is-expanded {
display: block;
}
.is-active {
font-weight: bold;
}
/* Theme Styles */
.theme-dark {
background: #333;
color: white;
}
.theme-dark a {
color: #8bbfff;
}

Atomic CSS

/* Atomic CSS (functional) */
/* Single-purpose classes */
.m-0 { margin: 0; }
.m-4 { margin: 1rem; }
.p-0 { padding: 0; }
.p-4 { padding: 1rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.bg-blue { background-color: blue; }
.bg-red { background-color: red; }
.bg-green { background-color: green; }
.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }
.w-full { width: 100%; }
.h-full { height: 100%; }
/* Example usage */
<div class="flex justify-center items-center p-4 bg-blue text-white">
<h1 class="text-center">Centered Content</h1>
</div>

5. CSS Architecture Patterns

ITCSS (Inverted Triangle CSS)

/* ========================================
ITCSS Layers (from generic to specific)
======================================== */
/* 1. Settings - Variables, config */
:root {
--color-primary: #007bff;
--spacing-unit: 8px;
}
/* 2. Tools - Mixins, functions */
@mixin center {
display: flex;
align-items: center;
justify-content: center;
}
/* 3. Generic - Reset, normalize */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 4. Elements - Bare element styles */
body {
font-family: sans-serif;
line-height: 1.5;
}
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
a {
color: var(--color-primary);
}
/* 5. Objects - Layout patterns */
.o-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.o-grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* 6. Components - UI components */
.c-card {
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
.c-card__image {
width: 100%;
height: 200px;
object-fit: cover;
}
.c-card__content {
padding: 1rem;
}
.c-card__title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
/* 7. Utilities - Helpers, overrides */
.u-text-center {
text-align: center;
}
.u-mt-2 {
margin-top: 2rem;
}
.u-hidden {
display: none;
}

OOCSS (Object Oriented CSS)

/* OOCSS - Separate structure from skin */
/* Structure */
.media {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.media__figure {
flex-shrink: 0;
}
.media__body {
flex: 1;
}
/* Skin */
.media--bordered {
border: 1px solid #ddd;
padding: 1rem;
border-radius: 4px;
}
.media--highlighted {
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.media__figure--rounded {
border-radius: 50%;
overflow: hidden;
}
/* Button object */
.btn {
display: inline-block;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
font-size: 1rem;
text-align: center;
text-decoration: none;
}
.btn--primary {
background-color: blue;
color: white;
}
.btn--secondary {
background-color: gray;
color: white;
}
.btn--large {
padding: 1rem 2rem;
font-size: 1.25rem;
}

6. Responsive Document Structure

Viewport Meta Tag

<!-- Basic viewport settings -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- With additional options -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes">
<!-- For fixed-width designs (not recommended) -->
<meta name="viewport" content="width=1024">
<!-- For iOS specific -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Media Queries Structure

/* Mobile First Approach */
/* Base styles (mobile) */
.container {
width: 100%;
padding: 1rem;
}
.grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
/* Tablet (>= 768px) */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
.grid {
grid-template-columns: repeat(2, 1fr);
}
.sidebar {
display: block;
}
}
/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
.header {
position: sticky;
top: 0;
}
}
/* Large Desktop (>= 1200px) */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* Print styles */
@media print {
.header,
.footer,
.sidebar {
display: none;
}
body {
font-size: 12pt;
line-height: 1.5;
}
}
/* Orientation specific */
@media (orientation: landscape) {
.hero {
height: 80vh;
}
}
@media (orientation: portrait) {
.hero {
height: 60vh;
}
}
/* Feature queries */
@supports (display: grid) {
.grid {
display: grid;
}
}
@supports not (display: grid) {
.grid {
display: flex;
flex-wrap: wrap;
}
}

Responsive Images

<!-- Responsive images with srcset -->
<img 
src="image-small.jpg"
srcset="image-small.jpg 300w,
image-medium.jpg 600w,
image-large.jpg 900w"
sizes="(max-width: 300px) 300px,
(max-width: 600px) 600px,
900px"
alt="Responsive image"
>
<!-- Picture element for art direction -->
<picture>
<source media="(max-width: 768px)" srcset="image-mobile.jpg">
<source media="(max-width: 1024px)" srcset="image-tablet.jpg">
<img src="image-desktop.jpg" alt="Art-directed image">
</picture>
<!-- WebP format with fallback -->
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="Image with WebP support">
</picture>

7. CSS Import and Organization

CSS @import Rules

/* main.css - Main stylesheet */
/* Import order matters */
@import url('reset.css');
@import url('variables.css');
@import url('typography.css');
@import url('layout.css');
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'pages/home.css' screen and (min-width: 768px);
@import 'print.css' print;
/* Media-specific imports */
@import 'mobile.css' screen and (max-width: 767px);
@import 'desktop.css' screen and (min-width: 1024px);
/* Conditional import based on feature */
@import 'grid.css' supports(display: grid);

Multiple Stylesheets Structure

<!-- HTML linking multiple CSS files -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Critical CSS (inline for performance) -->
<style>
/* Critical above-the-fold styles */
.header { background: #333; color: white; }
.hero { min-height: 50vh; }
</style>
<!-- Non-critical CSS (loaded asynchronously) -->
<link rel="preload" href="css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/main.css"></noscript>
<!-- Media-specific stylesheets -->
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 1024px)">
</head>

CSS File Structure Example

css/
├── base/
│   ├── _reset.css
│   ├── _variables.css
│   ├── _typography.css
│   └── _animations.css
├── components/
│   ├── _buttons.css
│   ├── _cards.css
│   ├── _forms.css
│   ├── _modals.css
│   └── _navigation.css
├── layout/
│   ├── _header.css
│   ├── _footer.css
│   ├── _sidebar.css
│   └── _grid.css
├── pages/
│   ├── _home.css
│   ├── _about.css
│   └── _contact.css
├── themes/
│   ├── _light.css
│   └── _dark.css
├── utils/
│   ├── _mixins.css
│   ├── _functions.css
│   └── _helpers.css
└── main.css

8. HTML5 Document Outline

Document Outline Algorithm

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Outline Example</title>
</head>
<body>
<!-- Sectioning content creates implicit outline -->
<h1>Main Title</h1>
<section>
<h2>Section 1</h2>
<p>Content...</p>
<section>
<h3>Subsection 1.1</h3>
<p>Content...</p>
</section>
<section>
<h3>Subsection 1.2</h3>
<p>Content...</p>
</section>
</section>
<article>
<h2>Article Title</h2>
<p>Content...</p>
<section>
<h3>Article Section</h3>
<p>Content...</p>
</section>
</article>
<aside>
<h2>Related Content</h2>
<p>Content...</p>
</aside>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#">Link</a></li>
</ul>
</nav>
</body>
</html>

Sectioning Elements

<!-- Sectioning elements create new sections in the document outline -->
<body>
<header>
<h1>Site Title</h1>
<nav>...</nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
</header>
<section>
<h3>Section Title</h3>
<p>Content...</p>
</section>
<footer>
<p>Article footer</p>
</footer>
</article>
<aside>
<h3>Sidebar</h3>
<p>Related content...</p>
</aside>
</main>
<footer>
<p>Site footer</p>
</footer>
</body>

9. Accessibility in Document Structure

ARIA Landmarks

<body>
<!-- ARIA landmarks for screen readers -->
<header role="banner">
<h1>Site Title</h1>
</header>
<nav role="navigation" aria-label="Main menu">
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
<main role="main">
<article role="article">
<h2>Article Title</h2>
<p>Content...</p>
</article>
<aside role="complementary">
<h3>Related</h3>
</aside>
</main>
<section role="region" aria-label="Newsletter signup">
<h2>Subscribe</h2>
<form>...</form>
</section>
<footer role="contentinfo">
<p>Copyright 2024</p>
</footer>
<!-- Search landmark -->
<div role="search">
<input type="search" placeholder="Search...">
</div>
<!-- Form landmark -->
<form role="form" aria-label="Contact form">
<!-- form fields -->
</form>
</body>

Skip Links

<body>
<!-- Skip link for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<nav>
<!-- complex navigation -->
</nav>
</header>
<main id="main-content" tabindex="-1">
<!-- main content -->
</main>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: white;
padding: 8px;
z-index: 100;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
</style>
</body>

10. Performance Optimization

Critical CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimized Page</title>
<!-- Critical CSS (inline) -->
<style>
/* Critical above-the-fold styles */
body {
margin: 0;
font-family: sans-serif;
}
header {
background: #333;
color: white;
padding: 1rem;
}
.hero {
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
</style>
<!-- Preload non-critical CSS -->
<link rel="preload" href="css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/main.css"></noscript>
<!-- Load non-critical CSS asynchronously -->
<script>
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
(function( w ){
"use strict";
if( !w.loadCSS ){
w.loadCSS = function(){};
}
var rp = loadCSS.relpreload = {};
rp.support = function(){
try {
return w.document.createElement( "link" ).relList.supports( "preload" );
} catch( e ) {
return false;
}
};
rp.poly = function(){
var links = w.document.getElementsByTagName( "link" );
for( var i = 0; i < links.length; i++ ){
var link = links[ i ];
if( link.rel === "preload" && link.getAttribute( "as" ) === "style" ){
w.addEventListener( "load", function() {
link.rel = "stylesheet";
});
break;
}
}
};
if( !rp.support() ){
rp.poly();
}
})( window );
</script>
</head>
<body>
<!-- Page content -->
<header>...</header>
<main>...</main>
<!-- Defer non-critical JavaScript -->
<script src="js/non-critical.js" defer></script>
</body>
</html>

11. Document Validation

HTML Validation

<!DOCTYPE html>
<html lang="en">
<head>
<!-- W3C validation hints -->
<meta charset="UTF-8">
<title>Valid HTML Document</title>
</head>
<body>
<!-- Avoid common validation errors -->
<!-- Don't use deprecated elements -->
<!-- <center>This is centered</center> --> <!-- Bad -->
<div style="text-align: center">This is centered</div> <!-- Good -->
<!-- Always include alt text on images -->
<img src="image.jpg" alt="Descriptive text">
<!-- Don't use inline styles (prefer classes) -->
<!-- <div style="color: red">Text</div> --> <!-- Bad -->
<div class="text-red">Text</div> <!-- Good -->
<!-- Close all tags properly -->
<p>Paragraph content</p> <!-- Always close -->
<!-- Use proper nesting -->
<div>
<p>Content</p> <!-- Good -->
</div>
<!-- <div><p>Content</div></p> --> <!-- Bad - incorrect nesting -->
<!-- IDs must be unique -->
<div id="unique-id">First</div>
<div id="unique-id">Second</div> <!-- Bad - duplicate ID -->
<!-- Use semantic elements -->
<div class="header">...</div> <!-- Acceptable but better: -->
<header>...</header> <!-- Good -->
</body>
</html>

CSS Validation

/* Avoid common CSS validation errors */
/* Use correct property names */
/* colorr: red; */ /* Bad - misspelled */
color: red; /* Good */
/* Use correct property values */
/* display: blok; */ /* Bad - misspelled */
display: block; /* Good */
/* Don't use experimental properties without prefixes */
.example {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
/* Use correct units */
/* width: 100; */ /* Bad - missing unit */
width: 100px; /* Good */
/* Don't use non-existent pseudo-classes */
/* element:non-existent { } */ /* Bad */
/* Use correct function syntax */
/* background: url(image.jpg; */ /* Bad - missing closing parenthesis */
background: url(image.jpg); /* Good */
/* Don't use browser-specific hacks */
/* .element { _color: red; } */ /* Bad - IE hack */

12. Best Practices Summary

HTML Best Practices

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 1. Always declare doctype -->
<!-- 2. Set character encoding -->
<meta charset="UTF-8">
<!-- 3. Set viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 4. Always have a title -->
<title>Page Title</title>
<!-- 5. Include meta description -->
<meta name="description" content="Page description">
</head>
<body>
<!-- 6. Use semantic HTML -->
<header></header>
<nav></nav>
<main></main>
<article></article>
<section></section>
<aside></aside>
<footer></footer>
<!-- 7. Use heading hierarchy (h1-h6) -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<!-- 8. Always add alt text to images -->
<img src="image.jpg" alt="Description">
<!-- 9. Use lists for related items -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- 10. Label form inputs -->
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<!-- 11. Use ARIA attributes when needed -->
<button aria-label="Close">×</button>
<!-- 12. Ensure keyboard navigation -->
<a href="#main" class="skip-link">Skip to content</a>
<!-- 13. Validate your HTML -->
<!-- Use W3C validator: https://validator.w3.org/ -->
</body>
</html>

CSS Best Practices

/* 1. Use a CSS reset or normalize */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 2. Use CSS variables for consistency */
:root {
--primary-color: #007bff;
--spacing-unit: 8px;
}
/* 3. Follow a naming convention (BEM, etc.) */
.card { }
.card__title { }
.card--featured { }
/* 4. Keep specificity low */
/* Avoid overly specific selectors */
/* div.container ul li a { } */ /* Bad */
.nav-link { } /* Good */
/* 5. Use meaningful class names */
/* .r { } */ /* Bad - cryptic */
/* .red-text { } */ /* Bad - describes appearance */
.error-message { } /* Good - describes purpose */
/* 6. Organize CSS logically */
/* Variables, Reset, Base, Layout, Components, Utilities */
/* 7. Use shorthand properties */
/* margin-top: 10px; margin-bottom: 10px; */ /* Verbose */
margin: 10px 0; /* Good */
/* 8. Avoid !important */
/* .important { color: red !important; } */ /* Bad - use only as last resort */
/* 9. Group media queries */
/* Instead of scattering media queries, group them */
@media (max-width: 768px) {
.header { ... }
.nav { ... }
.footer { ... }
}
/* 10. Comment your code */
/* ========================================
COMPONENT: Cards
======================================== */
/* 11. Use relative units */
/* width: 200px; */ /* Less flexible */
width: 20rem; /* More flexible */
/* 12. Test across browsers */
/* Use autoprefixer or manually add prefixes */
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* 13. Optimize performance */
/* Use will-change for animations */
.animated {
will-change: transform;
}
/* 14. Validate your CSS */
/* Use W3C CSS validator: https://jigsaw.w3.org/css-validator/ */

Conclusion

Key Takeaways

  1. HTML document structure consists of <!DOCTYPE>, <html>, <head>, and <body>
  2. Semantic HTML improves accessibility, SEO, and maintainability
  3. CSS organization should follow a consistent methodology (BEM, SMACSS, ITCSS)
  4. Responsive design requires proper viewport settings and media queries
  5. Performance optimization includes critical CSS, lazy loading, and efficient selectors
  6. Accessibility should be built into the document structure from the start
  7. Validation ensures code quality and cross-browser compatibility

Document Structure Checklist

  • [ ] <!DOCTYPE html> declaration present
  • [ ] <html lang="en"> with appropriate language
  • [ ] <meta charset="UTF-8"> in <head>
  • [ ] <meta name="viewport"> for responsive design
  • [ ] <title> element with descriptive title
  • [ ] Semantic elements used (<header>, <nav>, <main>, etc.)
  • [ ] Proper heading hierarchy (h1-h6)
  • [ ] Alt text on all images
  • [ ] Labels associated with form inputs
  • [ ] ARIA landmarks where appropriate
  • [ ] CSS organized with methodology
  • [ ] Media queries for responsive design
  • [ ] Valid HTML and CSS

Mastering document structure in HTML and CSS is fundamental to creating well-organized, maintainable, and accessible websites. A solid understanding of these principles will serve as the foundation for all your web development projects.

HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)

HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/

Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/

Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/

Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/

HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/

HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/

HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/

HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

Category : HTML AND CSS

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper