Concept 2 • Typography
Headings (
Headings (<h1>-<h6>) & Paragraphs (<p>)
Organizing text content clearly for humans and search engine crawlers.
Content Structure
Headings Hierarchy (<h1> to <h6>)
Headings define sections and sub-topics on a web page:
<h1>: The main heading of the page. Crucial for SEO. Recommended only 1 per page.<h2>: Major section headers (e.g., "About Me", "Skills", "Contact").<h3>: Sub-sections inside an<h2>(e.g., card titles).<h4>to<h6>: Deeper sub-headings for fine granular hierarchy.
Headings Hierarchy Code
<h1>Shailesh Gimbhal - Web Developer</h1>
<h2>Frontend Technical Skills</h2>
<h3>HTML5 & Semantic Web</h3>
<h4>Headings, Paragraphs & Tables</h4>
Body Text
Paragraphs (<p>), <br> & <hr>
Paragraphs format running blocks of prose:
<p>: Creates a block element with standard top and bottom margins.<br>(Break): Forces a single line-break without creating a whole new paragraph.<hr>(Horizontal Rule): Creates a clean dividing horizontal line between topics.- Inline styles:
<strong>for bold text,<em>for italics.
Paragraphs & Breaks
<p>
I am learning <strong>HTML5</strong> and building responsive websites.<br>
Line breaks keep sentences on the next line.
</p>
<hr>
<p>This is a separate paragraph below the divider.</p>
Concept 3 • Data Representation
HTML Tables:
HTML Tables: <table>, <tr>, <td>, <th>
Learn how to arrange tabular data cleanly with rows, columns, and styled headers.
Table Tag Breakdown
Anatomy of an HTML Table
Tables are composed of several nested tags working together:
<table>: The wrapper container for all table rows and cells.<tr>(Table Row): Defines a horizontal row across the table.<th>(Table Header): Defines a header cell (automatically bold & centered by default).<td>(Table Data): Defines a standard content cell containing text, links, or numbers.<thead>&<tbody>: Groups header and body rows for semantic clarity.
Table Code Structure
<table border="1">
<thead>
<tr>
<th>Skill</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML5</td>
<td>Advanced</td>
</tr>
</tbody>
</table>
Visual Presentation
Live Styled Table Example
With CSS border-collapse: collapse; and soft row padding, HTML tables look modern and professional:
Rendered Output:
| Tag | Full Name | Purpose | Status |
|---|---|---|---|
<h1> |
Heading 1 | Top-level page title | Mastered |
<p> |
Paragraph | Main text block | Mastered |
<tr> |
Table Row | Horizontal row | Mastered |
<td> |
Table Data | Standard data cell | Mastered |
<th> |
Table Header | Column title cell | Mastered |
Pro Tip: Always set border-collapse: collapse; in CSS so adjacent cell borders merge into single crisp lines.