Basic Structure

Every HTML page starts with a basic structure. The <!DOCTYPE> declares the document type, <html> wraps the page, <head> contains meta info, and <body> contains content.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Headings

Headings are used for titles and subtitles. There are 6 levels, from <h1> (most important) to <h6> (least important).

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section</h3>

Text Formatting

Use these tags to style text: <p> for paragraphs, <b> or <strong> for bold, <i> or <em> for italics.

<p>This is a <strong>bold</strong> word.</p>

Links

Links connect pages. Use the href attribute to point to a URL.

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

Images

The <img> tag displays images. Always include an alt attribute for accessibility.

<img src="image.jpg" alt="A description">

Lists

HTML has ordered (<ol>) and unordered lists (<ul>).

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

Tables

Tables display tabular data. Use <tr> for rows,<th> for headers, and <td> for cells.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>20</td>
  </tr>
</table>

Forms

Forms collect user input. Common elements: <input>, <textarea>, <select>, and <button>.

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

Semantic Tags

Semantic tags describe meaning. Examples: <header>, <footer>, <article>, <section>.

<header>Welcome</header>
<section>Content here</section>
<footer>Copyright</footer>

Media

Use <audio> and <video> to embed media with controls.

<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

How to use this page

Start with the basic structure.
Learn text, headings, links, and images to build simple pages.
Move to lists, tables, and forms to add interactivity and data.
Use semantic tags for cleaner, accessible, and SEO-friendly pages.

HTML Cheatsheet