Basic HTML Tags

In Wiktionary, tags are labels attached to someone or something for identification. This crisp definition of a tag isn't any different from what a tag means in HTML, except that it isn't written as "tag," but as <tag>.

An HTML tag title is always nested in between the less than sign and the greater than sign, like this <tag>. There are approximately 113 currently supported tags in HTML.

next

You must know that in HTML, when a tag is written as <tag>, it is called an open tag. And when it is written as </tag>, it is called a closing tag. The presence of the forward slash signifies it is not a self-closing tag.

Tags like <hr> and <br> do not require a closing tag and are classified under self-closing tags and are also called empty elements. For these tags, the absence of a closing tag will not affect how the web browser runs the code.

Another important thing you should know about HTML tags is that the HTML tags are not case sensitive, meaning they can be written in uppercase, lowercase, or even both.

For example, this code snippet:

<! DOCTYPE html>

<HTML>

<HEAD>

<META charset="UTF-8">

<TITLE>Techstack Tutorials<TITLE>

</HEAD>

<BODY>

<H1>Hello World!</H1>

<P>My first line of code.<P>

</BODY>

</HTML>

compared to:

<! DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Techstack Tutorials</title>

</head>

<body>

<h1>Hello World!</h1>

<p>My first line of code</p>

</body>

</html>

and:

! DOCTYPE html>

<HTML>

<Head>

<Meta charset="UTF-8">

<TiTle>Techstack Tutorials</title>

</head>

<body>

<h1>Hello World!</H1>

<p>My first line of code</P>

</body>

</html>

will all produce the same output on the web browser when you run each code snippet on your code editor.

However, for best practices and conventionality's sake, most developers around the globe stick with lowercase tags. And as a plus, most code editors already have these pre-programmed tags to be written in lowercase unless you choose otherwise.

HTML Tags vs HTML Element

HTML elements represent everything from an open tag to the closing tag.

<h1>Techstack Tutorials</h1>

The <h1>, the text, and </h1> are together called HTML elements.

Some HTML elements are called empty elements, meaning they do not have content attached to them but instead carry out a function.

The <hr> represents a horizontal line, which is an example of an empty element, and so doesn't require a closing tag.

 Basic Tags in HTML

All HTML tags have their meaning and use. Some of these tags have their names written in full, like the <footer>....</footer>, and some others are represented with one of two characters, like <p>, which means paragraph.

In a code editor, tags are commands that tell the web browser what action to take to alter the content nested in the tag, that is, for tags that are not empty elements.

For example, we'll use the tag <b> and see what happens to the text, "Techstack."

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Techstack Tutorials</title>

</head>

<body>

<h1>Hello World!</h1>

<p><b>Techstack </b></p>

</body>

</html>

You can see that the tag <b>, which represents bold, changed the appearance of the text from normal to bolded. This right here is the use of HTML tags.

HTML TAGS IN ALPHABETICAL ORDER

Here are lists of HTML tags and their functions:

<!--....--> This means to comment out.

<! DOCTYPE> This represents the document type

<a> This is an anchor tag that creates a clickable hyperlink.

<abbr> This represents an abbreviation.

<acronym> This represents an acronym. IT IS NOT SUPPORTED IN HTML5, use <abbr> instead.

<address> This represents the contact information of the owner of a document.

<area> This represents a particular area in an image map.

<article> This represents an article.

<aside> This represents content written out of the main page area.

<audio> This represents an embedded audio file.

<b> This represents bold, as in to bolden a text.

<base> This represents a document's base URL for relative URLs.

<basefont> This specifics a default font, color, and size for all text written in a document. IT IS NOT SUPPORTED IN HTML5.

<bdi> This represents a text that is isolated from other text in a document for the purpose of formatting it in a different direction.

<bdo> This overrides the default text direction.

<big> This represents a large text. IT IS NOT SUPPORTED IN HTML5.

<blockquote> This represents a text that is quoted from another source.

<body> This represents the body content of the document.
<br> This represents line break.

<button> This represents a clickable button.

<canvas> This represents graphics. It is used together with JavaScript to draw graphics.

<caption> This represents a table's caption.

<center> This represents a centered text. IT IS NOT SUPPORTED IN HTML5.

<code> This represents a line of code.

<cite> This represents the title of a work.

<col> This represents column properties within a <colgroup>.

<colgroup> This represents a group of columns in a table.

<data> This links the document to a machine readable translation.

<datalist> This represents a defined list of data for input options.

<dd> This represents the description of terms in a description list.

<del> This represents delete, and to show that a text has been deleted.

<details> This represents additional details for the user to either show or hide.

<dfn> This represents a term that will be defined in a sentence.

<dialog> This represents a dialog box.

<dir> This represents a directory list of files. IT IS NOT SUPPORTED IN HTML5.

<div> This represents a container that houses a section in a document.

<dl> This represents a description list.

<dt> This represents a description term.

