HTML Basics
Basic HTML Structure
<!-- Tells browser this is an HTML5 document -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Note: All HTML documents must start with <!DOCTYPE html> declaration.
Headings & Paragraphs
<!-- Headings -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Third Level Heading</h3>
<h4>Fourth Level Heading</h4>
<h5>Fifth Level Heading</h5>
<h6>Sixth Level Heading</h6>
<!-- Paragraphs -->
<p>This is a paragraph.</p>
<p>This is another paragraph with a <br> line break.</p>
<!-- Horizontal Rule -->
<hr>
<!-- Preformatted Text -->
<pre>
This text will
preserve both spaces
and line breaks.
</pre>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Third Level Heading</h3>
<h4>Fourth Level Heading</h4>
<h5>Fifth Level Heading</h5>
<h6>Sixth Level Heading</h6>
<!-- Paragraphs -->
<p>This is a paragraph.</p>
<p>This is another paragraph with a <br> line break.</p>
<!-- Horizontal Rule -->
<hr>
<!-- Preformatted Text -->
<pre>
This text will
preserve both spaces
and line breaks.
</pre>
Text Formatting
<!-- Bold Text -->
<b>Bold Text</b> or <strong>Important Text</strong>
<!-- Italic Text -->
<i>Italic Text</i> or <em>Emphasized Text</em>
<!-- Underlined Text -->
<u>Underlined Text</u>
<!-- Marked/Highlighted Text -->
<mark>Highlighted Text</mark>
<!-- Small Text -->
<small>Smaller Text</small>
<!-- Deleted Text -->
<del>Deleted Text</del>
<!-- Inserted Text -->
<ins>Inserted Text</ins>
<!-- Subscript and Superscript -->
H<sub>2</sub>O <sup>2+</sup>
<b>Bold Text</b> or <strong>Important Text</strong>
<!-- Italic Text -->
<i>Italic Text</i> or <em>Emphasized Text</em>
<!-- Underlined Text -->
<u>Underlined Text</u>
<!-- Marked/Highlighted Text -->
<mark>Highlighted Text</mark>
<!-- Small Text -->
<small>Smaller Text</small>
<!-- Deleted Text -->
<del>Deleted Text</del>
<!-- Inserted Text -->
<ins>Inserted Text</ins>
<!-- Subscript and Superscript -->
H<sub>2</sub>O <sup>2+</sup>
Links & Images
<!-- Basic Link -->
<a href="https://www.example.com">Visit Example</a>
<!-- Link with Target -->
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
<!-- Email Link -->
<a href="mailto:someone@example.com">Send Email</a>
<!-- Phone Link -->
<a href="tel:+1234567890">Call Us</a>
<!-- Anchor Link -->
<a href="#section1">Go to Section 1</a>
<div id="section1">Section Content</div>
<!-- Basic Image -->
<img src="image.jpg" alt="Description of image">
<!-- Image with Dimensions -->
<img src="image.jpg" alt="Description" width="500" height="300">
<a href="https://www.example.com">Visit Example</a>
<!-- Link with Target -->
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
<!-- Email Link -->
<a href="mailto:someone@example.com">Send Email</a>
<!-- Phone Link -->
<a href="tel:+1234567890">Call Us</a>
<!-- Anchor Link -->
<a href="#section1">Go to Section 1</a>
<div id="section1">Section Content</div>
<!-- Basic Image -->
<img src="image.jpg" alt="Description of image">
<!-- Image with Dimensions -->
<img src="image.jpg" alt="Description" width="500" height="300">
Note: Always include the
alt attribute for accessibility and SEO.
Lists & Tables
Lists
<!-- Unordered List -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered List -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Ordered List with Type -->
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
<!-- Description List -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<!-- Nested List -->
<ul>
<li>First item
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Second item</li>
</ul>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered List -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Ordered List with Type -->
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
<!-- Description List -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<!-- Nested List -->
<ul>
<li>First item
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Second item</li>
</ul>
Tables
<!-- Basic Table -->
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
</table>
<!-- Table with Caption and Structure -->
<table>
<caption>Employee Details</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>John Doe</td>
<td>IT</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Employees: 1</td>
</tr>
</tfoot>
</table>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
</table>
<!-- Table with Caption and Structure -->
<table>
<caption>Employee Details</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>John Doe</td>
<td>IT</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Employees: 1</td>
</tr>
</tfoot>
</table>
Forms & Inputs
Form Structure
<!-- Basic Form -->
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Register">
</form>
<!-- Form with Fieldset and Legend -->
<form>
<fieldset>
<legend>Personal Information</legend">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
</form>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Register">
</form>
<!-- Form with Fieldset and Legend -->
<form>
<fieldset>
<legend>Personal Information</legend">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
</form>
Input Types
<!-- Text Input -->
<input type="text" name="username" placeholder="Enter username">
<!-- Email Input -->
<input type="email" name="email" placeholder="Enter email">
<!-- Password Input -->
<input type="password" name="password" placeholder="Enter password">
<!-- Number Input -->
<input type="number" name="quantity" min="1" max="10">
<!-- Date Input -->
<input type="date" name="birthday">
<!-- Checkbox -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Radio Buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Select Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<!-- File Upload -->
<input type="file" id="myfile" name="myfile">
<input type="text" name="username" placeholder="Enter username">
<!-- Email Input -->
<input type="email" name="email" placeholder="Enter email">
<!-- Password Input -->
<input type="password" name="password" placeholder="Enter password">
<!-- Number Input -->
<input type="number" name="quantity" min="1" max="10">
<!-- Date Input -->
<input type="date" name="birthday">
<!-- Checkbox -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Radio Buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Select Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<!-- File Upload -->
<input type="file" id="myfile" name="myfile">
Semantic HTML
Semantic Elements
<!-- Basic Page Structure with Semantic Elements -->
<body>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
<section>
<h3>Section Title</h3>
<p>Section content...</p>
</section>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</body>
<body>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
<section>
<h3>Section Title</h3>
<p>Section content...</p>
</section>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</body>
Note: Semantic HTML improves accessibility, SEO, and makes code easier to understand.
More Semantic Elements
<!-- Figure with Caption -->
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Caption for the image</figcaption>
</figure>
<!-- Details and Summary -->
<details>
<summary>Click to expand</summary>
<p>Hidden content that appears when expanded.</p>
</details>
<!-- Mark Element -->
<p>Search results for <mark>HTML5</mark> syntax.</p>
<!-- Time Element -->
<p>The event is on <time datetime="2023-12-25">Christmas Day</time>.</p>
<!-- Navigation -->
<nav>
<ul>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/js/">JavaScript</a></li>
</ul>
</nav>
<!-- Section vs Article -->
<section>
<h2>Blog Posts</h2>
<article>
<h3>Post Title 1</h3>
<p>Post content...</p>
</article>
<article>
<h3>Post Title 2</h3>
<p>Post content...</p>
</article>
</section>
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Caption for the image</figcaption>
</figure>
<!-- Details and Summary -->
<details>
<summary>Click to expand</summary>
<p>Hidden content that appears when expanded.</p>
</details>
<!-- Mark Element -->
<p>Search results for <mark>HTML5</mark> syntax.</p>
<!-- Time Element -->
<p>The event is on <time datetime="2023-12-25">Christmas Day</time>.</p>
<!-- Navigation -->
<nav>
<ul>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/js/">JavaScript</a></li>
</ul>
</nav>
<!-- Section vs Article -->
<section>
<h2>Blog Posts</h2>
<article>
<h3>Post Title 1</h3>
<p>Post content...</p>
</article>
<article>
<h3>Post Title 2</h3>
<p>Post content...</p>
</article>
</section>
Media Elements
Audio & Video
<!-- Audio Element -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<!-- Video Element -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- Video with Poster -->
<video controls poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
<!-- Embedding YouTube Video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Embedding Google Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1840523769665!2d-73.9876141845941!3d40.74824397932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1580401041328!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<!-- Video Element -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- Video with Poster -->
<video controls poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
<!-- Embedding YouTube Video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Embedding Google Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1840523769665!2d-73.9876141845941!3d40.74824397932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1580401041328!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>
Canvas & SVG
<!-- Canvas Element -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<!-- Simple SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<!-- More Complex SVG -->
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
<!-- SVG with Text -->
<svg height="30" width="200">
<text x="0" y="15" fill="red">SVG Text Example</text>
</svg>
<!-- SVG with Multiple Shapes -->
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="125" cy="95" r="50" fill="blue" />
</svg>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<!-- Simple SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<!-- More Complex SVG -->
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
<!-- SVG with Text -->
<svg height="30" width="200">
<text x="0" y="15" fill="red">SVG Text Example</text>
</svg>
<!-- SVG with Multiple Shapes -->
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="125" cy="95" r="50" fill="blue" />
</svg>
Advanced HTML
Meta Tags & SEO
<!-- Essential Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEO Meta Tags -->
<title>Page Title - Website Name</title>
<meta name="description" content="Brief description of the page content">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<!-- Open Graph Meta Tags (for social media) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description of page content">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://www.example.com/page">
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description of page content">
<meta name="twitter:image" content="image.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEO Meta Tags -->
<title>Page Title - Website Name</title>
<meta name="description" content="Brief description of the page content">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<!-- Open Graph Meta Tags (for social media) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description of page content">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://www.example.com/page">
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description of page content">
<meta name="twitter:image" content="image.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Accessibility (ARIA)
<!-- Landmark Roles -->
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
<!-- ARIA Labels and Descriptions -->
<button aria-label="Close menu">X</button>
<div aria-describedby="description">Content</div>
<p id="description">This describes the content above.</p>
<!-- ARIA Live Regions -->
<div aria-live="polite" id="status-message"></div>
<!-- ARIA Roles for Custom Widgets -->
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</div>
<!-- Skip Navigation Link -->
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main">...</main>
<!-- High Contrast Support -->
<button style="background-color: #000; color: #fff; border: 2px solid #fff;">
High Contrast Button
</button>
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
<!-- ARIA Labels and Descriptions -->
<button aria-label="Close menu">X</button>
<div aria-describedby="description">Content</div>
<p id="description">This describes the content above.</p>
<!-- ARIA Live Regions -->
<div aria-live="polite" id="status-message"></div>
<!-- ARIA Roles for Custom Widgets -->
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</div>
<!-- Skip Navigation Link -->
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main">...</main>
<!-- High Contrast Support -->
<button style="background-color: #000; color: #fff; border: 2px solid #fff;">
High Contrast Button
</button>
Note: ARIA should be used to enhance accessibility, not replace semantic HTML.