Learn to code, learn web development basics, start a career in tech.


Last edited: Jul 3 2019

We have already come across HTML Tags, you remember HTML Element? Well, when we have just the opening part or the closing part it is called an HTML Tag e.g <p> is an HTML Tag.

In short, an HTML Element is made up an opening HTML Tag and a closing HTML Tag except for when we have a "self-closing" HTML Element, then it is just made up of a single HTML tag e.g <br>

Now it is time to see more tags, let us visit the header HTML Tags in more detail, the header Tag ranges from <h1> to <h6> each one will display the header in different sizes.

<!DOCTYPE html>
<title>Header Title</title>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

The above code will produce the following:

We have seen how to create an HTML Skeleton and use some HTML Tags to form a full HTML Element, now we are going to see a list of Tags for reference.

Basic HTML Tags

<!DOCTYPE>Declares we are writing HTML5
<html>Defines HTML document
<head>Defines information about document
<title>Defines the document title
<body>Defines the document body
<h1> to <h6>Defines the headers
<p>Defines the paragraph
<br>Defines line break
<hr>Defines horizontal rule
<!--...-->Defines a comment

Form Input Tags

<form>Defines a HTML form
<input>Defines a form input
<textarea>Defines a textarea field
<button>Defines a form button
<select>Defines a drop-down list
<optgroup>Defines a list of related options
<option>Defines an option in a drop-down list
<label>Defines a label for a form
<fieldset>Groups related options in a form
<legend>Defines a caption for fieldset
<datalist>Defines options for input control
<output>Defines the result of a calculation

Formatting Tags

 <abbr> Defines an abbreviation
 <address> Defines contact information for the content author
 <b>Defines bold text
 <blockquote> Defines a quoted text
 <cite>Defines the title of a work
 <code>Defines a computer code
 <del>Defines deleted text
 <em>Defines emphasized text
 <i>Defines an italic type
 <mark>Defines highlighted text
 <meter>Defines a scalar measurement
 <pre>Defines preformatted text
 <q>Defines a short quotation
 <s>Defines text that is crossed out
 <strong>Defines important text
 <sub>Defines subscripted text
 <sup>Defines superscripted text
 <time>Defines a date/time
 <u>Defines underlined text

Image Tags

 Defines an image 
 <map> Defines an image-map 
 <area> Defines an area in image-map 
 <canvas>  Used to draw graphics
 <figcaption>  Defines caption for <figure> element 
 <figure> Defines self-contained content
 <picture> Defines container for image
 <svg>  Container for SVG graphics

Audio / Video Tags

 <audio>  Defines sound content 
 <source>  Define media sources
 <track> Defines text track for media 
 <video>  Defines a video or movie

List Tags

<ul>Defines an unordered list 
<ol>Defines an ordered list
<li>Defines  a list item
<dl>Defines a description list 
<dt>Defines a term/name
<dd>Defines a description of a term/name 

Table Tags

 <table>Defines a table
 <caption> Defines a table caption
 <th>Defines a table header
 <tr>Defines a table row
 <td>Defines a cell in a table
 <thead>Defines a group of header content 
 <tbody>Define table body
 <col>Defines col within <colgroup>
 <colgroup> Defines a group of columns

Style and Semantics Tags

 <style> Describes style information for a document 
 <div> Defines a section in a document
 <span> Defines a section in a document
 <header> Defines header in a document
 <footer> Defines a footer in a document
 <main>Defines main content
 <section> Defines a section in a document
 <article>Defines an article
 <aside>Defines content aside from page
 <details>Define additional details
 <dialog>Defines a dialog box
 <summary>Defines heading for <details>
 <data>Links content with readable translation

Meta Tags

Defines information about the document 
 <meta> Defines metadata about the document 
 <base>Specifies the base URL/target

Programming Tags

 <script> Define a client-side script
 <nonscript> Defines an alternate
 <embed> Container for an external application
 <object> Defines an embedded object
 <param>Defines a parameter for an object