Introduction
Once you understand the overall document structure, the next step is learning the everyday tags used to mark up content. These include headings, paragraphs, text-level formatting elements, and generic containers that organize a page into logical sections.
Cricket analogy: Learning common HTML tags after document structure is like learning individual shot types such as the cover drive after you already understand the basic stance and grip.
Syntax
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>A paragraph of text.</p>
<strong>Important text</strong>
<em>Emphasized text</em>
<div>A block-level container</div>
<span>An inline container</span>Explanation
Headings <h1> through <h6> establish a document's outline, with <h1> being the most important and typically used once per page. The <p> tag defines a paragraph of text. <strong> conveys strong importance and is rendered bold by default, while <em> conveys emphasis and is rendered italic — both carry semantic meaning beyond mere styling. <div> is a generic block-level container used to group content for layout or styling purposes, whereas <span> is its inline equivalent, used to wrap small pieces of text or elements without breaking the flow of a line.
Cricket analogy: <strong> is like a commentator raising his voice for a crucial six, adding real emphasis, not just louder volume; the meaning matters, not just the style.
Use heading levels in order (h1, then h2, then h3, and so on) rather than skipping levels, since screen reader users often navigate a page by its heading outline.
Example
<article>
<h1>10 Tips for Learning HTML</h1>
<p>HTML is the <strong>foundation</strong> of every website. Once you understand it, learning CSS becomes <em>much easier</em>.</p>
<div class="tip-box">
<span>Tip #1:</span> Practice by building small pages every day.
</div>
</article>Output
The browser displays a large bold heading, followed by a paragraph where 'foundation' appears bold and 'much easier' appears italic. Below that, a div groups a bolded inline span labeled 'Tip #1:' together with surrounding text on the same line.
Cricket analogy: The bold 'foundation' word standing out mid-paragraph is like a commentator emphasizing 'century' the instant a batsman reaches the milestone, without changing the rest of the commentary's tone.
Avoid using <b> and <i> purely for visual bolding or italics when you mean semantic importance or emphasis — prefer <strong> and <em>, which communicate meaning to assistive technologies.
Key Takeaways
- Headings h1–h6 create a logical, hierarchical outline for the page.
- <p> marks up paragraphs of readable text.
- <strong> and <em> add semantic importance and emphasis, not just visual styling.
- <div> groups block-level content; <span> groups inline content.
- Choosing the right tag for its meaning improves accessibility and SEO.
Practice what you learned
1. Which tag should typically be used only once per page to represent the main title?
2. What is the key difference between <div> and <span>?
3. Why prefer <strong> over <b> for important text?
4. What does skipping heading levels (e.g., using <h1> then <h4>) primarily harm?
Was this page helpful?
You May Also Like
HTML Document Structure
Learn the essential building blocks of every HTML document, from the doctype declaration to the html, head, and body elements.
Semantic HTML
Learn how to use HTML elements that convey meaning about their content, improving accessibility and SEO.
HTML5 New Elements
Explore the structural and media elements introduced in HTML5 and how they replace older markup patterns.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics