Web Fundamentals: HTML Structure and Semantics
The Skeleton of an HTML Page
HTML, the HyperText Markup Language, gives content its structure in the browser. A document opens with the doctype declaration telling the browser to render in standards mode, then a root html element with head and body sections. The head carries metadata that the user does not see, and the body carries everything that is visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Everything between angle brackets is a tag. Most elements pair an opening tag with a closing tag, like <h1> and </h1>. Attributes live inside the opening tag and configure the element, such as lang on the html tag and charset on the meta tag.
Semantic Elements
Semantic tags describe what the content means, not just how it looks.
- header - the top of a page or section, often with a logo and nav.
- nav - the main navigation links.
- main - the unique core content of the page.
- article - a self-contained unit like a blog post.
- section - a themed grouping of content.
- footer - closing information at the bottom.
<article>
<h2>Chapter One</h2>
<p>Every article carries its own meaning.</p>
</article>Search engines and screen readers rely on this structure to understand the page. Using semantic tags instead of endless generic divs improves accessibility and is easier to maintain.
Text and Links
Headings run from h1 down to h6 and should follow a logical, non-skipping order. Paragraphs hold prose, lists hold items, and the anchor element builds links to other pages.
<a href="https://groovygrails.in">Home</a>The href attribute gives the destination. Good link text tells the user where they will land without needing the surrounding sentence.
Key Points
- Every page starts with a doctype and a head plus body structure.
- Tags open and close; attributes configure the element.
- Semantic tags describe meaning and improve accessibility and SEO.
- Use one h1 per page and a logical heading order.
