HTML Fundamentals
HTML Document Structure, basic tags, headings, paragraphs, comments, lists, links, and images.
Study Notes: HTML Fundamentals
💡 Easy English Concept Guide
HTML is the skeleton of a website. We use tags (labels inside angle brackets like <p>) to place text, lists, links, and pictures on a page.
1. The HTML5 Document Structure
Every HTML page must start with a proper document declaration and header meta fields:
<!DOCTYPE html>: Tells the browser that this is an HTML5 page.<html>: The root element wrapping the entire document.<head>: Contains background configurations like titles, charsets, and CSS links.<body>: Contains the visual content elements rendered on the screen.
2. Structural Elements Checklist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Title</title>
</head>
<body>
<!-- Heading levels -->
<h1>Main Header</h1>
<p>This is a paragraph explaining details.</p>
<!-- List block -->
<ul>
<li>Unordered item 1</li>
<li>Unordered item 2</li>
</ul>
<!-- Link and Image element -->
<a href="https://google.com" target="_blank">Link text</a>
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97" alt="Laptop desk setup">
</body>
</html>💡 Quick Revision Guide
Ensure your layouts adapt cleanly across responsive viewport widths. Double-check script sequences to verify that DOM selections happen after nodes are parsed by the browser.
Expected University & Placement Questions
- Q1: Why is closing HTML elements properly a fundamental layout requirement?
Answer: Unclosed tags leak style characteristics and structure containers into sibling items, breaking browser parsing hierarchies and visual elements. - Q2: Explain the structure and purpose of the HTML head block vs the body block.
Answer: The head block configures system metadata (charsets, style configurations, page title, imports). The body block holds the visual layout components (titles, grids, anchors, text paragraphs) parsed by visitors.
Last reviewed: July 2026