HTML Tutorials, Books, Courses, Podcasts & Resources

HTML is the standard markup language for the web. In combination with CSS and JavaScript, HTML is the esesential language for building sites and applications for the world wide web.

The Basics of HTML

HTML Tags

HTML comments are comments in your source code inserted using a HTML comment Tag. Comments inserted this way are hidden, and do not show to your users.

<a>

An <a> Tag, along with its <href> attribute, creates a hyperlink to another web page, email address, location on the same page, or files.

<abbr>

The <abbr> Tag defines an abbreviation or acronym, such as HTML or CSS.

<address>

The <Address> Tag is used to define a person or organization’s contact information. It can contain a wide range of contact information, such as a physical address, email, and phone.

<area>

The <area> tag defines predefined clickable areas within an image map. This allows areas on an image to be associated with a link.

<article>

The <article> tag specifies self-contained content that should make sense in isolation and which can be distributed separately from the rest of the site.

<aside>

The <aside> tag is used to hold indirectly-related but separate content to the document’s main content. They are commonly used for sidebars, author information, pull-quotes, and call-out boxes.

<audio>

The <audio> Tag is used to embed a sound file in your HTML document. It can contain multiple audio sources, with the browser choosing the most suitable one.

<b>

The <b> tag enables you to make text bold without assigning any extra importance.

<base>

The <base> Tag specifies the base URL for all relative URLs used on your web page.

<bdi>

The <bdi> element, or Bidirectional Isolate Element, is used to tell the browser’s bidirectional algorithm to treat it in isolation from its surrounding text.

<bdo>

The <bdo> tag, or Bidirectional Text Override tag, allows you to override the bidirectional text algorithm by explicitly setting a direction.

<blockquote>

The <blockquote> Tag indicates that the enclosed text is a quote. It may contain a cite attribute with an URL to the quote source and a <cite> element with a text description of the source.

<body>

The body tag is one of the most important html tags. It defines the document’s body and contains all the contents of the HTML document.

<br>

The <br> tag is used to add a line break or carriage-return in HTML.

<button>

The <button> element creates a clickable button and is often used to submit forms and other button functionality.

<canvas>

The <canvas> element provides scripts with a resolution-dependent bitmap canvas. It can be used for graphs, graphics, and other images.

<caption>

The <caption> element is a very underused yet important element that provides a title (or caption) for HTML tables.

<cite>

The <cite> tag defines the title of a piece of creative work and must contain the title of that piece of work.

<code>

The <code> element is used to define a fragment or piece of computer code. It will display any text wrapped by <code> tags in the browser’s default monospace font.

<col>

The <col> tag specifies common column properties for all columns within a <colgroup> element.

<colgroup>

The <colgroup> tag is used to specify a group of columns in a table.

<data>

The <data> Tag links its content with a machine-readable form of that content via the value attribute.

<datalist>

The <datalist> tag specifies a list of options for an <input> element in the form of a drop-down box.

<dd>

The <dd> Tag is used to display the definition description of a term (<dt>) in a definition list (<dl>).

<del>

The <del> tag indicates the content has been removed from the document. Browsers will display the <del> element with a line running through it.

<details>

The <details> tag creates a disclosure widget, that if clicked to an ‘open’ state, will show additional information. A summary or label can be specified with a <summary> element.

<dfn>

The <dfn> tag is used to specify a term that is defined in the content of your web page.

<dialog>

The <dialog> tag represents part of an application that a user interacts with, such as a dialog box or window.

<div>

The <div> tag defines a container within an HTML document that has no semantic meaning on its own.

<dl>

The <dl> tag is used to define a description list. This element encloses a group of description terms (<dt>) along with their definition description (<dd>).

<dt>

The <dt> tag is used to display the definition term alongside a definition description (<dd>) in a definition list (<dl>).

<em>

The <em> tag is used to add semantic emphasis to words or text compared to the surrounding text.

<embed>

The <embed> tag is used to embed external resources into an HTML document, such as an image, web page, audio file, or video file.

<fieldset>

The <fieldset> tag is used to group a set of form controls and labels within an HTML form, optionally grouped under a common name (legend).

<figcaption>

The <figcaption> tag is a child of the <figure> element. It is used to attach a caption to the content within the <figure> element.

<figure>

The <figure> tag is a self-contained piece of content, with an optional caption (<figcaption>), and typically referenced as a single unit from the main flow of the document.

<footer>

A <footer> element represents the footer for its nearest sectioning content (such as <article> or <section>), or sectioning root element (<body>).

<form>

The <form> tag is used to create an HTML form that contains controls for submitting user information.

<h1> to <h6>

The tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are used to define HTML headings. The headings are ranked in order of importance.

<head>