<em> This represents an emphasized text in a document.

<embed> This represents an embed container for an external file.

<fieldset> This groups like objects together in a form.

<figcaption> This represents a caption for a <figure> tag.

<font> This represents font size, color, and font in a document. IT IS NOT SUPPORTED IN HTML5.

<footer> This represents the footer of a document.

<form> This represents a form.

<frame> This represents a window in a web page in a frameset that can contain another HTML file.

<frameset> This represents a set of frames.

<h1 to h6> This represents all the headings from h1, h2, h3, h4, h5, to h6 in HTML.

<head> This contains meta information for the HTML document.

<header> This represents the header for a section.

<hr> This represents horizontal rule and is used to apply thematic break between paragraphs.

<html> This represents the root of an HTML document.

<i> This represents a text written in an alternate voice.

<iframe> This represents an inline frame.

<img> This represents an image.

<input> This represents an input control option.

<ins> This represents a text inserted into a document.

<kbd> This represents keyboard input.

<label> This represents a label for <input> tag.

<legend> This represents the caption in the <fieldset> tag.

<li> This represents an item list under <ul>.

<link> This represents a link that links the present document to an external file.

<main> This represents the main content of the body.

<map> This represents the image map.

<mark> This represents a highlighted text.

<meta> This represents meta-information about the HTML document.

<meter> This represents a measurement within a specified range.

<nav> This represents navigation links.

<noframe> This is an alternative way to represent content that doesn't support frames. IT IS NOT SUPPORTED IN HTML5.

<noscript> This represents an alternative way to support browsers that do not allow the <script> tag.

<object> This represents an embed object.

<ol> This represents an ordered list using numbers or alphabets.

<optgroup> This represents a drop-down list to group options together.

<option> This represents a group of options in a drop-down list.

<output> This represents the result of a calculation.

<p> This represents a paragraph.

<param> This represents the parameter for an <object> tag.

<picture> This represents more than one image element.

<pre> This represents a preformatted text.

<progress> This represents the progress bar in the HTML document.

<q> This represents a quotation.

<rp> This represents an alternative option for web browsers without <ruby> annotation.

<rt> This represents an explanation for ruby annotation.
<ruby> This represents ruby annotation.

<s> This represents a text that is no longer relevant or correct.

<samp> This represents a sample output on a computer program.

<script> This represents JavaScript in an HTML document.

<section> This represents a section.

<select> This represents a drop-down list option.

<small> This represents a small text.

<source> This represents a multimedia element for embedded audio and video files.

<span> This is used to choose an inline text for special styling and effect.

<strike> This represents strikethrough over a text. IT IS NOT SUPPORTED IN HTML5.

<strong> This represents an important text.

<style> This represents style information for text in HTML.

<sub> This represents a text written as a subscript.

<sup> This represents a text written as a superscript.

<summary> This is used with <detail> tag to provide information.

<svg> This represents a container for scalable vector graphics.

<table> This represents a table.

<td> This represents the table data or content.

<thead> This represents the table header for grouping content in a table.

<tbody> This represents the body content in the table.

<template> This is used to hide a document that won't be shown in a web browser unless in a JavaScript environment.

<textarea> This represents multiple inline controls, such as feedback, e.t.c

<tfoot> This represents the footer of a table.

<th> This represents the head cell in a table.

<thead> This represents the header cell in a table.

<time> This represents a particular time.

<tr> This represents a row in a table.

<track> This represents text tracks for embedded audio and video files.

<tt> This represents teletype text. IT IS NOT SUPPORTED IN HTML5.

<u> This represents an underline.

<ul> This represents an unordered list.

<var> This represents a variable like in mathematics or JavaScript.

<video> This represents an embedded video file.

<wbr> This represents a feasible line break in a document.

 

HTML BASIC TAG

<!DOCTYPE>

<html>

<head>

<title>

<body>

<h1 to h6>

<p>

<br>

<hr>

<!--....-->

 

HTML FORM AND INPUT TAG

<form>

<input>

<textarea>

<button>

<label>

<select>

<optgroup>

<option>

<fieldset>

<legend>

<datalist>

<output>

 

HTML FRAME TAG

<iframe>

<frameset>

<noframes>

<frame>

 

HTML IMAGE TAG

<img>

<map>

<area>

<canvas>

<picture>

<svg>

 

HTML AUDIO/VIDEO TAG

<audio>

<video>

<embed>

<track>

<source>

 

HTML TABLE TAG

<table>

<tbody>

<th>

<td>

<thead>

<tfoot>

<tr>

<col>

<colgroup>

<caption>

 

HTML LIST TAG

<ul>

<ol>

<li>
<dir>

<dl>

<dt>

<dd>

 

HTML STYLE TAG

<div>

<style>

<article>

<section>

<span>

<header>

<footer>

<main>

<aside>

<details>

<dialog>

<summary>

<data>

 HTML LINK TAGS

<a>

<link>

<nav>
next