📜 Basic HTML Document Structure
Every standard HTML file follows this essential template:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title Here</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is the main content of my web page.</p>
</body>
</html>
Core Structure and Metadata Codes
These tags define the basic document structure and provide information about the page.
Code Name Description
<!DOCTYPE DOCTYPE Declares the document type to be HTML5.
html>
<html> HTML Root The root element for all HTML content.
<head> Head Contains metadata (information about the HTML document).
<title> Title Defines the title shown in the browser tab.
<meta> Metadata Provides general data about the HTML document (e.g., character set,
viewport).
<body> Body Contains all the visible content of the page.
lang=”en” English is an attribute that is most commonly placed on the opening <html> tag
Languages of an HTML document
Example
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>My Reformatted Page</title>
</head>
<body>
</body>
</html>
✍️Text and Typography Codes
These codes are used to structure and format text within the <body>.
Code Name Description
<h1> to <h6> Headings Defines section headings (h1 being the most important).
<p> Paragraph Defines a block of text/paragraph.
<br> Line Break Inserts a single line break.
<hr> Thematic Break Inserts a horizontal rule to separate content.
<strong> Strong Indicates text that is of strong importance (usually displayed as bold).
<em> Emphasis Indicates emphasized text (usually displayed as italic).
<span> Span A generic inline container for phrasing content.
<blockquote> Block Quote Defines a section that is quoted from another source.
<pre> Preformatted Text Displays text exactly as written, preserving spaces and line breaks.
Example
<body>
<h1>Main Article Title (h1)</h1>
<h2>Section Subtitle (h2)</h2>
<h3>Heading 3</h3>
<h4>Heading 3</h4>
<h5>Heading 3</h5>
<h6>Heading 3</h6>
<p>This is a standard paragraph of text. It contains some
<strong>important facts</strong> and some <em>emphasized words</em>.</p>
<p>This is a second paragraph.<br>
The text after the line break is on a new line, but still within the same paragraph.</p>
<hr> <p>The <span style="color: blue;">blue word here</span> is styled using a span tag.</p>
<blockquote>
"The best way to predict the future is to create it." - Peter Drucker
</blockquote>
<pre>
This text
is pre-formatted.
All spaces and line breaks are preserved.
</pre>
</body>
🎯 Comments, Line Break, Horizontal
Code Name Description
<! - - Comment - -> Comment Text placed inside this tag is ignored by the browser and will not
appear on the rendered page.
/* Comment */ Comment Text placed inside this tag is ignored by the browser and will not
appear on the rendered page.
<br> Line Forces the text that follows it to start on a new line.
Break
<hr> Horizontal Renders a visible horizontal line on the page, signifying a change in
Rule topic or section.
Example:
<body>
<main>
<p>
<!-- This is an example of a comment -->
Our Address:<br>
123 Main Street<br>
Tech City, Web 54321
</p>
<hr>
<h2>Send a Message</h2>
</main>
</body>
🔗 Links and Media Codes
These codes allow you to connect pages and embed external content.
Code Name Description
<a> Anchor Defines a hyperlink, used to link to other pages or resources.
<link> External Links the document to an external resource, most often a CSS file.
Resource
<img> Image Used to embed an image into the document.
<source Media Source Specifies multiple media resources for <picture>, <audio>, or <video>.
>
<video> Video Embeds a video player into the document.
<audio> Audio Embeds an audio player into the document.
<iframe> Inline Frame Embeds another HTML document within the current document (e.g.,
YouTube video embeds).
Example:
<body>
<p>Visit our <a href="[Link]" target="_blank">About Us page</a> (opens in new tab).</p>
<p>
<img src="images/[Link]" alt="Company logo." width="150" height="50">
</p>
<video controls width="300">
<source src="media/promo.mp4" type="video/mp4">
<source src="media/[Link]" type="video/webm">
</video>
<iframe
src="[Link]
width="600"
height="450"
loading="lazy">
</iframe>
</body>
📑 Lists and Table Codes
These codes are used to structure data into lists and tabular formats.
List Codes
Cod Name Description Example Attribute Use
e
<ul> Unordered List Defines a list of items (usually rendered with bullet N/A
points).
<ol> Ordered List Defines a list of items (usually rendered with <ol type="A"> (uses capital
numbers or letters). letters)
<li> List Item Defines an item within either an <ol> or <ul> list. N/A
<dl> Description List Defines a list of terms and their descriptions. N/A
<dt> Definition Term Defines the term (name) in a description list. N/A
<dd> Definition Defines the description (value) associated with a N/A
Description term.
Example:
<body>
<h3>Shopping List</h3>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>
<h3>Instructions</h3>
<ol start="4">
<li>Mix ingredients.</li>
<li>Bake for 30 minutes.</li>
</ol>
</body>
Table Codes
Code Name Description
<table> Table The main container for tabular data.
<tr> Table Row Defines a row in a table.
<th> Table Header Defines a header cell in a table (usually bold and centered).
<td> Table Data Defines a standard data cell in a table.
<thead> Table Head Groups the header content in a table.
<tbody> Table Body Groups the body content in a table.
Example:
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Customers</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$12,500</td>
<td>250</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>310</td>
</tr>
</tbody>
</table>
</body>
📦 Semantic and Container Codes (Layout)
These codes are used to divide the page into logical, meaningful sections, replacing generic tags like <div> for
better accessibility and SEO.
Code Name Description
<div> Division A generic block-level container for grouping content.
<header> Header Introductory content, typically containing navigation and branding.
<nav> Navigation Contains navigation links to other pages or parts of the current page.
<main> Main The dominant content of the <body> of a document.
<article> Article Independent, self-contained content (like a blog post or news story).
<section Section A generic section of a document, often with a heading.
>
<aside> Aside Content tangentially related to the content around it (e.g., a sidebar).
<footer> Footer Contains authorship information, copyright, or contact details.
Example 1:
<body>
<header>
<h1>My Awesome Blog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Latest Posts</h2>
<article>
<h3>Post Title One</h3>
<p>This is the first independent article content...</p>
</article>
<article>
<h3>Post Title Two</h3>
<p>This is the second independent article content...</p>
</article>
</section>
</main>
<aside>
<h3>About the Author</h3>
<p>I write about technology.</p>
</aside>
<footer>
<p>© 2025 All Rights Reserved.</p>
</footer>
</body>
Example 2:
<body>
<div id="wrapper"> <div class="card">
<h2>Product A</h2>
<p>This is the description for Product A.</p>
<button>Buy Now</button>
</div>
<div class="sidebar">
<h3>Recent News</h3>
<p>Check out our latest updates!</p>
</div>
</div>
</body>