The <head> element contains a collection of metadata relating to the web page.

<header>

The <header> tag contains introductory content or navigational links. It may also include a logo, search form, author name, and other introductory elements.

<hr>

The <hr> element represents a paragraph-level thematic break. This could be a scene change in a story or a transition to another topic within a section of a reference book.

<html>

The <html> tag represents the root, or top-level, element of an HTML document. It is often referred to as the root element as other elements must be descendants.

<i>

The <i> tag is used to define some text in an alternative voice or mood without emphasizing it. The text usually displays in italic.

<iframe>

The <iframe> tag represents a nested browsing context and is used to embed an HTML document in your current HTML document.

<img>

The <img> tag is used to embed an image on a web page.

<input>

The <input> element is a field used in HTML Forms enabling the user input data.

<ins>

The <ins> tag indicates the content has been inserted into the document. Browsers will display the insert element as underlined.

<kbd>

The <kbd> tag is used to define a string of text as keyboard input or keyboard press. It can be used in combination with <samp> to represent other more specific scenarios.

<label>

The <label> tag creates a caption for an item in a form or user interface.

<legend>

The <legend> tag displays a caption for the parent <fieldset> element.

<li>

The <li> tag is used to represent an item in a list. It should be a child of an <ol> element (numbered list) or <ul> element (bullet list).

<link>

The <link> tag specifies the relationship between the current document and an external resource, such as Javascript files, stylesheets, font files, preferred version of the page, and more.

<main>

The <main> tag is used to represent the main content of the <body> of a document. It contains the primary information on the page or main functionality of an app.

<map>

The <map> element along with the <img> element and any <area>) descendants define an image map.

<mark>

The <mark> tag is used to highlight or mark text of particular interest or relevance, often for notational purposes or scrutiny.

<meta>

The <meta> tag specifies metadata, or information, about a HTML document that cannot otherwise be expressed using the <title>, <base>, <link>, <style>, or <script> tags.

<meter>

The <meter> tag represents a scalar measurement within a specific range or a fractional value. When using it, a gauge or progress bar will be displayed by the browser.

<nav>

The <nav> tag specifies a section of a page whose purpose is to link to other pages or parts of the same page, such as navigation links.

<noscript>

The <noscript> tag is used to display content when a browser does not support scripts or has scripts disabled.

<object>

The <object> tag is a container used to embed an external resource. The resource can be an image, nested HTML, or a resource handled by a plugin.

<ol>

The <ol> tag is used to create an ordered list, which is typically a numbered list.

<optgroup>

The <optgroup> tag is used to group a number of related options within a select element.

<option>

The <option> tag is used to define an item in a <select>, <optgroup>, or <datalist> element.

<output>

The <output> tag represents the result of a calculation performed by an application or result of a user action.

<p>

The <p> tag represents a paragraph.

<param>

The <param> tag is used to specify parameters for an <object> element.

<picture>

The <picture> tag contains an <img> element along with zero or more <source> elements to offer different images depending on the user’s screen pixel density, viewport size, image format, and more.

<pre>

The <pre> tag is used to define preformatted text and displays content with a fixed-width font with spaces and line breaks preserved.

<progress>

The <progress> tag represents the status of completion of a task.

<q>

The <q> tag indicates that the enclosed text is an inline quote. It may contain a cite attribute with a link to the source.

<rp>

The <rp> tag is used to provide parenthesis or other content around a ruby text component where <ruby> elements are not supported by the web browser.

<rt>

The <rt> element holds the text component of the <ruby> element, which consists of the meaning or pronunciation of the <ruby> element’s content.

<ruby>

The <ruby> element allows a word or phrase to be marked with ruby annotations. Ruby annotations are primarily used in East Asian typography to guide pronunciation or include other annotations.

<s>

The <s> tag is used to mark content that is no longer accurate or relevant with a strikethrough. It is not suitable to indicate document edits; use the <del> element instead.

<samp>

The <samp> tag is used to mark up a piece of inline text representing a piece of or quoted output from a computer system or program.

<script>

The <script> tag is used to embed a client-side script, such as JavaScript. It can either be embedded directly or through an external file using the src attribute.

<section>

The <section> tag represents a generic section of a document or application and should include a thematic grouping of related content.

<select>

The <select> tag creates a control that enables you to select from a set of options in the form of a drop-down list.

<slot>

The <slot> tag is identified by its name attribute. It allows you to define a placeholder in your template that can be filled with your markup.

<small>

The <small> tag specifies the content you wish to display as small print, like side comments or copyright information.

<source>

The <source> tag is used to specify multiple alternative media sources for the <video>, <audio>, and <picture> elements.

<span>

