Introduction

HTML provides semantic structure; CSS adds presentation. Start with a minimal, valid document and grow from there.

<!doctype html>
<html lang="en">
  <head>...</head>
  <body>Hello</body>
</html>

Page Structure

<header>Brand</header>
<nav>...</nav>
<main>Content</main>
<footer>©</footer>

Text & Links

<h1>Heading</h1>
<p>Paragraph with a <a href="#">link</a>.</p>

Layout with CSS Grid

.grid{{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}}

Forms

<form>
  <label>Name <input type="text"></label>
  <button>Submit</button>
</form>

Best Practices

  • Use semantic tags.
  • Ensure contrast & accessible labels.
  • Prefer CSS classes over inline styles.