Learn the complete HTML tags with HTML example for beginners to advanced. In this content, all the HTML tags are writing sort and simple with proper HTML example.
<html> ..... </html>
This tag specifies that the webpage is written
in HTML. It appears at the starting and end
of the webpage. It is mainly used to show that
the page uses HTML5 – the latest version of
the language. Also known as the root element,
this tag can be thought of as a parent tag for
every other tag used in the page.
<head> ..... </head>
This tag is used to specify metadata about
the webpage. It includes the webpage name,
its dependencies (JS and CSS scripts), font usage, etc.
<title> ..... </title>
As the name suggests, this tag contains
the title/name of the webpage. You can see this
in your browser’s title bar for every webpage open
in the browser. Search engines use this tag to
extract the topic of the webpage, which is quite
convenient when ranking relevant search results.
<body> ..... </body>
Everything the user sees on a webpage is written
inside the body tag. It is a container for all the contents
of the webpage.
Example
<html>
<head>
<title>My First Website</title>
</head>
<body>
Everything is possible,
when you try your best.
</body>
</html>
<base>
This tag is used to specify the base URL of your site,
this tag makes linking to internal links on your
site cleaner.
<meta>
This is the metadata tag for the webpage.
Can be useful for mentioning the page’s author,
keywords, original published date, etc.
<link>
This is used to link to scripts external to
the webpage. Typically utilized for including
stylesheets.
<style> ..... </style>
The style tag can be used as an alternative to
an external style sheet, or complement it.
Includes the webpage’s appearance information.
<script> … </script>
This tag is used to add code snippets, typically in JavaScript,
to make webpage dynamic. It can also be used to
just link to an external script.
Example
<html>
<head>
<meta charset="utf-8">
<base href="http://codetextpro.com"
target="_blank" />
<title>My Beautiful Website</title>
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript">
var codetextpro = 0;
</script>
</head>
<body>
Don't think too much
</body>
</html>
<a href=” ”> ..... </a>
Anchor tag. Primarily used for including
hyperlinks.
<a href=”mailto:”> ..... </a>
This tag is used to sending emails.
<a href=”tel://###-###”> ..... </a>
Anchor tag for mentioning contact numbers.
As the numbers are clickable, this can be
particularly beneficial for mobile users.
<a name=”name”> ..... </a>
This tag can be used to quickly navigate to
a different part of the webpage.
<a href=”#name”> ..... </a>
A variation of the above tag, this is only meant
to navigate to a div section of the webpage.
<img />
A tag to display images in the webpage.
src=” URL”
The URL or path where the image is located on
your drive or on the web.
alt=” text”
The text written here is displayed when the user
hovers the mouse over the image. Can be used to
give additional details of the image.
height=” ”
Specifies image height in pixels or percentages.
width=” ”
Specifies image width in pixels or percentages.
align=” ”
The relative alignment of the image. Can change
with changes to other elements in the webpage.
border=” ”
Specifies border thickness of the image. If not
mentioned, defaults to 0.
<map> ..... </map>
Denotes an interactive (clickable) image.
<map name=””> ..... </map>
Name of the map associated between the image
and the map.
<area />
Specifies image map area.
shape=” ”
The shape of the area.
coords=” ”
Coordinates of the vital information of the shape.
Example: vertices for rectangles, center/radius
for circles.
Example
<html>
<head>
<title>My First Website</title>
</head>
<body>
<img src="tree.gif" width="150" height="130"
alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,60,100"
href="green.html" alt="Green">
<area shape="circle" coords="90,58,3"
href="mercur.html" alt="Mercury">
<area shape="circle" coords="124,58,8"
href="venus.html" alt="Venus">
</map>
</body>
</html>
<ol> ..... </ol>
This tag used for ordered list or numbered list of items.
<ul> ..... </ul>
This tag, used for unordered list of items.
<li> ..... </li>
Individual item as part of a list.
<dl> ..... </dl>
This tag used for list of items with definitions.
<dt> ..... </dt>
The definition of a single term inline with
body content.
<dd> ..... </dd>
The description for the defined term.
Example
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
<dl>
<dt>Toyota</dt>
<dd>Japanese car brand</dd>
<dt>Armani</dt>
<dd>Italian fashion brand</dd>
</dl>
<form> ..... </form>
The parent tag is used for an HTML form.
action=” URL”
The URL listed here is where the form data
will be submitted once the user fills it.
method=” ”
It specifies which HTTP method (POST or GET)
would be used to submit the form.
enctype=” ”
Only for the POST method, this dictates the data
encoding scheme to be used when the form
is submitted.
autocomplete
Determines if the form has to autocomplete enabled.
novalidate
Determines whether the form should be validated
before submission.
accept-charsets
Determines character encodings when the form
is submitted.
target
After submission, the form response is displayed
wherever this refers to, usually has the following
values: _blank, _self, _parent, _top
<fieldset> ..... </fieldset>
Identifies the group of all fields on the form.
<label> ..... </label>
This is used to label a field in the form.
<legend> ..... </legend>
This operates as a caption for the <fieldset>
element.
<input />
This tag is used to take input from the user.
The input type is determined by a number of attributes.
type=” ”
Determines which type of input (text, dates,
password) is requested from the user.
name=” ”
Specifies the name of the input field.
value=” ”
Specifies the value contained currently in
the input field.
size=” ”
Determines the input element width
(number of characters).
maxlength=” ”
Specifies the most input field characters allowed.
required
Makes an input field compulsory to be filled by
the user. The form cannot be submitted if a required
field is left empty.
width=” ”
Determines the width of the input element,
in pixel values.
height=” ”
Determines the height of the input element,
in pixel values.
placeholder=” ”
Can be used to give hints to the user about nature
of the requested data.
pattern=” ”
Specifies a regular expression, which can be used to
look for patterns in the user’s text.
min=” ”
The minimum value allowed for an <input> element.
max=” ”
The maximum value allowed for an <input> element.
autofocus
Forces focus on the input element when the webpage
loads completely.
disabled
Disables the input element. User can no longer
enter data.
<textarea> ..... </textarea>
This tag is used for longer strings of input. Can be used to get
a multi-sentence text from the user.
<select> ..... </select>
This tag specifies a list of options which the user
can choose from.
name=” ”
The name of a particular list of options.
size=” ”
The total number of options given to the user.
multiple
States whether the user can choose multiple
options from the list.
required
Specifies whether choosing options is
necessary for form submission.
autofocus
Specifies that a drop-down list automatically
comes into focus after a page load.
<option> ..... </option>
This tag is used for listing individual items in the list
of options.
value=” ”
The text is visible to the user for any given option.
selected
Determines which option is selected by default
when the form loads.
<button> ..... </button>
This tag is used for creating a button for form submission.
Example
<form action="form_submit.php" method="post">
<fieldset>
<legend>Bio:</legend>
First name:<br>
<input type="text" name="first-name"
value="John" placeholder="Please
enter your first name here"><br>
Last name:<br>
<input type="text" name="last-name"
value="Doe" placeholder="Please
enter your last name here"><br><br>
Favorite sport:<br>
<select>
<option value="soccer">Soccer
</option>
<option value="tennis">Tennis
</option>
<option value="golf">Golf
</option>
</select>
<textarea name="description">
</textarea>
<input type="submit" value="Submit">
</fieldset>
</form>
<table> ..... </table>
Marks a table in a webpage.
<caption> ..... </caption>
Description of the table is placed inside this tag.
<thead> ..... </thead>
Specifies information pertaining to specific
columns of the table.
<tbody> ..... </tbody>
The body of a table, where the data is held.
<tfoot> ..... </tfoot>
Determines the footer of the table.
<tr> ..... </tr>
Denotes a single row in a table.
<th> ..... </th>
The value of a heading of a table’s column.
<td> ..... </td>
A single cell of a table. Contains the actual
value/data.
<colgroup> ..... </colgroup>
Used for grouping columns together.
<col>
Denotes a column inside a table.
Example
<table>
<colgroup>
<col span="2">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Major</th>
<th>GPA</th>
</tr>
<tr>
<td>Bob</td>
<td>Law</td>
<td>3.55</td>
</tr>
<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>
</table>
<html> ..... </html>
This tag specifies that the webpage is written
in HTML. It appears at the starting and end
of the webpage. It is mainly used to show that
the page uses HTML5 – the latest version of
the language. Also known as the root element,
this tag can be thought of as a parent tag for
every other tag used in the page.
<head> ..... </head>
This tag is used to specify metadata about
the webpage. It includes the webpage name,
its dependencies (JS and CSS scripts), font usage, etc.
<title> ..... </title>
As the name suggests, this tag contains
the title/name of the webpage. You can see this
in your browser’s title bar for every webpage open
in the browser. Search engines use this tag to
extract the topic of the webpage, which is quite
convenient when ranking relevant search results.
<body> ..... </body>
Everything the user sees on a webpage is written
inside the body tag. It is a container for all the contents
of the webpage.
Example
<html>
<head>
<title>My First Website</title>
</head>
<body>
Everything is possible,
when you try your best.
</body>
</html>
 |
