Learn HTML - 11 Code Examples & CST Typing Practice Test
HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It defines the elements, attributes, and structure of web pages and is the backbone of the World Wide Web.
View all 11 HTML code examples →
Learn HTML with Real Code Examples
Updated Nov 21, 2025
Code Sample Descriptions
HTML5 Semantic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern HTML5 Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<h1>My Website</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h2>Welcome to Our Site</h2>
<p>This is a modern HTML5 document with semantic elements.</p>
</section>
<section id="features">
<article>
<h3>Feature One</h3>
<p>Description of the first feature.</p>
</article>
<article>
<h3>Feature Two</h3>
<p>Description of the second feature.</p>
</article>
</section>
</main>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Demonstrates modern HTML5 semantic elements and document structure.
HTML5 Article and Section Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Articles and Sections</title>
</head>
<body>
<main>
<section id="news">
<h2>Latest News</h2>
<article>
<h3>News Title 1</h3>
<p>Content for the first news article.</p>
</article>
<article>
<h3>News Title 2</h3>
<p>Content for the second news article.</p>
</article>
</section>
</main>
</body>
</html>
Demonstrates using `<article>` and `<section>` elements for content organization.
HTML5 Form Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
</head>
<body>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
</body>
</html>
Demonstrates a semantic form with labels, inputs, and a submit button.
HTML5 Header and Footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Header & Footer Example</title>
</head>
<body>
<header>
<h1>Website Header</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<p>Main content goes here.</p>
</main>
<footer>
<p>© 2024 Example.com</p>
</footer>
</body>
</html>
Shows proper use of `<header>` and `<footer>` elements.
HTML5 Navigation Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Example</title>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
Shows a semantic navigation menu using `<nav>` and `<ul>` elements.
HTML5 Aside Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aside Example</title>
</head>
<body>
<main>
<p>Main article content goes here.</p>
</main>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</aside>
</body>
</html>
Demonstrates using `<aside>` for related content or sidebars.
HTML5 Multimedia Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multimedia Example</title>
</head>
<body>
<video controls width="320">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Shows embedding audio and video using HTML5 semantic elements.
HTML5 Figure and Figcaption
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Figure Example</title>
</head>
<body>
<figure>
<img src="image.jpg" alt="A beautiful view">
<figcaption>Beautiful scenery at sunset.</figcaption>
</figure>
</body>
</html>
Demonstrates using `<figure>` and `<figcaption>` for images with captions.
HTML5 Article with Time Element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Article Time Example</title>
</head>
<body>
<article>
<h2>News Update</h2>
<p>Published on <time datetime="2024-10-04">October 4, 2024</time></p>
<p>Article content goes here.</p>
</article>
</body>
</html>
Uses `<time>` element for marking up dates and times within an article.
HTML5 Semantic Layout Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Layout</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Main Section</h2>
<p>Content goes here.</p>
</section>
</main>
<aside>
<h3>Sidebar</h3>
<p>Additional content.</p>
</aside>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
Full page layout using `<header>`, `<nav>`, `<main>`, `<aside>`, and `<footer>`.
HTML5 Table Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Example</title>
</head>
<body>
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>25</td></tr>
<tr><td>Bob</td><td>30</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">Total People: 2</td></tr>
</tfoot>
</table>
</body>
</html>
Shows a semantic HTML5 table with header, body, and footer sections.
Frequently Asked Questions about HTML
What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It defines the elements, attributes, and structure of web pages and is the backbone of the World Wide Web.
What are the primary use cases for HTML?
Structuring content on websites and web applications. Embedding multimedia elements like images, audio, and video. Creating forms for user input. Defining semantic sections for SEO and accessibility. Integrating with CSS and JavaScript for complete web solutions
What are the strengths of HTML?
Universal standard for web content. Semantic structure improves accessibility and SEO. Easy to learn and widely supported. Integrates seamlessly with CSS and JavaScript. Lightweight and human-readable
What are the limitations of HTML?
Cannot perform complex computations alone. Limited styling capabilities without CSS. No built-in interactivity without JavaScript. Dependent on browser rendering for display. Older versions may have compatibility issues
How can I practice HTML typing speed?
CodeSpeedTest offers 11+ real HTML code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.