HTML Tags Cheat Sheet
HTML tag cheat sheet: structure, text, form, media and semantic tags with names and notes for quick lookup while writing markup.
| Tag | Meaning |
|---|---|
| <a> | Anchor / hyperlink, jump or link |
| <img> | Embed image; src for URL, alt for alternative text |
| <div> | Generic block container, no semantics |
| <span> | Generic inline container, no semantics |
| <p> | Paragraph |
| <h1>-<h6> | Headings; h1 most important, decreasing |
| <ul> | Unordered list, with <li> |
| <ol> | Ordered list, with <li> |
| <li> | List item |
| <table> | Table, with thead/tbody/tr/th/td |
| <thead> | Table head |
| <tbody> | Table body |
| <tr> | Table row |
| <th> | Table header cell |
| <td> | Table data cell |
| <form> | Form container; action for submit URL |
| <input> | Input control; type decides kind |
| <button> | Button |
| <label> | Text label for a form control |
| <select> | Dropdown select |
| <textarea> | Multiline text input |
| <link> | Link external resource (e.g. stylesheet), usually in head |
| <meta> | Document metadata (charset, viewport, SEO) |
| <script> | Embed or reference JavaScript |
| <style> | Inline CSS |
| <header> | Header semantic section |
| <footer> | Footer semantic section |
| <nav> | Navigation semantic section |
| <section> | Independent section of the document |
| <article> | Self-contained distributable content (e.g. article) |
| <main> | Main page content (one per page) |
| <br> | Line break (void element) |
| <hr> | Thematic break (void element) |
| <strong> | Strong emphasis, semantically bold |
| <em> | Emphasis, semantically italic |
| <code> | Inline code snippet |
| <pre> | Preformatted text, preserves whitespace |
| <blockquote> | Block-level quotation |
| <iframe> | Embed another document/page |
| <video> | Embed video |
| <audio> | Embed audio |
| <canvas> | Draw graphics via script |
| <svg> | Scalable vector graphics |
Frequently Asked Questions
What is the difference between block and inline elements?
<div>, <p>, <h1>, <section> are block-level: they take a full line and accept width/height. <span>, <a>, <strong>, <code> are inline: they only occupy content width and do not force a line break. CSS controls layout today, but the semantics still matter.
When should I use <div> vs <section>?
Use <div> when there is no semantic content; use <section> when the content is a thematically independent part of the document (usually with a heading). Blindly wrapping everything in <div> hurts accessibility and SEO structure, but do not wrap every container in <section> either.
How do semantic tags help SEO?
<header>, <nav>, <main>, <article>, <footer> help search engines and assistive tech understand page structure, improving content extraction and accessibility scores compared to plain <div>.
What are void elements?
Elements with no closing tag, such as <img>, <br>, <hr>, <input>, <link>, <meta>. They cannot contain children and in HTML5 the trailing slash is optional.