HTML & CSS · Quick Reference

Lesson 1 — Introduction to HTML Cheat Sheet

HTML & CSS

In one line: HTML (HyperText Markup Language) is the language that gives structure to every webpage on the internet. It's not a programming language — it doesn't calculate or make decisions....

Key Ideas

1What is HTML?. HTML (HyperText Markup Language) is the language that gives structure to every webpage on the internet. It's not a programming language — it doesn't calculate or make ...

2Anatomy of an HTML Element. An HTML element consists of an opening tag, content, and a closing tag. Tags are written in angle brackets < >. The closing tag has a forward slash before the ta...

3The HTML Document Structure. Every HTML file follows the same basic structure. This boilerplate is so important that every code editor has a shortcut to generate it instantly (type ! and press Tab...

4Your First Complete Webpage. Let's build a real, complete webpage right now. Save this as index.html, open it in your browser, and you have a functioning website — no server, no framework, no tool...

5How Browsers Render HTML. When you open an HTML file, the browser reads it top-to-bottom and builds a DOM (Document Object Model) — a tree of all the elements on the page. Then it paints the tr...

Code Examples

<!-- Elements with content (need closing tag) -->
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<a href="https://bwb.com">Click here</a>

<!-- Void elements (self-closing, no content) -->...

<!-- 1. DOCTYPE: tells browser this is HTML5 -->
<!DOCTYPE html>

<!-- 2. Root element: wraps everything -->
<html lang="en">

<!-- 3. HEAD: metadata, title, links (not visible) -->
<head>
  <meta charset="UTF-...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ali's Webpage</title>
</head>
<body>

  <h1&...