HTML Updated

Basic HTML Tags List
These are the basic tags used in HTML5.
Tag Description
<!DOCTYPE> It defines the document type
<html> It is the root of HTML document
<head> It defines the head of an HTML document that contains non-visible data like
metadata and other information
<body> It defines the body of a webpage and contains everything that you see on the
webpage
<h1> to <h6> These are a group of heading tags used to create heading in a webpage
<p> It defines the paragraph in a webpage
 It is used to write comments in HTML documents
<br> It defines a line break
<hr> It creates a horizontal line in a webpage
HTML Doctype
Doctype is a document type declaration to the browser. It appears at the top of the HTML document.
It tells the browser about the standard of HTML or type of markup language. Although it is not necessary
to use it but is a W3C recommendation. Example <!DOCTYPE html>
<html> tag
The <html> tag is the topmost tag in HTML. It is the root of an HTML document. All other tags of the
HTML document lie inside it.
You should always use the lang attribute with the <html> tag. It declares the language of the webpage to
the browsers and search engines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML - html tag</title>
</head>
<body>
<p>html tag is the root of HTML document.</p>
</body>
</html>
<head> tag
The <head> tag contains information about the webpage that is not visible to the users. These are
machine-readable information like the script, metadata, title, style sheets, etc.
The head of HTML document may contain <title>, <meta>, <style>, <link>, <base>, <script> and
<noscript> tags.
<body> tag
The <body> tag contains all the visible parts of the webpage. Anything like text, image, audio, video,
animations, etc all lies in the body tag.
In an HTML document there can be only one <body> tag.
Heading tags
Heading tags in HTML are used to create headings on the webpage. There are 6 different types of
heading in HTML h1 to h6.
The headings h1 to h6 are ordered on the basis of their font size and importance. The <h1> defines most
important heading and <h6> defines least important.
There can be only one h1 tag in a webpage and you should not skip any level of heading from h1 to h6.
Example
<h1>This is heading 1.</h1>
Paragraph tag
A paragraph in webpage is defined by <p> tag. A paragraph is a block-level element used to represent
text on the browser.
When the paragraph tag is closed it automatically creates a new line.
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
comment tag
While writing code it is a good practice to write a comment about what code is all about. In HTML you
can write comment using .
The comment is written between the double dash, it can be in a single line or multiline comment.
<p>This paragraph is visible on the webpage but comment below is not visible.</p>


<br> tag (line break)
The <br> is used to create a line break in the text. It can be used in writing addresses, song lyrics, or at a
place where a line break is needed.
<p>The br tag <br>
is used to <br>
create a line break.
</p>
<hr> tag (horizontal line)
The <hr> is used to create a break between paragraphs using a horizontal line. Using CSS you can modify
and style as per your own need.
Example
<p>Scene 1:</p>
<hr>
<p>Scene 2:</p>
Formatting tags
This is a list of formatting tags in HTML5. It gives us the ability to format the text
without using CSS.
<b> tag
The <b> tag is used to make a word or group of the word special to draw the reader's attention.
The <b> tag format the text to bold. However, you should not use the b tag to make text bold instead
use the font-weight property of CSS.
Example
<p>b tag is used to make <b>special words</b> bold.</p>
<strong> tag
The <strong> tag is used to make the content very important or urgent. The browser renders it as bold
content.
However, you should not use the strong tag to make content bold instead use the font-weight property
of CSS.
Example
<p>The strong tag is used to make the content <strong>very important</strong>.</p>
<i> tag
The <i> tag is used to format the text in an alternative mood or voice to set off from the normal text.
It makes text italic and is used to define technical terms, idiomatic text, etc.
Example
<p>HTML is a <i>markup language</i>.</p>
<em> tag
The <em> tag is used to define stress emphasis in the text.
The em tag can be nested and with each nesting emphasis on text increases.
Example
<p>Start improving yourself from <em>today</em>!</p>

