⚡ HTML Quick Reference

Quick lookup guide for all HTML tags and attributes

📄 Document Structure

Tag Purpose Example
<!DOCTYPE html> Document type declaration <!DOCTYPE html>
<html> Root element <html lang="en">
<head> Metadata container <head></head>
<body> Document content <body></body>
<title> Page title <title>Page Title</title>
<meta> Metadata <meta charset="UTF-8">

📝 Text Elements

Tag Purpose
<h1> - <h6> Headings (most to least important)
<p> Paragraph
<br> Line break
<hr> Horizontal rule
<strong> Important text (bold)
<em> Emphasized text (italic)
<b> Bold text
<i> Italic text
<u> Underlined text
<small> Smaller text
<mark> Highlighted text
<code> Code snippet
<pre> Preformatted text
<blockquote> Long quotation
<q> Inline quotation

📋 Lists

Tag Purpose Example
<ul> Unordered list <ul><li>Item</li></ul>
<ol> Ordered list <ol><li>Item</li></ol>
<li> List item <li>Item text</li>
<dl> Definition list <dl><dt>Term</dt><dd>Def</dd></dl>

🔗 Links & Media

Tag Purpose Example
<a> Hyperlink <a href="url">Link</a>
<img> Image <img src="image.jpg" alt="desc">
<audio> Audio content <audio src="audio.mp3"></audio>
<video> Video content <video src="video.mp4"></video>
<source> Media source <source src="file" type="type">
<picture> Responsive image <picture><source><img></picture>

📋 Forms

Tag Purpose Example
<form> Form container <form action="/submit" method="POST">
<input> Input field <input type="text" name="field">
<textarea> Multi-line text <textarea rows="5"></textarea>
<select> Dropdown list <select><option></option></select>
<option> Select option <option value="val">Label</option>
<label> Form label <label for="id">Label</label>
<button> Button <button type="submit">Click</button>

📊 Tables

Tag Purpose Example
<table> Table container <table></table>
<tr> Table row <tr></tr>
<td> Table data cell <td>Data</td>
<th> Table header cell <th>Header</th>
<thead> Table header section <thead></thead>
<tbody> Table body section <tbody></tbody>
<tfoot> Table footer section <tfoot></tfoot>

🏗️ Semantic Elements

Tag Purpose
<header> Page or section header
<nav> Navigation links
<main> Main content
<article> Independent article
<section> Content section
<aside> Sidebar content
<footer> Page or section footer
<figure> Self-contained illustration
<figcaption> Figure caption
<time> Date and time

⌨️ Input Types

Type Purpose Example
text Single line text <input type="text">
email Email address <input type="email">
password Password input <input type="password">
number Number <input type="number">
checkbox Checkbox <input type="checkbox">
radio Radio button <input type="radio">
submit Submit button <input type="submit">
reset Reset form <input type="reset">
date Date picker <input type="date">
time Time picker <input type="time">
file File upload <input type="file">
search Search box <input type="search">

🎯 Common Attributes

Attribute Purpose Example
id Unique element identifier id="header"
class Element class class="main-title"
style Inline CSS style="color: red;"
href Link URL href="page.html"
src Resource source src="image.jpg"
alt Alternative text alt="Image description"
title Tooltip text title="Hover text"
name Form element name name="username"
value Element value value="default"
required Required field required
disabled Disabled element disabled
data-* Custom data data-id="123"

🎓 Quick Tips

  • Always use semantic HTML when possible
  • Include alt text for images
  • Use proper heading hierarchy
  • Always close your tags
  • Validate your HTML regularly
  • Use meaningful class and id names
  • Keep your code clean and indented