HTML Tags

120 lessonsAbout 720 minutesReference

This is reference material, not a lesson sequence. Look pages up as you need them rather than reading start to finish.

1HTML <!DOCTYPE> TagThe <!DOCTYPE> declaration defines the document type and version of HTML that the page is written in. It helps browsers render the page correctly according...
2HTML <html> TagThe HTML <html> element: what the root does, why lang and dir matter for screen readers and search, how it relates to <head> and <body>, and the mistakes that break a page before it starts.
3HTML <head> TagThe <head> tag contains metadata and information about the document that is not directly displayed on the web page. It usually includes the page title,...
4HTML <title> TagThe <title> tag defines the title of an HTML document. It appears in the browser tab, search engine results, and bookmarks, helping users and search engines...
5HTML <body> TagThe <body> tag defines the main content area of an HTML document. It contains all the elements that are visible to users on a web page — such as text,...
6HTML <base> TagThe <base> tag specifies the base URL and/or target for all relative URLs in a document. It defines a reference point so that links and resources (like...
7HTML <link> TagThe <link> tag defines the relationship between the current HTML document and an external resource. It is most commonly used to link external CSS...
8HTML <meta> TagThe <meta> tag provides metadata about the HTML document. Metadata is information that does not display directly on the page, but is used by browsers,...
9HTML <style> TagThe <style> tag is used to embed CSS styles directly into an HTML document. It allows you to define the look and formatting of elements on the page without...
10HTML <script> TagThe <script> tag is used to embed or reference JavaScript code in an HTML document. It allows you to create interactive features, handle events, manipulate...
11HTML <h1 to h6> TagHTML provides six levels of headings, <h1> through <h6>, to define content hierarchy and structure. Syntax <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading...
12HTML <hgroup> TagLearn how the HTML <hgroup> tag groups a heading with a subheading, alternative title, or tagline.
13HTML <p> TagThe <p> tag defines a paragraph of text in HTML. It is a block-level element that automatically adds some spacing above and below the text, making content...
14HTML <br> TagWhen the HTML <br> tag is right (addresses, poems, song lyrics) and when it is wrong (spacing, layout, lists) — with the CSS to use instead.
15HTML <wbr> TagLearn how the HTML <wbr> tag suggests optional line-break positions inside long words, URLs, and identifiers.
16HTML <hr> TagThe <hr> tag in HTML defines a thematic break between paragraph-level elements. It is typically displayed as a horizontal line and is used to visually...
17HTML <pre> TagThe <pre> tag in HTML defines preformatted text — meaning the text inside it is displayed exactly as written in the HTML file, including spaces, tabs, and...
18HTML <b> TagThe <b> tag in HTML is used to bolden text without adding extra importance or emphasis. It visually highlights content by making it bold, often used for...
19HTML <strong> TagThe <strong> tag is used to define important or emphasized text that carries strong semantic meaning. Browsers typically render it in bold, but unlike the...
20HTML <i> TagThe <i> tag in HTML is used to display text in italic style. Unlike <em>, which emphasizes text semantically, <i> is generally used for stylistic purposes...
21HTML <em> TagThe <em> tag in HTML is used to indicate emphasized text. Browsers typically render <em> text in italic style, but unlike <i>, it carries semantic...
22HTML <mark> TagThe <mark> tag in HTML is used to highlight text, typically to indicate relevance or search results. Browsers usually render it with a yellow background by...
23HTML <small> TagThe <small> tag in HTML is used to reduce the font size of text, usually for fine print, disclaimers, legal notes, or side comments. It is an inline element...
24HTML <del> TagThe <del> tag in HTML represents deleted or removed text. Browsers typically display it with a strikethrough, indicating that the content is no longer valid...
25HTML <ins> TagThe <ins> tag in HTML represents inserted or added text. Browsers typically display it with an underline to indicate new content. It is often used alongside...
26HTML <sub> TagThe <sub> tag in HTML is used to display subscript text, which appears smaller and slightly below the baseline of normal text. It is commonly used in...
27HTML <sup> TagThe <sup> tag in HTML is used to display superscript text, which appears smaller and slightly above the baseline of normal text. It is commonly used in...
28HTML <u> TagThe <u> tag in HTML is used to underline text. Originally, <u> was purely stylistic, but in modern HTML5, it can also indicate non-emphatic text that should...
29HTML <blockquote> TagThe <blockquote> tag is used to define a long quotation from another source. Browsers typically display it as a block element with indentation. It is ideal...
30HTML <q> TagThe <q> tag is used to define a short inline quotation. Browsers usually display the quoted text with quotation marks automatically. It is an inline element...
31HTML <cite> TagThe <cite> tag is used to define the title of a creative work, such as a book, painting, movie, website, or research paper. Browsers usually display the...
32HTML <abbr> TagThe <abbr> tag in HTML defines an abbreviation or acronym, such as “HTML,” “CSS,” or “NASA.” When a user hovers over the abbreviation, the browser displays...
33HTML <address> TagThe <address> tag in HTML is used to define contact information for the author or owner of a document or article. It typically contains details such as...
34HTML <bdo> TagThe <bdo> tag stands for Bi-Directional Override and is used to override the current text direction of its content. It’s mainly helpful for displaying text...
35HTML <bdi> TagThe <bdi> tag stands for Bi-Directional Isolation and is used to isolate a part of text that might have a different direction from the surrounding text....
36HTML <a> TagThe <a> tag, also known as the anchor tag, is used to create hyperlinks in HTML. It allows users to navigate between web pages, jump to specific sections,...
37HTML <nav> TagThe <nav> tag defines a section of a webpage that contains navigation links. It helps users move around a website and assists search engines in...
38HTML <ul> TagsThe <ul> tag in HTML defines an unordered (bulleted) list, while the <li> tag defines individual list items within that list. Unordered lists are commonly...
39HTML <menu> TagLearn how the HTML <menu> tag represents a toolbar containing an unordered list of commands.
40HTML <ol> TagThe <ol> tag in HTML defines an ordered (numbered) list, and the <li> tag defines individual list items within that list. Ordered lists are used when the...
41HTML <dl> TagThe <dl> tag in HTML defines a description list (also known as a definition list). Each description list contains one or more pairs of terms (<dt>) and...
42HTML <img> TagThe <img> tag in HTML is used to embed images into a webpage. It is an empty tag (no closing tag) and requires attributes like src (source URL of the image)...
43HTML <figure> TagThe <figure> tag in HTML is used to group self-contained media content like images, illustrations, diagrams, code snippets, or videos — usually accompanied...
44HTML <figcaption> TagThe <figcaption> tag defines a caption or description for a <figure> element. It provides context to the media (such as an image, chart, or video) grouped...
45HTML <audio> TagThe <audio> tag is used to embed sound content in an HTML document, such as music, podcasts, or sound effects. It supports multiple audio formats and...
46HTML <video> TagThe <video> tag is used to embed video files directly into a webpage. It supports multiple formats such as MP4, WebM, and Ogg, and provides built-in...
47HTML <source> TagThe HTML <source> tag inside <picture>, <video> and <audio>: how the browser picks one, srcset and media for responsive images, type for formats, and the ordering mistakes that make it choose wrong.
48HTML <track> TagThe <track> tag is used to add text tracks (like subtitles, captions, descriptions, or chapters) to <video> and <audio> elements. It improves accessibility...
49HTML <embed> TagThe <embed> tag in HTML is used to embed external content such as videos, audio, PDFs, or interactive media (like SVGs or Flash) directly into a webpage. It...
50HTML <object> TagLearn how to use the HTML <object> element for supported external resources with MIME types, dimensions, and accessible fallback content.
51HTML <param> Tag (Obsolete)The <param> element is obsolete and must not be used in new HTML documents.
52HTML <picture> TagThe <picture> tag in HTML is used to provide multiple image sources for responsive designs. It allows the browser to choose the most suitable image based on...
53HTML <canvas> TagThe <canvas> tag in HTML is used to draw graphics dynamically via JavaScript, including shapes, charts, animations, and games. It is a container for...
54HTML <map> TagThe <map> tag in HTML is used to define an image map, which is a clickable region on an image that links to different destinations. Each clickable area...
55HTML <area> TagThe HTML <area> tag defines a clickable region of an image map. Shapes and coords explained, a working floor-plan example, and why image maps break when the image is resized.
56HTML <table> TagThe <table> tag in HTML defines a table — a structured arrangement of data in rows and columns. It serves as the container for all related elements like...
57HTML <caption> TagThe HTML <caption> tag gives a table its title. Where it must go, how caption-side moves it, why it beats a heading above the table for accessibility, and the mistakes that break it.
58HTML <thead> TagThe <thead> tag in HTML defines the header section of a table. It groups all header rows (<tr>) that typically contain column headings defined by <th> tags....
59HTML <tbody> TagThe <tbody> tag in HTML is used to group the main content rows (body) of a table. It separates the table’s data section from the header (<thead>) and footer...
60HTML <tfoot> TagThe <tfoot> tag in HTML defines the footer section of a table. It is used to group rows that summarize or provide totals, notes, or other information...
61HTML <tr> TagThe <tr> tag in HTML defines a table row. It is used inside the <table> element to group one or more table cells (<th> or <td>) in a single horizontal row....
62HTML <th> TagThe <th> tag in HTML defines a header cell in a table. Header cells are typically displayed in bold text and centered by default. They help describe the...
63HTML <td> TagThe HTML <td> tag: data cells, colspan and rowspan, the headers attribute, and the mistakes — td for headings, miscounted spans, tables for layout — that make tables unreadable.
64HTML <col> TagThe <col> tag in HTML defines column properties for each column within a <colgroup> element. It allows you to apply styling, width, or alignment to one or...
65HTML <colgroup> TagThe <colgroup> tag in HTML is used to group one or more columns in a table for formatting purposes. It allows you to apply common styles or attributes to a...
66HTML <form> TagThe <form> tag is used to create an HTML form for collecting user input. It acts as a container for various input elements like text fields, checkboxes,...
67HTML <input> TagThe <input> tag is used to create interactive form controls for user input. It can represent a text field, checkbox, radio button, file selector, password...
68HTML <textarea> TagThe <textarea> tag is used to create a multi-line text input field in a form. Unlike the <input type="text"> field, which is single-line, <textarea> allows...
69HTML <button> TagThe <button> tag is used to create a clickable button in an HTML form or web page. It can contain text, images, or HTML content, unlike <input...
70HTML <select> TagThe <select> tag is used to create a drop-down list in a form. It allows users to choose one or multiple options from a predefined list. Each option is...
71HTML <selectedcontent> TagLearn how the experimental HTML <selectedcontent> tag displays the selected option inside a customizable select button.
72HTML <option> TagThe <option> tag is used inside a <select> element to define a single option in a drop-down list. Each <option> represents a selectable value that the user...
73HTML <optgroup> TagThe <optgroup> tag is used to group related <option> elements inside a <select> drop-down. It provides better organization and readability for long lists of...
74HTML <label> TagThe <label> tag is used to define a label for an HTML form control like <input>, <textarea>, or <select>. Clicking the label automatically focuses the...
75HTML <fieldset> TagThe <fieldset> tag is used to group related elements in a form. It helps organize form controls visually and semantically, often improving usability and...
76HTML <legend> TagThe <legend> tag is used to provide a caption or title for a <fieldset> in a form. It helps users understand the purpose of the grouped fields and improves...
77HTML <datalist> TagThe <datalist> tag is used to provide a list of predefined options for an <input> element. It allows users to type a value or select from a list, offering a...
78HTML <output> TagThe <output> tag is used to display the result of a calculation or user action in a form. It is commonly used with JavaScript to show dynamic results like...
79HTML <meter> TagThe <meter> tag is used to represent a scalar measurement within a known range, such as disk usage, battery level, or progress percentage. It is different...
80HTML <progress> TagThe <progress> tag is used to display the progress of a task such as file uploads, downloads, or other operations. Unlike <meter>, <progress> represents...
81HTML <header> TagThe <header> tag represents a container for introductory content or navigational links. It usually contains headings, logos, and main navigation links, but...
82HTML <footer> TagThe <footer> tag represents a footer section for its nearest sectioning content (like <body>, <article>, <section>). It typically contains copyright info,...
83HTML <article> TagThe <article> tag represents self-contained content that can be independently distributed or reused, such as a blog post, news article, or forum post. It...
84HTML <section> TagThe <section> tag defines a thematic grouping of content on a webpage. It is used to organize content into sections with a common heading or purpose, such...
85HTML <aside> TagThe <aside> tag defines content that is related to the main content but separate from it, like sidebars, pull quotes, or additional information. It is often...
86HTML <main> TagThe <main> tag represents the dominant content of the <body> of a webpage. It should contain content unique to the page, excluding repeated elements like...
87HTML <search> TagLearn how the HTML <search> tag semantically identifies controls and content used for searching or filtering.
88HTML <details> TagThe <details> tag is used to create a collapsible content block that the user can open or close. It is often used for FAQs, additional information, or...
89HTML <summary> TagThe <summary> tag defines a visible heading for the <details> element. It acts as a toggle button that the user can click to expand or collapse the content...
90HTML <dialog> TagThe <dialog> tag represents a dialog box or modal window that can contain interactive content such as text, forms, or buttons. It can be opened or closed...
91HTML <time> TagThe <time> tag defines a specific time or date, or both. It helps browsers, search engines, and assistive technologies understand the time-related data in a...
92HTML <noscript> TagThe <noscript> tag defines alternative content that is displayed only when JavaScript is disabled in the browser or when the browser does not support...
93HTML <slot> TagsThe <slot> tag is a placeholder inside a Web Component that allows developers to pass external content (light DOM) into the shadow DOM. It helps in creating...
94HTML <template> TagThe <template> tag in HTML is used to define HTML fragments that are not rendered immediately when a page loads. Its content remains inactive until it is...
95HTML <shadow> Tag (Obsolete)The experimental <shadow> element from Shadow DOM v0 is obsolete and unsupported.
96HTML <center> TagThe <center> tag was used to horizontally center-align content in HTML. It is deprecated in HTML5 and should be replaced by CSS styling (text-align:...
97HTML <font> TagThe <font> tag was historically used to change the font face, size, and color of text in HTML. It is deprecated in HTML5, and modern web design uses CSS...
98HTML <big> TagThe <big> tag was used to increase the font size of text by one level relative to the surrounding text. It is deprecated in HTML5, and CSS (font-size)...
99HTML <strike> TagThe <strike> tag was historically used to display text with a strikethrough (line through the text). It is deprecated in HTML5. The modern standard uses the...
100HTML <tt> TagThe <tt> tag in HTML stands for “teletype text.” It was used to display text in a monospaced (fixed-width) font, resembling the output of old teletype...
101HTML <acronym> TagThe <acronym> tag in HTML was used to define an acronym — a word formed from the initial letters of other words, such as NASA or HTML. When a user hovered...
102HTML <applet> TagThe <applet> tag in HTML was used to embed Java applets (small Java programs) into a web page. Applets could display interactive graphics, animations, or...
103HTML <frame> TagThe <frame> tag in HTML was used to define a specific region within a <frameset> that could display a separate HTML document. Frames allowed web developers...
104HTML <frameset> TagThe <frameset> tag in HTML was used to define a set of frames within the browser window. It allowed you to divide the window into multiple sections...
105HTML <noframes> TagThe <noframes> tag in HTML was used to provide alternative content for browsers that do not support frames. When a webpage used the <frameset> element to...
106HTML <marquee> TagThe HTML <marquee> tag still works but is obsolete. What it did, why it was dropped, and how to build the same scrolling text with CSS animation instead.
107HTML <blink> TagThe <blink> tag in HTML was used to make enclosed text blink or flash on and off continuously on the screen. It was introduced in Netscape Navigator...
108HTML <s> TagThe <s> tag in HTML is used to define text that is no longer correct, accurate, or relevant but should not be deleted. It visually renders text with a...
109HTML <var> TagThe <var> tag in HTML is used to define a variable in a mathematical expression or in a programming context. The content inside the <var> element is...
110HTML <kbd> TagThe <kbd> tag represents keyboard input entered by the user. Browsers typically display <kbd> text in a monospace (typewriter-style) font to differentiate...
111HTML <samp> TagThe <samp> tag is used to represent sample output from a computer program, system, or device. Browsers typically display <samp> text in a monospace font,...
112HTML <code> TagThe <code> tag is used to display a fragment of computer code in a monospace (fixed-width) font. It is typically used for inline code, not for large code...
113HTML <dfn> TagThe <dfn> tag identifies the defining instance of a term or concept within a document. It is used the first time a term appears, usually alongside its...
114HTML <div> TagThe <div> tag defines a division or section in an HTML document. It is a block-level container used to group content for styling (CSS) or scripting...
115HTML <span> TagWhat the HTML <span> tag is for, how it differs from <div>, a real example with CSS and JavaScript, and the four mistakes people make with it.
116HTML Comment TagHTML comments are used to insert notes or explanations in the HTML code that are not displayed in the browser. Comments are helpful for developers to...
117HTML <data> TagThe <data> tag is used to associate machine-readable data with human-readable content. It allows the browser or scripts to understand the value of a text...
118HTML Ruby Annotations: <ruby>, <rt> and <rp>Learn how the HTML <ruby>, <rt>, and <rp> elements create pronunciation and explanatory annotations with fallback punctuation.
119HTML <svg> TagInline <svg> in HTML: when to inline versus use <img>, why viewBox matters, recolouring with currentColor, reusing icons with <use>, and making SVG accessible.
120HTML <basefont> TagThe <basefont> tag was used to define a default font size, color, and font face for all text in an HTML document. Once set, all text on the page inherited...

All of HTML Tutorial Next: HTML Text and Links