<p>Work <em>real <em>hard</em></em>.</p>
<u> tag
The <u> tag is used to represent a non-literary explanation.
By default, it underlines the text content but it can be changed using CSS.
Example
<p>There are lots of <u>speling</u> mistake in <u>thes</u> line.</p>
<sup> tag
The <sup> tag is used to display text as a superscript.
Superscript is rendered with a raised baseline and smaller text.
Example
<p>Value of gravitational constant (G) is 6.67 x 10<sup>-11</sup>

m<sup>3</sup>kg<sup>-1</sup>s<sup>-2</sup>.</p>
<sub> tag
The <sub> tag is used to display text as a subscript.
Subscript is rendered as small text with a lower baseline.
Example
<p>The molecular formula of glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>
<pre> tag
The <pre> is also called a preformatted tag. It is used to present text as it is written in an HTML
document.
It renders text using a monospace font. The whitespaces used in the element are displayed the same as
written.
<p>Creating a big Y using Y with <code>pre</code> tag.</p>
<pre>Y Y
Y Y
Y Y
Y Y
Y Y
YY
Y</pre>
<small> tag
The <small> tag is used to define smaller text like copyright, comments, etc.
By default, it renders text smaller than standard however it can be controlled using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - small tag</title>
</head>
<body>
<h1>small tag</h1>
<p>The <small> tag is used to make text <small>smaller</small>.</p>
</body>
</html>
<abbr> tag
The <abbr> tag is used to represent an abbreviation or acronym. The tag accepts a title attribute that
accepts the full form of the word. When the reader hovers the text it shows a full description of the
word.
Example
<p><abbr title="Hypertext markup language">HTML</abbr> is used to create webpages.</p>
<code> tag
The <code> tag is used to display computer codes on the webpage. The browser uses some default style
to indicate that this is a code.
You can use CSS to add additional style properties to the tag.
<style>
code {
color: #e83e8c;
background-color: #fff5f5;
</style>
<p><code>document.getElementById</code> is used select element on a webpage using it's ID.</p>
<del> tag
The <del> tag defines texts which have been removed from the document or webpage. It can be used to
track changes to previous versions of code.
The content of the del element has a strikethrough line that cuts the content horizontally in middle.
<p>Useless code (<del>function useless() { }</del>) have been removed in newerverion.</p>
<ins> tag
The <ins> tag is used to display a group of text which has been added to the document.
The ins tag adds a solid underline to its text.
Example
<del>
<p>Plastic use for bags.</p>
</del>
<ins>
<p>Use biodegradable substances for carrying bags.</p>
</ins>
<mark> tag
The <mark> tag marks or highlights a text to grab the reader's attention.
According to HTML standards, it is not mandatory to use it, you can achieve it using CSS.
Example
<p>mark tag is used to <mark>highlight</mark> a text.</p>
<blockquote> tag
The <blockquote> tag indicates that the enclosed text is extended text from another source.
The URL of the external source is given using the cite attribute.
<!DOCTYPE html>
<html>
<body>
<h1>The blockquote element</h1>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the United States
and close to 5 million globally.
</blockquote>
</body>
</html>
<s> tag
The <s> tag display text by making a strikethrough with it. It is used to show a specific content is no
longer relevant.
For indicating document edit use <del> instead.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - s tag</title>
</head>
<body>
<h1>s tag</h1>
<p><s>Use <center> tag to ceter a text in HTML.</s></p>
<p><center> tag is deprecated use CSS instead.</p>
</body>
</html>
<address> tag
The <address> tag is used to display the contact or address of a person or an organization.
It can include any kind of information email, phone number, house number, social media, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - address tag</title>
</head>
<body>
<h1>address tag</h1>
<address>
Mailto: <a href="mailto:office@example.com">John smith</a><br>
Phone: 1234567890 <br>
Twitter: 🐦@example_john
</address>
</body>
</html>
<cite> tag
The <cite> tag describes a reference to a cited creative work or art. It must include the title of that work.
Ezoic
A creative work might be a book, a research paper, a song, a painting, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - cite tag</title>
</head>
<body>
<h1>cite tag</h1>
<p><cite>Monalisha</cite> painting is one of the most mysterious paintings in history.</p>
</body>
</html>
<dfn> tag
The <dfn> tag (definition tag) is used to tell that a term is being defined in the sentence.
When you use <dfn> tag then nearest parent element like <p> or <section> tag should contain the
definition of the term.
Example
<p><dfn>HTML</dfn> is a markup language used to create web pages.</p>
<meter> tag
The <meter> tag is used to define a scale with a given range and value.
The tag requires a defined value with min value and max value of the scale. The min, max, and value are
attributes of the tag.
You can also give low and high values to the scale which is used to change the color of the scale. If the
value of the scale is below the low value then the scale is green, if the value is between low and high
then the scale is yellow and if the scale is above the high value then the scale is red.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - meter tag</title>
</head>
<body>
<h1>meter tag</h1>
<p>Speed of bike was 65kmph <meter min="0" max="100" low="33" high="66"

value="65"></meter></p>
</body>
</html>
<progress> tag
The <progress> tag is used to display an indicator to show the completion progress of a task. It is
displayed as a progress bar.
The tag accepts 2 attribute
max - Describes the highest value of the progress bar
value - Describes the current value of the progress bar
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - progress tag</title>
</head>
<body>
<h1>progress tag</h1>
<p>The task is 75% complete <progress max="100" value="75"></progress></p>
</body>
</html>
<q> tag
The <q> tag defines an inline quotation. The most modern browser automatically adds quotation marks
around the text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - q tag</title>
</head>
<body>
<h1>q tag</h1>
<p>The concept of <q>this</q> in javascript may be a little confusing to beginners.</p>
</body>
</html>
<samp> tag
The <samp> tag defines a sample of computer output from a computer program.
The browser renders the content by using default style like the monospaced font.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - samp tag</title>
</head>
<body>
<h1>samp tag</h1>
<p><samp>Test cases failed <br> Please improve the algorithm</samp></p>

</body>
</html>
<template> tag
The <template> tag is a less known but very useful tag. It is used to hold the HTML code which is not
rendered on the screen. You can use these codes later using javascript.
You can think of it as a container where you can store HTML code and then later fetch it using javascript
and read it somewhere else.
The HTML code inside the template tag is not rendered by is processed by the parser to ensure the
validity of the code.
<template>: The Content Template element
The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately
when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - template tag</title>
</head>
<body>
<h1>template tag</h1>
<p><code>template</code> tag is used to hold HTML code which is not rendered.</p>
<p>List of programming language:</p>
<template id="moreLang">
<li>JavaScript</li>
<li>Python</li>
</template>
<ul id="langList">
<li>C</li>
<li>C++</li>
</ul>
<button onclick="addMoreLang()">Add language from template</button>
<script>
const moreLang = document.getElementById("moreLang");
const langList = document.getElementById("langList");
function addMoreLang() {
const clone = moreLang.content.cloneNode(true);
langList.appendChild(clone);
</script>
</body>
</html>
<time> tag
The <time> tag used to represent time in HTML. It contains a datetime attribute that stores the exact
date and time of an event, which is used by search engines to provide better results.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - time tag</title>
</head>
<body>
<h1>time tag</h1>
<p>I have a meeting at <time>02:30 pm</time>.</p>
<p><time datetime="2021-06-23 17:00:00">My birthday</time> is in the summer.</p>
</body>
</html>
<var> tag
The <var> tag is used to represent a variable in a program or in a mathematical expression.
The browser represents it in an italicized version.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - var tag</title>
</head>
<body>
<h1>var tag</h1>
<p>var <var>a</var> = 2, <var>b</var> = 3, <var>c</var> = 5;</p>
<p><var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>
</body>
</html>
3. Image tags
The following listed HTML tags list is used for images.

Tag Description
<img> It defines image on webpage
<figure> It defines a self-contained container for images, code snippets, diagrams,

etc
<figcaption It defines a caption for the <figure>

>
<picture> It defines a container to provide multiple resources for an image
<area> It defines an area inside the image using coordinates
<map> It defines a map on an image and creates a clickable area
<canvas> It defines an area to draw something on the webpage using javascript
<svg> It defines a container for SVG image
<img> tag
The <img> is used to define an image on the webpage. It is a self-closing tag.
The img tag accepts the URL of the image by the src attribute. You can also provide alt text (alternative
text) used when the image does not exist.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - img tag</title>
</head>
<body>
<h1>img tag used to add images on the webpage</h1>
<img src="./assets/html/cat.jpg" alt="image of a cat">
</body>
</html>
<figure> tag
The <figure> behaves like a container for images and also gives an option for the image caption defined
by <figcaption>.
The figure tag makes the image, its caption and other of its content a single unit.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - figure tag</title>
<style>
figure {
padding: 5px;
width: fit-content;
border: 1px solid silver;
}
</style>
</head>
<body>
<h1>figure tag</h1>
<figure>
<img src="assets/html/cat.jpg" alt="a cat">
<figcaption>Image of a cat</figcaption>
</figure>
</body>
</html>
<figcaption> tag
The <figcaption> tag is used to create a caption for an image inside the <figure> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - figcaption tag</title>
<style>
figure {
padding: 5px;
width: fit-content;
border: 1px solid silver;
figcaption {
padding: 10px;
text-align: center;
background: gray;
</style>
</head>
<body>
<h1>figcaption tag</h1>
<figure>
<img src="./assets/html/cat.jpg" alt="a cat">
<figcaption>Image of a cat</figcaption>
</figure>
</body>
</html>
<picture> tag
The <picture> is used to define hold multiple sources of an image. It contains 0 or more <source>
element and 1 <img>.
The multiple resources of the image are chosen in different scenarios and the image source from the
<img> tag is used when no other source is available or supported.
The <img> is also used to provide the alt attribute and width of the image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - picture tag</title>
</head>
<body>
<h1>picture tag</h1>
<p>Adjust the window size at 600px and see how the browser chooses different source of image for
different scenario.</p>
<picture>
<source srcset="./assets/html/flowers.jpg" media="(max-width:600px)">
<img src="./assets/html/cat.jpg" alt="image">
</picture>
</body>
</html>
he <picture> tag gives web developers more flexibility in specifying image resources.
The most common use of the <picture> element will be for art direction in responsive designs. Instead of
having one image that is scaled up or down based on the viewport width, multiple images can be
designed to more nicely fill the browser viewport.
The <picture> element contains two tags: one or more <source> tags and one <img> tag.
The browser will look for the first <source> element where the media query matches the current
viewport width, and then it will display the proper image (specified in the srcset attribute). The <img>
element is required as the last child of the <picture> element, as a fallback option if none of the source
tags matches.
<map> tag
The <map> is used to define area elements to create a map-like clickable structure inside an image.
<area> tag
The <area> is used to define an area inside an image and create a clickable link. It uses attributes to
define shape, coordinates, URL, etc.
shape - It defines shapes like circles, rectangles, polygons, etc
coords - It specifies coordinates of the shape in x1,y1,x2,y2... pattern
href - It provides the URL of the hyperlink for the target area
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - area tag</title>
</head>
<body>
<h1>area tag</h1>
<map name="yourMap">
<area shape="poly" coords="150,0,150,177,0,260" href="https://www.youtube.com" target="_blank"

alt="HTML Tutorial">
<area shape="poly" coords="0,260,150,178,300,260" href="https://www.youtube.com"

target="_blank" alt="CSS Tutorial">
<area shape="poly" coords="151,0,151,177,300,260" href="https://www.youtube.com"

target="_blank" alt="JavaScript Tutorial">
</map>
<img src="./assets/html/html-map-and-area.png" alt="map and area" usemap="#yourMap">
</body>
</html>
The usemap attribute specifies an image as a client-side image map (an

image map is an image with clickable areas). The usemap attribute is
associated with a <map> element's name attribute, and creates a relationship
between the <img> and the <map> .
<canvas> tag
The <canvas> tag was introduced in HTML5. It is used to create controllable graphics and animations.
Using canvas you can create anything from a simple animation to a complex game.
You need javascript to create anything inside the canvas. The default dimension of the canvas is 300 ×
150.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - canvas tag</title>
<style>
canvas {
border: 1px solid black
</style>
</head>
<body>
<h1>canvas tag is used to create controlable graphics and animation.</h1>
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(20, 20, 50, 50);
ctx.fillRect(80, 20, 50, 50);
ctx.fillStyle = "red";
ctx.fillRect(50, 80, 50, 50);
</script>
</body>
</html>
<svg> tag
The <svg> is also known as scalable vector graphics. It is used to create different geometrical shapes like
circles, rectangles, lines, curve paths, vector images, etc.
SVG can create very complex images and are very lightweight. Components of these images can be
easily handled by CSS and javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - SVG tag</title>
</head>
<body>
<h1>SVG tag is used to create geometrical shapes and images.</h1>
<svg width="300" height="150">
<circle cx="60" cy="60" r="50" stroke="gray" stroke-width="2" fill="yellow" />
<rect width="100" height="100" style="fill:rgb(201, 68, 68);stroke-width:2;stroke:rgb(0,0,0)"

x="150" />
</svg>
</body>
</html>
4. Link or navigation tags
These HTML tags are used to create any hyperlink, define connections with other resources, or create a
navigation menu.
Tag Description
<a> It defines a hyperlink to connect to other webpages
<link> It defines connects other document with HTML documents or defines some relationship
<nav> It used to wrap navigation links
<a> tag
The <a> tag also known as anchor tag is used to create a hyperlink to another webpage.
The URL of the hyperlink is given as href attribute. The browser renders the link text underlined and blue
color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - a tag</title>
</head>
<body>
<h1>a tag is used to create hyperlink.</h1>
<p>Visit <a href="https://www.tutorialstonight.com/html/html-links">here</a> to learn about anchor

tag.</p>
</body>
</html>
<link> tag
The <link> is used to create a relationship between a current document and any external document. It is
mostly used to add an external stylesheet to the HTML files.
It is used inside the <head> tag. Apart from stylesheets, it is also used to add favicon icons to web pages
and mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - link tag</title>
<link rel="stylesheet" href="./css/external.css">
</head>
<body>
<h1>link tag</h1>
<p>link tag connect external resource to the current document.</p>

</body>
</html>
<nav> tag
The <nav> defines a section of the page that has navigation links, either internal links or external links.
It can be used in creating menus, a sidebar with multiple links, footer links, etc.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
5. List tags
Following is the HTML tags list for creating ordered, unordered, and description lists in HTML.
Tag Description
<ol> It defines an ordered list
<ul> It defines an unordered list
<li> It defines an item in a list
<dl> It defines a description list
<dt> It defines name or tern in description list

<dd> It defines the description of item in the description list
<ol> tag
The <ol> tag defines an ordered list of items. It behaves like a container for a list item that is listed in
order.
The default order of <ol> tag is 1, 2, 3... and so on. While you can use the type attribute to set different
types of numbering.
type="a" - lowercase letters
type="A" - uppercase letters
type="i" - lowercase roman letters
type="I" - uppercase roman letters
type="1" - numbers (default)
<body>
<h1>ol tag used to create ordered list.</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<p>Changing type of ordered list.</p>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
<ul> tag
The <ul> tag defines unordered list. It behaves like a container for unordered list items.
The unordered list items are rendered as bullet items however they can be changed using the type
attribute.
type="circle"
type="disc"
type="square"
<body>
<h1>ul tag used to create unordered list.</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Changing type of ordered list.</p>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
<li> tag
The <li> tag is used to create list items for all types of lists.
It must have a parent like <ol> or <ul>.
<body>
<h1>li tag used to create list items in any type of list.</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
<dl> tag
The <dl> tag defines a description list.
Description list contains a list of groups of the term specified by <dt> and their descriptions specified by
<dd>.
<dt> tag
The <dt> tag defines a description term in description list. It must lie inside <dl> tag.
<dd> tag
The <dd> tag defines description for a term in description list. It is proceeding term of <dd> tag and lies
inside <dl> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - dl tag</title>
</head>
<body>
<h1>dl tag is used to create descrpion list.</h1>
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
<dt>CSS</dt>
<dd>A language to design webpages</dd>
<dt>JavaScript</dt>
<dd>A scription language</dd>
</dl>
</body>
</html>
Form and input tags
Following is the HTML tags list for forms and inputs.
Tag Description
<form> It is used to create a form on a webpage
<input> It defines input of different type
<label> It defines label for the <input> element
<textarea> It defines resizable multi-line plain text input
<select> It provides control to select from multiple options
<optgroup> It defines a group of options in <select> element
<option> It defines an item to select within <select> element
<fieldset> It defines a group of multiple labels and inputs
<legend> It defines a caption for a <fieldset>
<datalist> It provides control to select among multiple options as well as to submit your own new
option
<button> It defines a button
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - form tag</title>
</head>
<body>
<h1>form tag is used to create forms in webpages.</h1>
<form>
Name: <input type="text">
Age: <input type="number">
<input type="submit" value="Submit">
<closeform></closeform></form>
</body>
</html>
<input> tag
The <input> tag is used to create an input component in the web pages. It needs a type attribute to tell
the browser what type of data this input component will accept.
The default value of type attribute is text. The type attribute can have many different values as shown in
the list:
type="text"
type="number"
type="email"
type="password"
type="file"
type="submit"
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - input tag</title>
</head>
<body>
<h1>input tag is used to create input components for the webpages.</h1>
<form>
Name: <input type="text"><br>
Age: <input type="number"><br>
Email: <input type="email"><br>
Password: <input type="password"><br>
Id proof: <input type="file"><br>
</body>
</html>
<label> tag
The <label> tag defines a caption for an item on the webpage. It is generally used for input elements.
The label text with input elements is not only visually associated but also programmatically associated.
When you click the text of the label element its corresponding input activates.
There are 2 ways to associate a label tag with another element:
Use for an attribute in the label tag and give the same value to the ID of the element you want to
associate with.
Nest the other elements inside the label tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - label tag</title>
</head>
<body>
<h1>label tag is used to create a caption for an item.</h1>
<p>Click on the label tag to activate the corresponding element.</p>
<form>

<label for="name">Name:</label>
<input type="text" id="name"><br>

<label>Age:
<input type="number">
</label>
</body>
</html>
<textarea> tag
The <textarea> tag defines a multiline user input component. It allows the user to adjust its size.
It is generally used to receive comments, feedback, or reviews from users.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - textarea tag</title>
</head>
<body>
<h1>textarea tag is used to multiline user input.</h1>
<form>
<label for="feedback">Feedback:</label>
<textarea id="feedback"></textarea><br>
<input type="submit" value="submit">
</body>
</html>
<option> tag
The <option> tag defines a an item to be selected in <select>, <optgroup> or <datalist> elements.
<select> tag
The <select> tag defines a control for a menu to choose one element from multiple options.
You can associate a label tag with it. When you click the control a menu will open from which you can
choose one item.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - option tag</title>
</head>
<body>
<h1>option tag creates an item to be selected.</h1>
<label for="lang">Choose one to start: </label>

<select id="lang">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="javascript">JavaScript</option>
</select>
</body>
</html>
<optgroup> tag
The <optgroup> tag is used to create a group of option in the <select> tag.
<body>
<h1>optgroup tag creates group among the options in <select> tag.</h1>
<label for="lang">Choose one to start: </label>
<select id="lang">
<optgroup label="Web Design">
</optgroup>
<optgroup label="Web Development">
<option value="Python">Python</option>
<option value="PHP">PHP</option>
</optgroup>
</select>
</body>
<fieldset> tag
The <fieldset> tag is used to group several labels and inputs in a form.
Using <legend> tag in it clearly defines the group in the form.
<legend> tag
The <legend> tag defines a caption for the content of its parent element.
<body>
<h1>fieldset tag creates group of several labels and inputs.</h1>
<form>
<fieldset>
<legend>Personal data</legend>
<label>Name: <input type="text"></label>
<label>Age: <input type="number"></label>
</fieldset>
<fieldset>
<legend>Academic data</legend>
<label>Degree: <input type="text"></label>
<label>Percentage: <input type="number"></label>
</fieldset>
<br>
</body>
<datalist> tag
The <datalist> tag defines a control that lets you choose one item from a menu and gives you the ability
to submit something other than the menu item.
<body>
<h1>datalist tag creates a control to select one item from multiple and also gives ability to submit own
item.</h1>
<form>
<label>Choose or submit you own language:
<input list="languages">
<datalist id="languages">
</datalist>
</label>
</body>
<button> tag
The <button> tag is used to create a clickable button in HTML, that can trigger some even or submit a
form.
In a form when you give type="submit" then it becomes submit button for the form.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML - button tag</title>
</head>
<body>
<h1>button tag creates a clickable button in HTML.</h1>
<form>
<label>Name: <input type="text"></label><br>
<button type="submit">Submit the form</button>
</body>
</html>

HTML Updated

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

HTML Updated

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Updated

Uploaded by

Copyright:

Available Formats

Basic HTML Tags List

These are the basic tags used in HTML5.

<!DOCTYPE> It defines the document type

<html> It is the root of HTML document

<p> It defines the paragraph in a webpage

It is used to write comments in HTML documents

<br> It defines a line break

<hr> It creates a horizontal line in a webpage

<title>HTML - html tag</title>

<p>html tag is the root of HTML document.</p>

In an HTML document there can be only one <body> tag.

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

When the paragraph tag is closed it automatically creates a new line.

<p>This is paragraph 1.</p>

<p>This is paragraph 2.</p>

multiline comment -->

<br> tag (line break)

<p>The br tag <br>

create a line break.

<hr> tag (horizontal line)

<p>b tag is used to make <b>special words</b> bold.</p>

<p>The strong tag is used to make the content <strong>very important</strong>.</p>

<p>HTML is a <i>markup language</i>.</p>

The <em> tag is used to define stress emphasis in the text.

<p>Start improving yourself from <em>today</em>!</p>

<p>Work <em>real <em>hard</em></em>.</p>

The <u> tag is used to represent a non-literary explanation.

The <sup> tag is used to display text as a superscript.

Superscript is rendered with a raised baseline and smaller text.

<p>Value of gravitational constant (G) is 6.67 x 10<sup>-11</sup>

The <sub> tag is used to display text as a subscript.

Subscript is rendered as small text with a lower baseline.

<p>The molecular formula of glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>

<p>Creating a big Y using Y with <code>pre</code> tag.</p>

<title>HTML - small tag</title>

<p>The <small> tag is used to make text <small>smaller</small>.</p>

<p><abbr title="Hypertext markup language">HTML</abbr> is used to create webpages.</p>

<p><code>document.getElementById</code> is used select element on a webpage using it's ID.</p>

<p>Useless code (<del>function useless() { }</del>) have been removed in newerverion.</p>

The ins tag adds a solid underline to its text.

<p>Plastic use for bags.</p>

<p>Use biodegradable substances for carrying bags.</p>

<p>mark tag is used to <mark>highlight</mark> a text.</p>

<p>Here is a quote from WWF's website:</p>

For indicating document edit use <del> instead.

<p><s>Use <center> tag to ceter a text in HTML.</s></p>

<p><center> tag is deprecated use CSS instead.</p>

<title>HTML - address tag</title>

Phone: 1234567890 <br>

A creative work might be a book, a research paper, a song, a painting, etc.

<title>HTML - cite tag</title>