| First website |
<base>
This tag is used to specify the base URL of your site,
this tag makes linking to internal links on your
site cleaner.
<meta>
This is the metadata tag for the webpage.
Can be useful for mentioning the page’s author,
keywords, original published date, etc.
<link>
This is used to link to scripts external to
the webpage. Typically utilized for including
stylesheets.
<style> ..... </style>
The style tag can be used as an alternative to
an external style sheet, or complement it.
Includes the webpage’s appearance information.
<script> … </script>
This tag is used to add code snippets, typically in JavaScript,
to make webpage dynamic. It can also be used to
just link to an external script.
Example
<html>
<head>
<meta charset="utf-8">
<base href="http://codetextpro.com"
target="_blank" />
<title>My Beautiful Website</title>
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript">
var codetextpro = 0;
</script>
</head>
<body>
Don't think too much
</body>
</html>
 |
| Beautiful website |
<h1..h6> ..... </h1..h6>
Six different variations of writing a heading.
<h1> has the largest font size, while <h6> has
the smallest font size.
<html>
<head>
<title>My Beautiful
Website</title>
Website</title>
</head>
<body>
<h1>CodeTextPro</h1>
<h2>CodeTextPro</h2>
<h3>CodeTextPro</h3>
<h4>CodeTextPro</h4>
<h5>CodeTextPro</h5>
<h6>CodeTextPro</h6>
</body>
</html>
 |
