app.imakestuffup.com

HTML Tag Reference Guide

A comprehensive list of HTML tags, expanded with definitions and best practices for modern web development.

Quick Navigation

1. Basic Structure Tags 2. Text Formatting Tags 3. Heading Tags 4. Hyperlink & Navigation Tags 5. Image & Multimedia Tags 6. List Tags 7. Table Tags 8. Form & Input Tags 9. Semantic HTML5 Tags 10. Embedded Content Tags 11. Programming & Script Tags 12. Meta & SEO Tags 13. Miscellaneous Tags 14. Deprecated Tags (Do Not Use)

1. Basic Structure Tags

<html> The root element that encapsulates all content on the page.
<head> Contains meta-information, the title, and links to external stylesheets or scripts.
<body> The main container for all visible content displayed on the webpage.
<title> Sets the title of the document, which is shown in the browser tab.
<meta> Defines metadata such as character set, description, and viewport settings for SEO and rendering.
<link> Used to link external resources, most commonly CSS stylesheets or favicons.
<style> Used to embed internal CSS styling directly within the HTML document.
<script> Embeds or links to JavaScript code to add interactivity to the page.

2. Text Formatting Tags

<p> Defines a block of text as a paragraph.
<b> / <strong> Renders text as bold. <strong> implies semantic importance, while <b> is purely visual.
<i> / <em> Renders text in italics. <em> implies semantic emphasis.
<u> Underlines text, often used to denote misspelled words or proper nouns.
<mark> Highlights text visually, usually with a yellow background, to mark it for reference.
<small> Renders text smaller, typically used for fine print, copyright, or legal notices.
<del> Represents deleted text, usually rendered with a strikethrough.
<ins> Represents inserted or added text, usually rendered with an underline.
<sup> Superscript text, raised slightly above the normal line (e.g., for exponents).
<sub> Subscript text, lowered slightly below the normal line (e.g., for chemical formulas).
<br> Forces a single line break without starting a new paragraph.
<hr> Creates a thematic break, visually represented as a horizontal line.

3. Heading Tags

<h1> to <h6> Defines HTML headings. <h1> is the highest level (most important, usually the page title) and <h6> is the lowest. Crucial for SEO and accessibility.

5. Image & Multimedia Tags

<img> Embeds an image into the document (requires a src attribute).
<audio> Embeds sound content, allowing playback via browser controls.
<video> Embeds video content, supporting multiple formats and playback controls.
<source> Specifies multiple media resources for <audio> or <video> elements.
<track> Provides text tracks like subtitles or captions for media elements.
<map> Defines a client-side image map containing clickable areas.
<area> Defines a specific clickable area geometric shape inside an image map.

6. List Tags

<ul> Creates an unordered list (bullet points).
<ol> Creates an ordered list (numbered or lettered items).
<li> Defines a single list item within a <ul> or <ol>.
<dl> A description list container used for name-value groups.
<dt> A term (or name) in a description list.
<dd> The description or definition of the preceding <dt> term.

7. Table Tags

<table> The main container for rendering tabular data.
<tr> Defines a single row within a table.
<th> Defines a table header cell, which is usually bold and centered by default.
<td> Defines a standard data cell within a table row.
<caption> Provides a title or explanatory caption for the table.
<thead>, <tbody>, <tfoot> Semantic grouping tags to divide a table into a header, main body, and footer section.

8. Form & Input Tags

<form> A container for user input controls to be submitted to a server.
<input> A highly versatile field for user input (can be text, password, radio, checkbox, etc.).
<textarea> A multi-line text input field.
<button> A clickable button element used for submitting forms or triggering scripts.
<select> Creates a drop-down menu list.
<option> Defines an individual selectable item within a <select> list.
<label> Provides a text label bound to an input field, greatly improving accessibility and usability.
<fieldset> Groups related form elements together, visually drawing a box around them.
<legend> Provides a caption or title for a <fieldset>.
<datalist> Specifies a hidden list of pre-defined autocomplete options for an <input> element.
<output> Displays the result of a calculation or user action.

9. Semantic HTML5 Tags

<header> Represents introductory content or a set of navigational links for a page or section.
<footer> Represents footer content like copyrights, author info, or bottom links.
<main> Specifies the dominant, primary content of the document.
<article> Represents independent, self-contained content (like a blog post or news story).
<section> A thematic grouping of content, typically with its own heading.
<aside> Content tangentially related to the main content, often used for sidebars.
<figure> Self-contained content like illustrations, diagrams, or photos.
<figcaption> Provides a caption for the contents of a <figure> element.
<details> Creates an interactive disclosure widget that the user can toggle open or closed.
<summary> Defines the visible, clickable heading for a <details> widget.
<time> Represents a specific period in time or a machine-readable date.

10. Embedded Content Tags

<iframe> Embeds another complete HTML document within the current page.
<embed> A container for external applications or interactive content (like plugins).
<object> Embeds external resources such as PDFs, Flash media, or other documents.
<param> Defines initialization parameters for an <object> element.

11. Programming & Script Tags

<script> Used to embed or reference executable code, usually JavaScript.
<noscript> Defines alternate content to display if the user's browser has disabled JavaScript.
<canvas> A blank drawing area used to render graphics on the fly via JavaScript.
<svg> A container for defining Scalable Vector Graphics directly in HTML.

12. Meta & SEO Tags

<meta> General metadata tag for specifying descriptions, keywords, and document rules.
<link rel="canonical"> Specifies the preferred version of a web page to prevent search engines from penalizing duplicate content.
<meta name="description"> Provides a brief summary of the page content, often displayed in search engine results.

13. Miscellaneous Tags

<span> A generic inline container used to group or style small portions of text without breaking the layout.
<div> A generic block-level container used to group elements together for layout and CSS styling.
<template> Holds HTML content that is hidden from the user upon loading, meant to be cloned and inserted via JavaScript later.
<progress> Represents the completion progress of a task (like a downloading bar).
<meter> Represents a scalar measurement within a known range (like disk usage or a gauge).

14. Deprecated Tags (Do Not Use)

<center>, <font>, <big>, <tt>, <frame>, <frameset> These tags are deprecated in modern HTML5. Layouts and text styling should strictly be handled by CSS.