Unit
- Document type declaration: The
<!DOCTYPE html>declaration at the top tells the browser to render the page in standards mode, preventing quirks mode rendering that can cause layout inconsistencies across browsers. - Root element: The
<html>element wraps all content on the page and includes thelangattribute to define the primary language, aiding screen readers and search engines. - Head section: The
<head>element contains metadata such as<title>,<meta charset="UTF-8">, links to stylesheets, and scripts. This metadata does not display directly on the page but controls behavior and SEO. - Body section: The
<body>element holds all visible content: text, images, videos, forms, and interactive widgets. It is the canvas where structural elements like headings, paragraphs, and divs reside. - Character encoding: Using
<meta charset="UTF-8">ensures that the browser correctly interprets characters from various languages and special symbols like em dashes or accented letters. - Viewport meta tag: The
<meta name="viewport" content="width=device-width, initial-scale=1.0">tag is essential for responsive design, telling mobile browsers to scale the page to the device width rather than zooming out. - Comments and whitespace: HTML comments
<!-- comment -->are ignored by browsers and help developers document code. Extra whitespace between tags is collapsed by default, so indentation is purely for human readability. - Validation: Every HTML document should pass W3C validation to catch errors like missing closing tags or deprecated attributes. Valid code ensures consistent rendering across browsers and avoids unpredictable layout shifts.
- Semantic elements: HTML5 introduced semantic tags like
header,nav,main,article,section,aside, andfooter. These elements clarify the structure of the page for both developers and assistive technologies, improving accessibility and SEO by defining distinct regions of content. - Heading hierarchy: Use
h1throughh6to create a logical outline of the page content. Theh1tag should represent the main title and appear only once per page. Proper heading order helps screen reader users navigate and search engines understand the document structure. - Link and script inclusion: The
linkelement in the head connects external stylesheets using therelandhrefattributes. Thescriptelement can load JavaScript files or embed inline code. Placing scripts just before the closingbodytag often improves perceived page load performance.
Code Example
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title/My First Page</title>
</head>
<body>
<h1/Welcome to My Site</h1>
<p/This is a paragraph of text.</p>
</body>
</html>This minimal yet complete HTML document includes the doctype, language attribute, character encoding, viewport settings, a title in the head, and a heading with a paragraph in the body. Copy and save as index.html to see the result in any browser.
Quick Revision
- Start every HTML document with
<!DOCTYPE html>and a<html lang='...'>root element. - Place metadata like character encoding, viewport, and title inside the
<head>. - All visible content goes inside the
<body>element. - Validate your HTML using the W3C validator to catch structural errors early.