HTML gives web pages meaning and structure. Understanding it well improves accessibility, development speed and how content is interpreted by browsers and crawlers.
What you will learn
The HTML document
Every page starts with a doctype, an html element, and descriptive head and body elements. Use a unique page title and a meaningful description for important pages.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>My Page</title></head>
<body><h1>Hello!</h1></body>
</html>Semantic elements
Use header, nav, main, article, section and footer for their intended purposes. Proper headings make long pages easier to scan, and descriptive link text makes navigation clearer.
<main>
<article>
<h1>My First Article</h1>
<p>Meaningful content goes here.</p>
</article>
</main>Forms and accessibility
Associate labels with fields, choose the correct input type, and provide instructions and visible feedback. Native elements support keyboard users better than custom controls in many cases.
<label for="email">Email address</label>
<input id="email" type="email" required>Practice the concepts
Use a related utility to experiment, check examples, and build a small project.
Open HTML live preview ↗