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.
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>
<! 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>
! 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.
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:
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>