HTML Tags
Table of Content:
There are lots of tags and they are all in pairs; there are opening tags and closing tags . The closing tag is always slightly different from the opening tag in that it has a forward slash after the first angled bracket:
A pair of tags and the content these include are known as an element . In Figure below, you can see the heading tag
Opening Tag: The opening tag says This is the beginning of a heading
Closing Tag: The closing tag says This is the end of a heading.
Text Inside: The text inside the angled brackets explains the purpose of the tag — here h1 indicates that it is a level 1 heading (or top - level heading)
Title Tag
The <head> element: Often referred to as the head of the page, this contains information about
the page (this is not the main content of the page). For example, it might contain a title and a
description of the page, or instructions on where a browser can find CSS rules that explain how
the document should look. It consists of the opening <head> tag, the closing </head> tag, and
everything in between.
The <title> element is a required HTML element used to assign a title to an HTML document. Page titles are not display
the browser window, but they are used as the page name by search engines and displayed by browsers in the title
page tab, and as the page name of bookmarked webpages.
Example
<!DOCTYPE html> <html> <head> <title>This is Title</title> </head> <body> </body> </html>
The <body> element: Often referred to as the body of the page, this contains the information you actually see in the main browser window. It consists of the opening <body> tag, closing </body> tag, and everything in between.
Output Preview in internet explorer
Heading Tags
HTML has six levels of headings, which are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
<h1> describes the most important heading and <h6> describes the least important headings.
Search Engines(like google) use the headings to index the structure and content of your web pages. Users skim your pages by their headings. It is important to use headings to show the document structure.
headings should be used for main headings, followed by <h2> headings, then the
less important <h3>, and so on.
Example
<!DOCTYPE html>
<html>
<head>
<title>List of Heading</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>
Live Preview
Paragraph Tag
<p> element describes a paragraph into whole document. Content of the each paragraph will be placed between opening tag <p> and closing tag
</p>.
Example
<!DOCTYPE html> <html> <head> <title>Example of Paragraph</title> </head> <body> <p>Content of the first paragraph will be placed here.</p> <p>Content of the second paragraph will be placed here.</p> <p>Content of the third paragraph will be placed here.</p> </body> </html>
Live Preview
Button Tag
<button> element is used to create an HTML button. Any text appearing between the opening tag (<button>) and closing tag (</button>)
appear as text on the button. No action takes place by default when a button is clicked. Actions must be added to be
using JavaScript or by associating the button with a form.
Example
<!DOCTYPE html> <html> <head> <title>Example of Button</title> </head> <body> <button>I am the Button</button> <p>No action takes place if you click on this button.</p> </body> </html>
Live Preview
Bold Tag
<b> element is used to differenciate words from the surrounding text by styling the text in bold. Another way bold text is described as a important part of the whole text. The text which you want to bold must be written between <b> and </b>.
Example
<!DOCTYPE html> <html> <head> <title>Example of Bold Text</title> </head> <body> <p>In our solar system <b>Jupiter is the largest Planet</b> but <b>Earth is most important</b> for us. </p> </body> </html>
Live Preview
Italic Tag
The <i> element is used to differentiate words from the surrounding text by styling the text in italic. Italic text must be written between <italic> and </italic>
Example
<!DOCTYPE html> <html> <head> <title>Example of Italic Text</title> </head> <body> <p>Moon is the only <i>Natural Satelite</i> of Earth.</p> </body> </html>
Live Preview
Line Break Tag
The <br> element is used to insert a line break in the document. This tag is an example of an empty element,
where you do not need opening and closing tags, as there is nothing to go in between them.
Example
<!DOCTYPE html> <html> <head> <title>Example of Line Break</title> </head> <body> <p>Address:</p> <p>New Town <br>Kolkata <br>West Bengal <br> India</p> </body> </html>
Live Preview
Horizontal Lines Tag
The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
Example
<!DOCTYPE html> <html> <head> <title>Example of Horizontal Lines</title> </head> <body> <p>Hey,It's upper part. </p> <hr> <p>and It's lower part. </p> </body> </html>
Live Preview
iframe Tag
The <iframe> creates an inline frame, which embeds an independent HTML document into the current
document. Content will be placed within opening tag (<iframe>) as a attribute and do not forgot to write
closing tag ().
<!DOCTYPE html> <html> <head> <title>Example of iframe</title> </head> <body> <iframe src=""></iframe> </body> </html>
Live Preview
Image Tag
The <img> tag is used to insert an image into the document. This tag is also an example of an empty element, where you do not need opening and closing tags
<!DOCTYPE html> <html> <head> <title>Example of Image</title> </head> <body> <img src="/library/subject-thumbnail-images/html.PNG"> </body> </html>
Live Preview
Important tags
| Tags | Short description |
| THE ROOT ELEMENT | |
<html> |
Main container |
| DOCUMENT METADATA | |
<head> |
The document's header |
<title> |
The document's title |
<base> |
Base URI to solve relative URIs |
<link> |
Relational information for documents |
<meta> |
Variable for the document |
<style> |
Presentational attributes |
| SECTIONS | |
<body> |
The document's body |
<article> |
Distributable content |
<section> |
Defines a section |
<nav> |
Navigational section |
<aside> |
Content only slightly related |
<h1> |
A level 1 heading |
<h2> |
A level 2 heading |
<h3> |
A level 3 heading |
<h4> |
A level 4 heading |
<h5> |
A level 5 heading |
<h6> |
A level 6 heading |
<hgroup> |
Groups consecutive headings |
<header> |
The header of a section |
<footer> |
The footer of a section |
<address> |
Author’s contact information |
| GROUPING CONTENT | |
<p> |
Paragraph |
<hr> |
Content separator |
<pre> |
Preformatted text block |
<blockquote> |
Block level quotation |
<ol> |
Ordered list |
<ul> |
Unordered list |
<li> |
List item |
<dl> |
Description list |
<dt> |
Term in a description list |
<dd> |
Description in a description list |
<figure> |
Self-contained information |
<figcaption> |
Caption for a figure |
<main> |
Main content of a section |
<div> |
Generic container for blocks of text |
| TEXT-LEVEL SEMANTICS | |
<a> |
Hyperlink |
<em> |
Text with emphasis |
<strong> |
Text with strong emphasis |
<small> |
Side commment |
<s> |
Content no longer accurate or relevant |
<cite> |
Citation or reference |
<q> |
Inline quotation |
<dfn> |
Term defined in the surrounding text |
<abbr> |
Abbreviated term |
<ruby> |
Ruby annotated text |
<rt> |
Ruby annotation |
<rp> |
Text to be ignored in ruby |
<data> |
Machine-readable information |
<time> |
Date and/or time |
<code> |
Computer code |
<var> |
Instance of a variable |
<samp> |
A program’s sample output |
<kbd> |
Text entered by users |
<sub> |
Tex to en subÃndice |
<sup> |
Texto en superÃndice |
<i> |
Text offset from the normal prose |
<b> |
Text offset from its surrounding content |
<u> |
Non-textual annotations |
<mark> |
Marks text in another document |
<bdi> |
Isolates text for bidirectional formatting |
<bdo> |
Overrides the bidirectional algorithm |
<span> |
Generic container for runs of text |
<br> |
Line break |
<wbr> |
Line break opportunity |
| EDITS | |
<ins> |
Added text |
<del> |
Deleted text |
| EMBEDDED CONTENT | |
<picture> |
Multi-source image |
<img> |
Image |
<iframe> |
Nested browsing context |
<embed> |
Inserts external applications |
<object> |
Inserts external applications |
<param> |
Parameter for an external application |
<video> |
Video |
<audio> |
Audio |
<source> |
Alternative media resource |
<track> |
Text tracks for videos |
<map> |
Client-side image map |
<area> |
Sector in an image map |
| TABULAR DATA | |
<table> |
Table |
<caption> |
The caption of a table |
<colgroup> |
Group of columns |
<col> |
Sets attributes for columns |
<tbody> |
The body of the table |
<thead> |
The header of the table |
<tfoot> |
The footer of the table |
<tr> |
Row |
<td> |
Regular cell |
<th> |
Header cell |
| FORMS | |
<form> |
Form |
<label> |
Label for a control |
<input> |
Input control |
<button> |
Button |
<select> |
List of options |
<datalist> |
Suggestions for controls |
<optgroup> |
Group of options in a list |
<option> |
An option in list |
<textarea> |
Multi-line text input |
<keygen> |
Key pair generation control |
<output> |
The output of a process |
<progress> |
A task’s completion progress |
<meter> |
A measurement |
<fieldset> |
Group of controls |
<legend> |
The caption of a group of controls |
| INTERACTIVE ELEMENTS | |
<details> |
Collapsable content |
<summary> |
A summary for collapsable content |
<menu> |
Menu |
<menuitem> |
An item in a menu |
<dialog> |
Dialog box |
| SCRIPTING | |
<script> |
Embeds scripts |
<noscript> |
Alternative content for scripts |
<template> |
Plantilla para información a agregar |
<canvas> |
Container for dynamic bitmap graphics |