HTML Basics

HTML (HyperText Markup Language) is the backbone of every web page. It describes the structure of a document — not its styling. CSS handles visuals, JavaScript handles behavior, and HTML holds everything together.

Something

Document structure

Every HTML page follows the same skeleton:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

<!doctype html> tells the browser this is modern HTML.
<head> holds metadata (title, charset, links to styles).
<body> holds everything visible on the page.

Elements and tags

An element is made of an opening tag, content, and a closing tag:

<p>This is a paragraph.</p>

Some elements are void (no closing tag), like images and line breaks:

<img src="cat.png" alt="A cat" />
<br />

Attributes

Attributes add extra info to an element. Every attribute follows name="value":

<a href="https://example.com" target="_blank">Visit</a>

Semantic HTML

Use elements that describe their meaning, not just their look:

<header> for the top of a page
<nav> for navigation links
<main> for the main content
<article> for a self-contained piece of content
<footer> for the bottom of a page

Semantic HTML helps accessibility, SEO, and your own sanity when debugging.