Learn it
Semantic tags say what content is: <header>, <nav>, <main>, <article>, <footer>. They help screen readers, search engines and other developers.
🧰 Tool: a free online editor such as CodePen or JSFiddle, or a plain text editor and your web browser.
Code examples
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>Jordan Codes</h1>
<nav><a href="#projects">Projects</a> <a href="#about">About</a></nav>
</header>
<main>
<section id="projects"><h2>Projects</h2></section>
<section id="about"><h2>About</h2></section>
</main>
<footer>Made with HTML</footer>
</body>
</html>Use a nickname, not your full name, on public sites.
Project: Portfolio skeleton
- Build the skeleton above.
- Add 3 project articles with a heading and paragraph each.
- Check every image has alt text.
Challenge: Validate your HTML at validator.w3.org.