HTML5 is the latest version of HTML (HyperText Markup Language), the standard language used to create and structure web pages. Introduced by the W3C and WHATWG, HTML5 brings powerful new features that enhance the way content is presented on the web, making it more interactive, semantic, and multimedia-rich.
HTML5 is designed to work across all devices from desktops to smartphones, without the need for additional plugins like Flash. It includes new elements, attributes, APIs, and better support for audio, video, graphics, and user interactions.
Document Metadata Tags
Used in the <head> to define the document’s metadata.
| Tag | Description | Common Attributes |
| <html> | Root of the HTML document | lang, xmlns |
| <head> | Container for metadata | None |
| <title> | Defines the page title (shown in the browser tab) | None |
| <meta> | Defines metadata like charset, description, etc. | charset, name, content, http-equiv |
| <link> | Links external resources (e.g., CSS) | rel, href, type, media |
| <style> | Embeds CSS | type, media, scoped |
| <base> | Sets base URL for relative URLs | href, target |
| <script> | Embeds or links JavaScript | src, type, async, defer, crossorigin |
| <noscript> | Fallback for when JavaScript is disabled | None |
Sectioning Tags
| Tag | Description | Common Attributes |
| <body> | Main content container | onload, onunload, class, id |
| <header> | Introductory content or navigational links | class, id, style |
| <nav> | Navigation links | class, id, style |
| <section> | Represents a section with a heading | class, id, style |
| <article> | Self-contained content (like a blog post) | class, id, style |
| <aside> | Sidebar or related content | class, id, style |
| <footer> | Footer for a section or page | class, id, style |
| <main> | Main content (only one per page) | class, id, style |
Text Content Tags
Used to define headings, paragraphs, lists, and other textual elements.
| Tag | Description | Common Attributes |
| <h1> to <h6> | Headings (h1 is the most important) | class, id, style |
| <p> | Paragraph | class, id, style |
| <br> | Line break | clear (deprecated) |
| <hr> | Thematic break (horizontal rule) | class, id, style |
| <pre> | Preformatted text | class, id, style |
| <blockquote> | Quoted section | cite |
| <ol> | Ordered list | reversed, start, type |
| <ul> | Unordered list | None |
| <li> | List item | value (for <ol>) |
| <dl> | Description list | None |
| <dt> | Term in description list | None |
| <dd> | Description of term | None |
| <figure> | Media and its caption | None |
| <figcaption> | Caption for <figure> | None |
| <div> | Generic container | class, id, style |
| <span> | Inline container | class, id, style |
Inline Text Semantics Tags
Add meaning or style to inline text.
| Tag | Description | Common Attributes |
| <a> | Creates a hyperlink. | href, target, rel, download, type, hreflang |
| <abbr> | Abbreviation or acronym with a tooltip. | title |
| <b> | Draws attention (visually bold). | Global attributes |
| <bdi> | Isolates a part of text for bidirectional formatting. | Global attributes |
| <bdo> | Overrides text direction. | dir |
| <cite> | Cites a title of a work (e.g., book, movie). | Global attributes |
| <code> | Inline code representation. | Global attributes |
| <data> | Links a piece of content to machine-readable value. | value |
| <dfn> | Marks a term being defined. | title (for tooltip), Global attributes |
| <em> | Emphasizes text (usually italic). | Global attributes |
| <i> | Italicizes text (without semantic meaning). | Global attributes |
| <kbd> | Represents keyboard input. | Global attributes |
| <mark> | Highlights text. | Global attributes |
| <q> | Short inline quotation. | cite |
| <rp> | Provides parentheses for browsers that don’t support Ruby annotations. | Global attributes |
| <rt> | Defines pronunciation in Ruby annotation. | Global attributes |
| <ruby> | For Ruby annotation (East Asian typography). | Global attributes |
| <s> | Indicates text that is no longer accurate. | Global attributes |
| <samp> | Represents sample output. | Global attributes |
| <small> | Displays less important text (smaller font). | Global attributes |
| <span> | Generic inline container. | id, class, style, title, lang, etc. |
| <strong> | Strong emphasis (usually bold). | Global attributes |
| <sub> | Subscript text. | Global attributes |
| <sup> | Superscript text. | Global attributes |
| <time> | Represents a date or time. | datetime |
| <u> | Underlined text (for non-emphasis). | Global attributes |
| <var> | Denotes a variable in code or math. | Global attributes |
| <wbr> | Word break opportunity. | No attributes |
Forms Tags
Used to collect and submit user input.
| Tag | Description | Common Attributes |
| <form> | Container for form elements and data submission. | action, method, enctype, target, autocomplete, novalidate, name, rel, accept-charset |
| <input> | Single-line input field (text, number, email, etc.). | type, name, value, placeholder, required, readonly, disabled, maxlength, min, max, step, pattern, autocomplete, autofocus, checked, multiple, size, id, list, form |
| <textarea> | Multi-line text input. | name, rows, cols, placeholder, maxlength, required, readonly, disabled, wrap, autocomplete, autofocus, form |
| <button> | Clickable button (submit, reset, or generic). | type, name, value, disabled, autofocus, form |
| <select> | Drop-down list. | name, required, multiple, disabled, autofocus, size, form |
| <option> | Defines options in <select> or <datalist>. | value, label, selected, disabled |
| <optgroup> | Groups options in a dropdown. | label, disabled |
| <label> | Label for a form control. | for, form |
| <fieldset> | Groups related elements in a form. | disabled, form, name |
| <legend> | Caption for a <fieldset>. | Global attributes |
| <datalist> | Provides autocomplete options for an <input>. | id (linked with list attribute of <input>) |
| <output> | Displays the result of a calculation. | for, form, name |
| <meter> | Shows a scalar measurement within a known range. | value, min, max, low, high, optimum, form |
| <progress> | Indicates the progress of a task. | value, max |
Media Tags
Used to embed and control media content.
| Tag | Description | Common Attributes |
| <audio> | Embeds audio content in the page. | src, controls, autoplay, loop, muted, preload, type |
| <video> | Embeds video content in the page. | src, poster, controls, autoplay, loop, muted, preload, width, height, playsinline |
| <source> | Specifies media source for <audio> or <video>. | src, type, media |
| <track> | Specifies text tracks for <video> and <audio>. | src, kind, srclang, label, default |
| <embed> | Embeds external resources (like media or PDF). | src, type, width, height |
| <object> | Embeds external resources like media, PDF, applets. | data, type, width, height, name, form, usemap |
| <param> | Defines parameters for <object>. | name, value |
Graphics Tags
Used for drawing and graphics.
| Tag | Description | Common Attributes |
| <canvas> | Used to draw graphics (via JavaScript). | width, height, id, class, style |
| <svg> | Container for SVG graphics. | width, height, viewBox, xmlns, fill, stroke |
Common SVG Tags with Attributes
| Tag | Description | Common Attributes |
| <circle> | Draws a circle. | cx, cy, r, fill, stroke, stroke-width |
| <rect> | Draws a rectangle. | x, y, width, height, rx, ry, fill, stroke |
| <ellipse> | Draws an ellipse. | cx, cy, rx, ry, fill, stroke |
| <line> | Draws a straight line. | x1, y1, x2, y2, stroke, stroke-width |
| <polyline> | Series of connected lines. | points, fill, stroke |
| <polygon> | Closed shape of connected lines. | points, fill, stroke |
| <path> | Draws complex shapes via path data. | d, fill, stroke, stroke-width, fill-rule |
| <text> | Adds text to SVG. | x, y, dx, dy, font-size, fill, text-anchor |
| <tspan> | Groups inline text within <text>. | x, y, dx, dy, fill |
| <g> | Groups SVG elements. | id, transform, class, style |
| <defs> | Defines reusable elements. | Global attributes |
| <use> | Reuses elements defined inside <defs>. | href, x, y |
| <symbol> | Reusable graphic symbol (used with <use>). | id, viewBox, preserveAspectRatio |
| <image> | Embeds bitmap images in SVG. | href, x, y, width, height, preserveAspectRatio |
| <clipPath> | Defines a clipping path. | id, clipPathUnits |
| <mask> | Defines a masking region. | id, x, y, width, height, maskUnits |
| <linearGradient> | Defines linear color gradient. | id, x1, y1, x2, y2, gradientUnits |
| <radialGradient> | Defines radial color gradient. | id, cx, cy, r, fx, fy, gradientUnits |
| <stop> | Defines color stops in gradients. | offset, stop-color, stop-opacity |
Table Tags
Used to display tabular data.
| Tag | Description | Common Attributes |
| <table> | Defines a table container. | border, summary (deprecated), width, cellspacing, cellpadding, align (deprecated), Global attributes |
| <caption> | Adds a title or caption for the table. | align (deprecated), Global attributes |
| <thead> | Groups the header content in a table. | Global attributes |
| <tbody> | Groups the body content in a table. | Global attributes |
| <tfoot> | Groups the footer content in a table. | Global attributes |
| <tr> | Defines a row in the table. | align (deprecated), valign (deprecated), bgcolor (deprecated), Global attributes |
| <td> | Defines a data cell. | colspan, rowspan, headers, align (deprecated), valign (deprecated), bgcolor (deprecated), Global attributes |
| <th> | Defines a header cell. | scope, colspan, rowspan, headers, abbr, align (deprecated), valign (deprecated), Global attributes |
| <col> | Specifies column properties for each column within a <colgroup>. | span, width, align (deprecated), valign (deprecated), Global attributes |
| <colgroup> | Groups one or more <col> elements for column styling. | span, Global attributes |
Scripting Tags
Used for scripts and dynamic behavior.
| Tag | Description |
| <script> | Embeds JavaScript. |
| <noscript> | Fallback content if scripts are disabled. |
| <template> | Declares reusable HTML fragments. |
| <slot> | Placeholder in Web Components. |