| h1 to h6 |
<div> ..... </div>
A webpage’s content is usually divided into
blocks, specified by the div tag.
<span> … </span>
This tag injects inline elements, like an image,
icon, emoticon without ruining the formatting
/ styling of the page.
<p> ..... </p>
Plain text is placed inside this tag.
<br>
This tag is used for line break for webpages. Is used when
wanting to write a new line.
<hr>
Similar to the above tag. But in addition to
switching to the next line, this tag also draws
a horizontal bar to indicate the end
of the section.
<tt> ..... </tt>
Formatting for typewriter-like text. No longer
supported in HTML5.
<strike> ..... </strike>
Another old tag, this is used to draw a line at
the center of the text, so as to make it appear
unimportant or no longer useful.
<cite> ..... </cite>
Tag for citing author of a quote.
<del> ..... </del>
Pre-formatted, ‘monospace’ text laid out with
whitespace inside the element intact.
<ins> ..... </ins>
Denotes text that has been inserted into
the webpage.
<blockquote> ..... </blockquote>
Quotes often go into this tag. It's used in tandem with
the <cite> tag.
<q> ..... </q>
Similar to the above tag, but for shorter quotes.
<abbr> ..... </abbr>
Denotes abbreviations, along with the full forms.
<acronym> ..... </acronym>
Tag for acronyms. No HTML5 support.
<address> ..... </address>
Tag for specifying author’s contact details.
<dfn> ..... </dfn>
Tag dedicated for definitions.
<code> ..... </code>
This is used to display code snippets within
a paragraph.
<sub> ..... </sub>
Used for writing a subscript (smaller font just
below the mid-point of normal font).
<sup> ..... </sup>
Similar to the above tag, but for superscripting.
<small> ..... </small>
Reduces text size. In HTML5, it often refers to
redundant or invalid information.
<strong> ..... </strong>
Makes text bold. Used to emphasize a point
<b> ..... </b>
Alternative to the above tag, also creates bold text.
<em> ..... </em>
Another emphasis tag, but this displays text
in italics.
<i> ..... </i>
Also used to display text in italics, but does not
emphasize it like the above tag.
Example
<html>
<head>
<title>CodeTextPro</title>
</head>
<body>
<p><strong>Bold Text</strong> Regular Text
<em>some words in italics</em> regular text
once again.</p>
<blockquote>
Anyone who has never made a mistake has never
tried anything new.<cite> - Albert Einstein</cite>
</blockquote>
<pre>
Some pre-formatted text
</pre>
<p>A code snippet: <code>some code</code></p>
</body>
</html>
Formatting for typewriter-like text. No longer
supported in HTML5.
<strike> ..... </strike>
Another old tag, this is used to draw a line at
the center of the text, so as to make it appear
unimportant or no longer useful.
<cite> ..... </cite>
Tag for citing author of a quote.
<del> ..... </del>
Pre-formatted, ‘monospace’ text laid out with
whitespace inside the element intact.
<ins> ..... </ins>
Denotes text that has been inserted into
the webpage.
<blockquote> ..... </blockquote>
Quotes often go into this tag. It's used in tandem with
the <cite> tag.
<q> ..... </q>
Similar to the above tag, but for shorter quotes.
<abbr> ..... </abbr>
Denotes abbreviations, along with the full forms.
<acronym> ..... </acronym>
Tag for acronyms. No HTML5 support.
<address> ..... </address>
Tag for specifying author’s contact details.
<dfn> ..... </dfn>
Tag dedicated for definitions.
<code> ..... </code>
This is used to display code snippets within
a paragraph.
<sub> ..... </sub>
Used for writing a subscript (smaller font just
below the mid-point of normal font).
<sup> ..... </sup>
Similar to the above tag, but for superscripting.
<small> ..... </small>
Reduces text size. In HTML5, it often refers to
redundant or invalid information.
<strong> ..... </strong>
Makes text bold. Used to emphasize a point
<b> ..... </b>
Alternative to the above tag, also creates bold text.
<em> ..... </em>
Another emphasis tag, but this displays text
in italics.
<i> ..... </i>
Also used to display text in italics, but does not
emphasize it like the above tag.
Example
<html>
<head>
<title>CodeTextPro</title>
</head>
<body>
<p><strong>Bold Text</strong> Regular Text
<em>some words in italics</em> regular text
once again.</p>
<blockquote>
Anyone who has never made a mistake has never
tried anything new.<cite> - Albert Einstein</cite>
</blockquote>
<pre>
Some pre-formatted text
</pre>
<p>A code snippet: <code>some code</code></p>
</body>
</html>
<a href=” ”> ..... </a>
Anchor tag. Primarily used for including
hyperlinks.
<a href=”mailto:”> ..... </a>
This tag is used to sending emails.
<a href=”tel://###-###”> ..... </a>
Anchor tag for mentioning contact numbers.
As the numbers are clickable, this can be
particularly beneficial for mobile users.
<a name=”name”> ..... </a>
This tag can be used to quickly navigate to
a different part of the webpage.
<a href=”#name”> ..... </a>
A variation of the above tag, this is only meant
to navigate to a div section of the webpage.
<img />
A tag to display images in the webpage.
src=” URL”
The URL or path where the image is located on
your drive or on the web.
alt=” text”
The text written here is displayed when the user
hovers the mouse over the image. Can be used to
give additional details of the image.
height=” ”
Specifies image height in pixels or percentages.
width=” ”
Specifies image width in pixels or percentages.
align=” ”
The relative alignment of the image. Can change
with changes to other elements in the webpage.
border=” ”
Specifies border thickness of the image. If not
mentioned, defaults to 0.
<map> ..... </map>
Denotes an interactive (clickable) image.
<map name=””> ..... </map>
Name of the map associated between the image
and the map.
<area />
Specifies image map area.
shape=” ”
The shape of the area.
coords=” ”
Coordinates of the vital information of the shape.
Example: vertices for rectangles, center/radius
for circles.
Example
<html>
<head>
<title>My First Website</title>
</head>
<body>
<img src="tree.gif" width="150" height="130"
alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,60,100"
href="green.html" alt="Green">
<area shape="circle" coords="90,58,3"
href="mercur.html" alt="Mercury">
<area shape="circle" coords="124,58,8"
href="venus.html" alt="Venus">
</map>
</body>
</html>
<ol> ..... </ol>
This tag used for ordered list or numbered list of items.
<ul> ..... </ul>
This tag, used for unordered list of items.
<li> ..... </li>
Individual item as part of a list.
<dl> ..... </dl>
This tag used for list of items with definitions.
<dt> ..... </dt>
The definition of a single term inline with
body content.
<dd> ..... </dd>
The description for the defined term.
Example
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
<dl>
<dt>Toyota</dt>
<dd>Japanese car brand</dd>
<dt>Armani</dt>
<dd>Italian fashion brand</dd>
</dl>
<form> ..... </form>
The parent tag is used for an HTML form.
action=” URL”
The URL listed here is where the form data
will be submitted once the user fills it.
method=” ”
It specifies which HTTP method (POST or GET)
would be used to submit the form.
enctype=” ”
Only for the POST method, this dictates the data
encoding scheme to be used when the form
is submitted.
autocomplete
Determines if the form has to autocomplete enabled.
novalidate
Determines whether the form should be validated
before submission.
accept-charsets
Determines character encodings when the form
is submitted.
target
After submission, the form response is displayed
wherever this refers to, usually has the following
values: _blank, _self, _parent, _top
<fieldset> ..... </fieldset>
Identifies the group of all fields on the form.
<label> ..... </label>
This is used to label a field in the form.
<legend> ..... </legend>
This operates as a caption for the <fieldset>
element.
<input />
This tag is used to take input from the user.
The input type is determined by a number of attributes.
type=” ”
Determines which type of input (text, dates,
password) is requested from the user.
name=” ”
Specifies the name of the input field.
value=” ”
Specifies the value contained currently in
the input field.
size=” ”
Determines the input element width
(number of characters).
maxlength=” ”
Specifies the most input field characters allowed.
required
Makes an input field compulsory to be filled by
the user. The form cannot be submitted if a required
field is left empty.
width=” ”
Determines the width of the input element,
in pixel values.
height=” ”
Determines the height of the input element,
in pixel values.
placeholder=” ”
Can be used to give hints to the user about nature
of the requested data.
pattern=” ”
Specifies a regular expression, which can be used to
look for patterns in the user’s text.
min=” ”
The minimum value allowed for an <input> element.
max=” ”
The maximum value allowed for an <input> element.
autofocus
Forces focus on the input element when the webpage
loads completely.
disabled
Disables the input element. User can no longer
enter data.
<textarea> ..... </textarea>
This tag is used for longer strings of input. Can be used to get
a multi-sentence text from the user.
<select> ..... </select>
This tag specifies a list of options which the user
can choose from.
name=” ”
The name of a particular list of options.
size=” ”
The total number of options given to the user.
multiple
States whether the user can choose multiple
options from the list.
required
Specifies whether choosing options is
necessary for form submission.
autofocus
Specifies that a drop-down list automatically
comes into focus after a page load.
<option> ..... </option>
This tag is used for listing individual items in the list
of options.
value=” ”
The text is visible to the user for any given option.
selected
Determines which option is selected by default
when the form loads.
<button> ..... </button>
This tag is used for creating a button for form submission.
Example
<form action="form_submit.php" method="post">
<fieldset>
<legend>Bio:</legend>
First name:<br>
<input type="text" name="first-name"
value="John" placeholder="Please
enter your first name here"><br>
Last name:<br>
<input type="text" name="last-name"
value="Doe" placeholder="Please
enter your last name here"><br><br>
Favorite sport:<br>
<select>
<option value="soccer">Soccer
</option>
<option value="tennis">Tennis
</option>
<option value="golf">Golf
</option>
</select>
<textarea name="description">
</textarea>
<input type="submit" value="Submit">
</fieldset>
</form>
<table> ..... </table>
Marks a table in a webpage.
<caption> ..... </caption>
Description of the table is placed inside this tag.
<thead> ..... </thead>
Specifies information pertaining to specific
columns of the table.
<tbody> ..... </tbody>
The body of a table, where the data is held.
<tfoot> ..... </tfoot>
Determines the footer of the table.
<tr> ..... </tr>
Denotes a single row in a table.
<th> ..... </th>
The value of a heading of a table’s column.
<td> ..... </td>
A single cell of a table. Contains the actual
value/data.
<colgroup> ..... </colgroup>
Used for grouping columns together.
<col>
Denotes a column inside a table.
Example
<table>
<colgroup>
<col span="2">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Major</th>
<th>GPA</th>
</tr>
<tr>
<td>Bob</td>
<td>Law</td>
<td>3.55</td>
</tr>
<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>
</table>
0 Comments