1. Home
  2. /
  3. HTML
  4. /
  5. HTML5 Semantic Structure

HTML5 Semantic Structure - HTML Typing CST Test

Loading…

HTML5 Semantic Structure — HTML Code

Demonstrates modern HTML5 semantic elements and document 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>&copy; 2024 My Website. All rights reserved.</p>
	</footer>

	<script src="script.js"></script>
</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.

More HTML Typing Exercises

HTML5 Article and Section LayoutHTML5 Form ExampleHTML5 Header and FooterHTML5 Navigation MenuHTML5 Aside ExampleHTML5 Multimedia ExampleHTML5 Figure and FigcaptionHTML5 Article with Time ElementHTML5 Semantic Layout ExampleHTML5 Table Example

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher