HTML Tags

Tags are code constructs that define the elements which make up an HTML page.  Example elements include paragraph, image, link, input, video, navigation, and more.

HTML Reference

Writing with Tags

Tags start with a  <  and end with a  > , for example, <img> which defines an image.

Most tags have two parts, an opening tag and a closing tag.

The closing tag has the same text as the opening tag, but prefixed with a '/' (forward slash).

A video player, for example, is created with these tags: <video> and </video>.


Tag List

Here is a complete list of HTML tags that you can use to create web pages.

Tag Description
<a> Creates a link (hyperlink) to another page
<abbr> Defines an abbreviation
<address> Specifies contact information for the page's author
<area> Specifies a map area for an image
<article> Defines a container for independent and self contained text
<aside> Creates a content area that is related to the primary content on a page
<audio> Creates a player for sound such as music, sound effects, or others
<b> Specifies bold text
<base> Sets the base URL for all relative URLs on a page
<blockquote> Defines a section with text quoted from another source
<body> Specifies a container for the page's content with text, links, images, etc.
<br> Creates a line break
<button> Creates a clickable button that can contain text or an image
<canvas> Creates a graphics container where JavaScript can draw.
<caption> Specifies a caption for a table
<cite> References the title of a body of work, e.g. book, art work, or a song
<code> An element that is used to display computer code
<col> Specifies column properties for a table
<colgroup> Specifies one or more columns for table formatting purposes.
<data> Links content to a machine-readable set of related data
<datalist> Specifies a list of options for a textfield (<input>) element
<dd> Adds a description of a term or name to a <dl> element
<del> Marks deleted text
<details> A control that can show and hide additional details
<div> Creates a division or section on a page
<dl> Defines a description list
<dt> Adds a term or name to a <dl> element
<em> Marks text that needs emphasis
<embed> Creates a container for an external resource or plug-in
<fieldset> Groups related form elements and displays a box with a legend around these
<figcaption> Adds a caption to a <figure> (image) element
<figure> Displays self-contained content, usually an image
<footer> Defines a footer section on a page or a section of a page
<form> Defines a data entry area that contains input elements
<h1>-<h6> Defines text headings in 6 different sizes
<head> Creates a head element that holds metadata elements
<header> Defines a header section on a page or a section of a page
<hr> Creates a horizontal line
<html> Defines the root container for an HTML document
<i> Specifies italic text
<iframe> Creates a frame in which another web page can be embedded
<img> Displays an image
<input> Creates an input field in which data can be entered
<ins> Marks inserted text
<kbd> Specifies keyboard input often with CTRL, SHIFT, or ALT
<label> Creates a label or brief description before input elements
<legend> Defines a caption for a fieldset
<li> Defines a list item. Used in <ol> and <ul> elements
<link> Defines a link to an external source, such as a style sheet
<main> Specifies a container for the main content of the page
<map> Defines a client-side image map, i.e. an image with clickable areas
<mark> Displays marked or highlighted text
<meta> Provides metadata about the web page
<meter> Creates a measurement control, like a guage
<nav> Creates a container for navigation links
<noscript> When the browser has disabled scripting, the noscript content displays
<object> Embeds external objects in a page, such as, audio, video, image, or PDF
<ol> Creates a numerically or alphabetically ordered list
<optgroup> Groups related options in a <select> element (dropdown control)
<option> Adds an item to a <select> element (dropdown control)
<output> Displays output results of a calculation
<p> Creates a paragraph
<param> Adds parameters to an <object> element
<picture> Adds images with a bit more flexibility than the <img> element
<pre> Displays pre-formatted text in fixed-width font -- usually computer code
<progress> Creates a control that displays progress of a task
<q> Creates a short quotation enclosed with quotation marks
<ruby> Represents a small annotation with pronunciation of text
<samp> Displays sample output from coumputer code
<script> Adds JavaScript to a page. Either server-side or client-side
<section> Defines a piece of content that can stand on its own
<select> Creates a dropdown control
<small> Displays text in a smaller font size
<source> Adds a media source for a <video>, <audio>, or <picture>
<span> Container for one or more inline text elements
<strong> Indicates text that is important or with high urgency
<style> Adds CSS style elements to a page
<sub> Marks subscript text where characters display lower and in smaller font
<summary> Adds a heading to a <details> element. Clicking it toggles the details
<sup> Marks superscript text where characters display higher and in smaller font
<svg> Creates an vector image
<table> Creates an HTML table with rows and colums, much like a spreadsheet
<tbody> Marks the table body in an HTML table
<td> Creates an HTML table cell
<template> Creates a hidden content holder that can be copied by JavaScript
<textarea> Creates a multi-line text input control, for example for messages
<tfoot> Marks the table footer in an HTML table
<th> Creates an HTML table header cell
<thead> Marks the header rows in an HTML table
<time> Creates a human-readable date/time item
<title> Specifies the page title that will display in the browser's tab
<tr> Creates a table row with either <th> or <td> elements
<track> Adds a text track, such as, subtitles and captions, to the media
<u> Specifies underlined text
<ul> Creates an unordered, bulleted list
<var> Defines its content as a variable
<video> Creates a video player on a page
<wbr> Adds a suggestion to the browser for a word-break location
<!DOCTYPE> Specifies the HTML version on the first line of the page
<!--...--> Marks text as comments in the source code. Not visible to users

You may also like

Guides