A <span> tag is an inline container that can be used to mark up text or other phrasing content elements, such as <abbr>, <b>, <em>, <picture>, and more.

<strong>

The <strong> tag adds semantic meaning and indicates strong importance, seriousness, or urgency for its contents.

<style>

The <style> tag contains CSS, a language used to style the web page or parts of it.

<sub>

The <sub> tag is an inline element that displays text as a subscript. The subscript text shows as smaller and with a lower baseline.

<summary>

The <summary> tag represents a summary, caption, or legend for its parent <details> element.

<sup>

The <sup> tag is an inline element that displays text as a superscript. The superscript text shows as smaller and with a higher baseline.

<table> A ```<table>``` element represents data in a two-dimensional table comprising rows and columns of cells.

<tbody>

The <tbody> tag encloses a block of table rows (<tr> elements), which consists of the body of the table.

<td>

A <td> element represents a standard data cell in a table.

<template>

A <template> tag is used to declare a fragment of HTML that can be cloned and inserted into the web page using JavaScript.

<textarea>

The <textarea> element is a multi-line field used in HTML Forms enabling the user input data.

<tfoot>

A <tfoot> tag is used to define a group of footer-related table rows.

<th>

A <th> element represents a table cell used for a heading. The exact nature of the heading is determined by the scope and header attributes.

<thead>

A <thead> tag is used to define a group of header-related table rows.

<time>

A <time> element represents a specific date, time, or duration. It must adhere to a valid syntax. You can specify a more readable (non-valid syntax) date or time by placing a valid version in an optional datetime attribute.

<title>

Defines the title for the web page. It is used in the browser title bar, browser bookmark titles, and the display title in search engine results pages.

<tr>

A <tr> element represents a row of table cells.

<track>

A <track> element is used as a child of the <audio> or <video> elements to define a text track, such as captions, subtitles, or descriptions.

<u>

A <u> tag represents a span of text that is unarticulated and rendered with a non-textual annotation, such as underlining misspelled words with a red underline. It carries semantic meaning.

<ul>

The <ul> tag is used to create an unordered list, which is typically a set of bullet points.

<var>

The <var> element represents a variable, such as those used in mathematical expressions or programming. The element is usually displayed in italic.

<video>

The <video> tag is used to embed a video player in your HTML document. It can contain multiple video sources, with the browser choosing the most suitable one.

<wbr>

A ```<wbr> specifies a word break opportunity. You can insert it into long words to select where it is ok for the browser to insert a word-break, which would usually have not done so.

HTML Attributes

abbr

accept

accept-charset

accesskey

action

allow

alt

async

autocomplete

autofocus

autoplay

charset

checked

cite

class

cols

colspan

content

contenteditable

controls

coords

data

datetime

default

defer

dir

dirname

disabled

download

draggable

enctype

for

form

formaction

formenctype

formmethod

formnovalidate

formtarget

headers

height

hidden

high

href

hreflang

http equiv

id

integrity

ismap

kind

label

lang

list

loading

loop

low

max

maxlength

media

method

min

minlength

multiple

muted

name

nomodule

novalidate

open

optimum

pattern

ping

placeholder

poster

preload

readonly

rel

required

reversed

rows

rowspan

sandbox

scope

selected

shape

size

sizes

span

spellcheck

src

srcdoc

srclang

srcset

start

step

style

tabindex

target

The target attribute specifies how to open a linked document.

target values

_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in the named iframe

The target Attribute can be used with the following elements:

<a>
<area>
<base>
<form>

title

translate

type

usemap

value

width

wrap

HTML Global Attributes

accesskey

The accesskey attribute allows you to specify a keyboard shortcut to focus or activate a specific element.

class

The class global attribute specifies one or more class names for an HTML element.

contenteditable

The contenteditable attribute specifies whether an element should be editable by the user.

dir

The dir attribute specifies the direction of the element’s text.

draggable

The draggable attribute specifies whether the element can be dragged either via native browser functionality, or with the Drag and Drop API.

hidden

The hidden attribute is a boolean that specifies that an element is not relevant and should not be displayed by the browser.

id

The id attribute specifies a unique identifier for an HTML element.

integrity

The integrity attribute is used with a <script> element to enable a browser (or other user agents) to verify that a fetched resource has not been manipulated.

lang

The lang attribute specifies the language of an element’s content.

spellcheck

The spellcheck attribute specifies whether the element should have its spelling and grammar checked.

style

The style attribute specifies an inline CSS style for an element.

tabindex

The tabindex attribute specifies that its element can be focused the order it can be tabbed when navigating.

title

The title attribute specifies additional information about an element, commonly in the form of a tooltip when the mouse hovers over the element.

translate

The translate attribute specifies whether the element should be translated or not when a page is localized, for example by Google Translate.