HTML5 Semantic Layout Example - HTML Typing CST Test
Loading…
HTML5 Semantic Layout Example — HTML Code
Full page layout using `<header>`, `<nav>`, `<main>`, `<aside>`, and `<footer>`.
<!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>HTML Language Guide
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.
Primary Use Cases
- ▸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
Notable Features
- ▸Semantic tags (e.g., `<header>`, `<footer>`, `<article>`)
- ▸Hyperlinking using `<a>` tags
- ▸Embedding media with `<img>`, `<video>`, and `<audio>`
- ▸Form and input elements for user interaction
- ▸Cross-browser and platform support
Origin & Creator
Developed by Tim Berners-Lee in 1991 as a core part of the World Wide Web project.
Industrial Note
HTML is specialized for creating and structuring web content rather than performing computation or complex application logic.