HTML Tags

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

HTML Tags

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>
<html>
<head>
<title>Header Title</title>
</head>
<body>
<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>
</body>
</html>

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

TagsDescription
<!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

TagsDescription
<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

TagsDescription
 <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

TagsDescription
 <img>
 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

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


List Tags

TagsDescription
<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

TagsDescription
 <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

TagsDescription
 <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

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


Programming Tags

TagsDescription
 <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