Category: References

When users visit your website, they do things like click various links, bring mouse over text and images etc. These are examples of what we call events in JavaScript and VBScript terminologies.

We can write our event handlers using JavaScript or VBScript and can specify some actions to be taken against these events. Though these are the events but they will be specified as attributes for the HTML tags.

The HTML 4.01 specification had defined 19 events but later HTML-5 has added many other events which we have listed down here −

Window Events Attributes

Following are the window events attributes that are listed below −

Sr.No	Events & Description
1	onafterprintTriggers after a document is printed
2	onbeforeprintTriggers before a document is printed
3	onbeforeunloadTriggers before a document loads
4	onerrorTriggers when an error occurs
5	onhashchangeTriggers when a document has changed
6	onloadTriggers when a document loads
7	onofflineTriggers when a document goes offline
8	ononlineTriggers when a document comes online
9	onpagehideTriggers when a window is hidden
10	onpageshowTriggers when a window becomes visible
11	onresizeTriggers when a window is resized
12	onunloadTriggers when a user leaves the document

Form Events

Following are the Form events attributes that are listed below −

Sr.No	Events & Description
1	onblurTriggers when a window loses focus
2	onchangeTriggers when an element changes
3	oncontextmenuTriggers when a context menu is triggered
4	onfocusTriggers when a window gets focus
5	oninputTriggers when an element gets user input
6	oninvalidTriggers when an element is invalid
7	onresetTriggers when a form is reset
8	onsearchThe HTML onsearch event allows to run specific JavaScript code when a user conducts a search action within a searchable input field.
9	onselectTriggers when an element is selected
10	onsubmitTriggers when a form is submitted

Keyboard Events

Following are the HTML Keyboard Events that are listed below −

Sr.No	Events & Description
1	onkeydownTriggers when a key is pressed
2	onkeyupTriggers when a key is released

Mouse Events

Following are the Mouse events attributes that are listed below −

Sr.No	Events & Description
1	onclickTriggers on a mouse click
2	ondblclickTriggers on a mouse double-click
3	onmousedownTriggers when a mouse button is pressed
4	onmousemoveTriggers when the mouse pointer moves
5	onmouseoutTriggers when the mouse pointer moves out of an element
6	onmouseoverTriggers when the mouse pointer moves over an element
7	onmouseupTriggers when a mouse button is released
8	onwheelWhen the mouse wheel is over an element, the HTML onwheel event takes place.

Drag Events

Following are the HTML drag events that are listed below −

Sr.No	Events & Description
1	ondragTriggers when an element is dragged
2	ondragendTriggers at the end of a drag operation
3	ondragenterTriggers when an element has been dragged to a valid drop target
4	ondragleaveTriggers when an element leaves a valid drop target
5	ondragoverTriggers when an element is being dragged over a valid drop target
6	ondragstartTriggers at the start of a drag operation
7	ondropTriggers when a dragged element is being dropped
8	onscrollTriggers when an element’s scrollbar is being scrolled

Clipboard Events

Let’s look into the following clipboard events that are listed below −

Sr.No	Events & Description
1	oncopyTriggers when an element is copied by the user
2	oncutTriggers when an element is removed (cut) by the user
3	onpasteTriggers when an element is being pasted into an input field.

Media Events

Following are the Media events attributes that are listed below −

Sr.No	Events & Description
1	ondurationchangeTriggers when the length of a media is changed
2	onendedTriggers when a media has reached the end
3	onerrorTriggers when an error occurs
4	onloadeddataTriggers when media data is loaded
5	onloadedmetadataTriggers when the duration and other media data of a media element is loaded
6	onloadstartTriggers when the browser starts loading the media data
7	onpauseTriggers when media data is paused
8	onplayTriggers when media data is going to start playing
9	onplayingTriggers when media data has started playing
10	onprogressTriggers when the browser is fetching the media data
11	onratechangeTriggers when the playing rate of media data has changed
12	onseekedTriggers when the seeking attribute of a media element is no longer true, and the seeking has ended
13	onseekingTriggers when the seeking attribute of a media element is true, and the seeking has begun
14	onstalledTriggers when there is an error in fetching media data
15	onsuspendTriggers when the browser has been fetching media data, but stopped before the entire media file was fetched
16	ontimeupdateTriggers when media changes its playing position
17	onvolumechangeTriggers when a media changes the volume, also when volume is set to “mute”
18	onwaitingTriggers when media has stopped playing, but is expected to resume

Misc Events

Following the misc event listed below −

Sr.No	Event & Description
1	ontoggleIn general, the toggle means it toggles between hide() and show() for the selected element.

HTML attributes define the characteristics of an HTML element and are placed with the element’s opening tag. These are special words with specific meaning and are used either to change the default functionality or to add more functionalities to an element.

Here you will find the list of all HTML attributes with their usages and examples. We categorized this HTML attribute reference page in the following sections −

• HTML Local Attributes
• HTML Global Attributes
• HTML Boolean Attributes

Local Attributes

Local attributes are element-specific; these attributes can be used on some specific HTML elements. The table below lists all HTML local attributes−

Attribute	Description	Example
accept	The HTML accept attribute is used to describe what file type the user should be allowed to select from a file input dialog box.	Try It
accept-charset	The HTML accept-charset attribute is used to specify the character encodings that are to be used for the form submission.	Try It
action	The HTML action attribute is used to specify a URL that processes the form submission.	Try It
align	The alignment of content within an HTML element, such as images or tables, was specified by the HTML align attribute.	Try It
alt	The alt attribute is essential for supplying alternative text for images, facilitating accessibility, and improving user experience.	Try It
async	The HTML async attribute is a Boolean attribute that is used to specify the script to execute/run as soon as its loaded.	Try It
autofocus	The HTML autofocus attribute is a boolean attribute that is used to specify that an element should be autofocused after the page has loaded.	Try It
bgcolor	The HTML bgcolor attribute or property is used to represent the background color of elements.	Try It
border	The border of an HTML element, such as tables and images, can be specified using the HTML border attribute.	Try It
charset	The HTML charset attribute is used for the character encoding in the HTML document.	Try It
checked	The HTML checked attribute is a boolean attribute that indicates whether a checkbox is checked by default (when the page loads).	Try It
class	One or more classes can be specified for an HTML element using the class attribute, which is a fundamental element.	Try It
color	The HTML color attribute is used to set the text color of the font element.	Try It
cols	The HTML cols attribute is used to set or specify the visible width of a text area element.	Try It
colspan	The HTML colspan attribute is used to define how many table columns a cell should span or extend.	Try It
content	The HTML content attribute is used to display/contain the value for the name or HTTP-equiv attribute, depending on which is used.	Try It
coords	The HTML coords attribute is used to specify/set the coordinates of an area in an image map.	Try It
data	The HTML data attribute is used to specify the URL for the resource.	Try It
datetime	The HTML datetime attribute is used to indicate the date and time associated with the element.	Try It
default	The HTML default attribute is a boolean attribute that is used to indicate that a track should be enabled unless the user’s preferences indicate that another track is more appropriate.	Try It
defer	The HTML defer attribute is a boolean attribute that specifies that the script is downloaded parallel to parsing the page, and is executed after parsing the page.	Try It
dirname	The HTML dirname attribute is used to enable the submission of the directionality of the element.	Try It
disabled	The HTML disabled attribute is used to specify that the element is disabled.	Try It
download	The HTML download attribute is used to specify that the resource( the file or resource specified in the href attribute) will be downloaded when a user clicks on the hyperlink.	Try It
enctype	The HTML enctype attribute is used to specify how the form input data should be encoded before sending it to the server.	Try It
formaction	The HTML formaction attribute is used to specify an URL of the file that will process the input controls and redirect to a different page when the form is submitted.	Try It
headers	The HTML header attribute is used to specify a table cell that contains the header information for the current data cell.	Try It
height	In HTML, the height attribute is frequently used to specify the vertical dimension in pixels of an element, such as an image or an iframe.	Try It
high	The HTML high attribute is used to specify the lower bound of an upper range.	Try It
href	The HTML href attribute is used to specify the URL that a hyperlink points to.	Try It
hreflang	The HTML hreflang attribute is used to specify the language of the linked document or URL.	Try It
httpequiv	The HTML http-equiv attribute is used to define the pragma directive.	Try It
id	An HTML element that is used to identify an HTML element on a webpage is the id attribute.	Try It
ismap	The HTML ismap attribute is a Boolean attribute that is used to specify that the image is part of a server-side image map.	Try It
kind	The HTML kind attribute is used to specify the kind of text track for the audio/video.	Try It
list	The HTML list attribute refers to the datalist element that contains the predefined options for an input element.	Try It
low	The HTML low attribute indicates the upper limit of the lower range.	Try It
max	The HTML max attribute is used to define the maximum value that is acceptable and valid for an input field.	Try It
maxlength	The HTML maxlength attribute is used to define the maximum number of characters the user can enter into an input and textarea field.	Try It
media	The HTML media attribute is used to specify a hint of the media for which the linked resource was designed.	Try It
method	The HTML method attribute is used to define which HTTP method to use when submitting the form.	Try It
minlength	The HTML minlength attribute is used to define the minimum number of characters that a user can enter into an ‘input’ or ‘textarea’ field.	Try It
min	For input elements such as <input type=”number”>, <input type=”date”>, or <input type=”time”>, the min attribute in HTML is used to define the minimal value.	Try It
multiple	The HTML multiple attribute is a Boolean attribute, and if present, it allows form controls to accept more than one value.	Try It
name	The HTML name attribute is used to specify the name of an element.	Try It
open	The open attribute is an HTML attribute that indicates or specifies whether the details, that is, the contents of the <details> element, are currently visible.	Try It
optimum	The optimum is an HTML attribute that specifies the range where the gauges (to determine the capacity of contents or estimate a judge’s) value is considered to be an optimal value.	Try It
pattern	The HTML pattern attribute is usually used with input elements, particularly text fields like input and textarea.	Try It
placeholder	The HTML placeholder attribute is used to define a short hint that helps the user with data entry.	Try It
poster	The HTML poster attribute is used to specify an image/poster for the video.	Try It
readonly	The HTML readonly attribute is used to specify that an input, or textarea field, is read-only.	Try It
rel	The rel is an HTML attribute that specifies the relationship between the current document and the linked document or resource.	Try It
required	The HTML required attribute is a boolean attribute. It is used to specify that an input field must be filled by users before submitting the form.	Try It
reversed	This attribute can be helpful when you want to show a countdown or sort items by decreasing value.	Try It
rows	The rows is an HTML attribute that is used to specify the height of the textarea in lines.	Try It
rowspan	The rowspan is an HTML attribute that specifies the number of rows spanned by a cell or grid cell within a table or grid.	Try It
sandbox	The sandbox is an HTML attribute that stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows).	Try It
scope	The scope is an HTML attribute that is used to define the header cell.	Try It
selected	In HTML, to choose element’s options from a dropdown menu are utilized using the selected attribute.	Try It
shape	The shape is an HTML attribute used to specify an area’s shape.	Try It
size	The size is an HTML attribute that is used to specify the initial width of the input field and the number of visible rows for the selected element.	Try It
sizes	The sizes is an HTML attribute that specifies the sizes of the linked resources. It is used to provide the sizes of icons for visual media.	Try It
src	The HTML src attribute is used to represent external resources such as images, videos, audio, and URLs in the page from the external or device resource.	Try It
span	The span attribute is an HTML attribute that specifies the number of columns a <col> or <colgroup> element should span.	Try It
srcdoc	The srcdoc is an HTML attribute that specifies the HTML content on the page to show in the inline frame.	Try It
srclang	The srclang attribute is an HTML attribute that is used to specify the language of the track text.	Try It
srcset	The srcset is an HTML attribute that is used to specify the URL of an image to use in different situations.	Try It
start	The start attribute is an HTML attribute that specifies the initial value of the ordered list in numeric form.	Try It
step	It is used to set the interval between legal numbers or the distinct step size of the <input> tag.	Try It
style	The HTML style attribute contains a CSS styling declaration and is used to apply it to an element.	Try It
target	The target is an HTML attribute that is used to specify where to open the linked document.	Try It
type	The type is an HTML attribute that specifies the type of element.	Try It
usemap	The usemap is an HTML attribute that creates relationships between <img> and <map> by specifying an image or an object with clickable areas.	Try It
value	For various form elements like input fields, checkboxes, radio buttons, and select options, the initial or default value is specified using the HTML value attribute.	Try It
width	The width of an element can be specified in pixels or as a percentage of its parent container using the HTML width attribute.	Try It
wrap	The wrap attribute of HTML ref is used to wrap the text in a text area when submitted in a HTML form.	Try It

Global Attributes

Global attributes are common to all HTML elements and can be used universally. The table below lists all HTML global attributes −

Attribute	Description	Example
accesskey	The accesskey is a global attribute that provides a hint for generating a keyboard shortcut for the current element.	Try It
class	The class is a global attribute that is used to specify the class name for the current element or tag.	Try It
contenteditable	The contenteditable attribute is an HTML global attribute that specifies or indicates whether or not the content present in the browser is editable by the user.	Try It
data-*	Used to store custom data associated with the element.	Try It
dir	The dir attribute is used to control the text direction in websites.	Try It
draggable	The draggable is an HTML global attribute that is used to specify whether an element is draggable or not.	Try It
hidden	The Hidden HTML Global attribute indicates that the content of an element should not be displayed to the user.	Try It
id	The id is an HTML global attribute that defines an identifier (id) that must be unique in the whole HTML document.	Try It
lang	The lang attribute is an HTML Global attribute that is used to define the language of an element’s content.	Try It
spellcheck	Several elements, including text input fields and contenteditable elements, can have the spellcheck global attribute applied to them in HTML.	Try It
style	A global attribute in HTML called style enables programmers to apply inline CSS styles to HTML elements.	Try It
tabindex	Specifies the tab order of an element.	Try It
title	A text to display in a tool tip.	Try It
translate	A global attribute called translate was created to facilitate the translation and internationalization of web content.	Try It

HTML Boolean Attributes

Boolean attributes represent true and false values and do not require any value with the attribute name. To set the true value, you need to write the attribute’s name, and to set it false, the attribute should be omitted altogether. These are local attributes.

Attribute	Description	Example
readonly	The HTML readonly attribute is used to specify that an input, or textarea field, is read-only.	Try It
required	The HTML required attribute is a boolean attribute. It is used to specify that an input field must be filled by users before submitting the form.	Try It
checked	The HTML checked attribute is a boolean attribute that indicates whether a checkbox is checked by default (when the page loads).	Try It

HTML tags with code examples of each tag like tables, forms, anchor, image, heading, marquee, textarea, paragraph, title, quotes, formatting, div, code etc.

What are HTML Tags?

HTML tags are similar to keywords, which specify how a web browser will format and display content. A web browser can differentiate between simple content and HTML content with the use of tags. The major components which are essential for the HTML tag are the opening tag and the closing tag. However, some tags in HTML are not closed.

Why do they matter?

An HTML document is viewed by a web browser from left to right and top to bottom. To generate HTML documents and render their structures, utilize HTML tags. Every HTML tag has a unique set of features.

HTML Tags List with Examples

Here we have categorize the tags on the basis of the usage, to create any particular components.

• Basic Tags
• Formatting Tags
• Forms and Input Tags
• Image Tags
• Audio and Video Tags
• Link Tags

• List Tag
• Table Tags
• Styles and Semantics Tags
• Meta Tags
• Programming Tags

Each tag goes with some other tags unless we forced to use them individually. Each tag has it’s own example code on the third column of the table’s that you can check and edit to see the result.

HTML Basic Tags

HTML Basic Tags are the fundamental elements of HTML used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >). Usually, most of the HTML tags contains an opening and a closing tag. Each tag has a different meaning and the browser reads the tags and displays the contents enclosed by it accordingly.

Following are the basic tags that are listed below:

Tags	Description	Examples
<!–…–>	Specifies a comment. Comments are annotations within the code that are note displayed in the browser window.	Try It
<!DOCTYPE>	Specifies the document type. This is the initial declaration required for the specification of document type and html version.	Try It
<html>	The html tags are the container that contains all the other HTML tags. It consist of opening and closing angle brackets surrounding a tag name.	Try It
<head>	Specifies information about the document. Html <head> is a tag specifies as a metadata container.	Try It
<title>	Specifies the document title. <title> is placed within the <head> specifies the concise and descriptive label that appears in the browser’s title bar or tab when the webpage is opened.	Try It
<body>	Specifies the body element. The HTML <body> tag serves as the container for all visible content within a webpage.	Try It
<h1> to <h6>	Specifies header 1 to header 6. It represents the main title or headline of a section or the entire page.	Try It
<p>	Specifies a paragraph. This tag serves as a container for blocks of text and content specifying the web page.	Try It
<br>	Inserts a single line break. It’s a self-closing element used to create a forced line break within text content.	Try It
<hr />	Specifies a horizontal rule. It is a self-closing element used to insert a thematic break or divider within a webpage’s content.	Try It

HTML Formatting Tags

Formatting tags in HTML are elements used to structure and style the content of a webpage, enhancing its appearance and readability. These tags add semantic value to text parts and used to style the visual appearance of the text.

Following are the Formatting tags that are listed below:

Tags	Description	Examples
<abbr>	Specifies an abbreviation. It provides a semantic and accessible way to identify and explain their meanings.	Try It
<address>	Specifies an address element. The <address> tag provides a semantic way to structure contact information or the author’s detail within a document.	Try It
<bdi>	Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality	Try It
<bdo>	Specifies the direction of text display. IT is a markup element used to specify the direction of text within a document.	Try It
<blockquote>	Specifies a long quotation. It is a structural element used to identify and visually separate quoted content within a webpage.	Try It
<cite>	Specifies a citation. It is a semantic element used to mark up the title of a creative work, such as a book, article, song, or movie, that is referenced within a document.	Try It
<code>	Specifies computer code text. The HTML <code> tag is a semantic element used to mark up sections of text that represent computer code within a document.	Try It
<del>	Specifies deleted text. It is a semantic element used to mark up text that has been removed or deleted from a document.	Try It
<dfn>	Specifies a definition term. It is typically used within <dl> elements along with <dt> and <dd> tags	Try It
<em>	Specifies emphasized text.The <em> tag in HTML is used to emphasize text, typically by rendering it in italics.	Try It
<i>	Specifies italic text. The <i> tag in HTML is used to apply italic formatting to text, primarily for presentational purposes.	Try It
<ins>	Specifies inserted text. The <ins> tag in HTML is used to mark up text that has been inserted into a document.	Try It
<kbd>	Specifies keyboard text. The <kbd> tag in HTML is used to indicate text that represents user input or keyboard input	Try It
<mark>	Specifies a text highlighted for reference purposes, that is for its relevance in another context.	Try It
<meter>	The <meter> tag in HTML is used to represent a measurement within a predefined range.	Try It
<pre>	The <pre> tag in HTML is used to define preformatted text, which is displayed exactly as it appears in the HTML code.	Try It
<progress>	The <progress> tag in HTML is used to represent the progress of a task or the completion status of an operation.	Try It
<q>	The <q> tag in HTML is used to indicate short inline quotations within a paragraph or text.	Try It
<rp>	Specifies to show browsers that do not support the ruby element.	Try It
<rt>	The <rt> tag in HTML is used to define the text component of a ruby annotation	Try It
<ruby>	Specifies an ruby annotation. This tag is typically used in conjunction with <rt> and <rp> tags.	Try It
<s>	It is used to render text with a strike through. The <s> tag specifies text that is no longer correct, accurate, or relevant	Try It
<samp>	It is used to enclose the inline text that represents the sample output from a computer program or a script.	Try It
<small>	The <small> tag in HTML is used to indicate smaller text within a document.	Try It
<strong>	The <strong> tag in HTML is used to indicate smaller text within a document.	Try It
<sub>	The <sub> tag in HTML is used to define subscripted text within a document.	Try It
<sup>	The <sup> tag in HTML is used to define subscripted text within a document.	Try It
<template>	It is a mechanism for holding some client-side content hidden from the user when the page loads.	Try It
<time>	The <time> tag in HTML is used to represent a specific time or date within a document.	Try It
<var>	The <var> tag in Html represents the name of a variable in a mathematical expression or a programming context.	Try It
<wbr>	Indicates a potential word break point within a <nobr> section.	Try It
<b>	It is used to highlight the text and specify the bold text.	Try It

HTML Forms and Input Tags

Forms plays a crucial role in a web page which is commonly used in collecting contact information, conducting surveys, and enabling user comments.

Following are the Forms and Input Tag tags that are listed below:

Tags	Description	Examples
<form>	Specifies form within a document which is commonly used in collecting contact information, conducting surveys, and enabling user comments.	Try It
<input>	<input> tag is used to specify input field within a document and used to create interactive controls within web based forms.	Try It
<textarea>	<textarea> tag is used to specify textarea within a document or multi-line text input control within an HTML form.	Try It
<button>	Html <button> tag is used to insert button element within an HTML form	Try It
<select>	<select> tag is used in HTML forms and provides a menu of choices that users can select from.	Try It
<optgroup>	The <optgroup> tag in HTML is used to group related options within a <select> element (which represents a drop-down list).	Try It
<option>	<option> tag is used to specify options within an Html <select> tag by creating selectable options within a dropdown list.	Try It
<label>	Specifies a label for a form control and serves as a caption for an item in a user interface.	Try It
<fieldset>	Html <fieldset> tag used to group form controls (such as input fields, checkboxes, and radio buttons) together.	Try It
<legend>	Html <legend> tag is used to specify title in a HTML <fieldset> tag.	Try It
<datalist>	The <datalist> tag in HTML specifies a list of pre-defined options for an <input> element.	Try It
<output>	The <output> tag is used to Specify the result of a calculation within HTML form tag.	Try It

HTML Image Tags

Images are crucial element of a web page, makes web page presentable and adds relativity towards the content.

Following are the Image tags that are listed below:

Tags	Description	Examples
<img>	The <img> tag is used to specify image within a Html document.	Try It
<map>	The <map> tag in HTML is used to define an image map and and visually appealing interfaces by dividing an image into multiple clickable areas .	Try It
<area>	The <area> tag in HTML is used within an <map> element to define clickable regions in an image map.	Try It
<canvas>	The <canvas> tag in HTML is used to define an area on a webpage where graphics, animations, or visual elements can be dynamically rendered using JavaScript.	Try It
<figcaption>	The <figcaption> tag in HTML is used to provide a caption or description for a <figure> element and allows developers to add descriptive text with an image, illustration, diagram, video, or other multimedia content.	Try It
<figure>	The <figure> tag Specifies self-contained content such as images, illustrations, diagrams within a Html document..	Try It
<picture>	Picture permits the specification of multiple images that are intended to more accurately fill the browser viewport.	Try It
<svg>	The <svg> tag in HTML is used to append Scalable Vector Graphics (SVG) directly into a webpage. It is a modular language used to describe visuals.	Try It

HTML Audio and Video Tags

HTML <audio> and <video> tag appends visually appealing and informative content on a web page. This tags helps in enhancing user experiences.

Following are the Audio/Video tags that are listed below:

Tags	Description	Examples
<audio>	The <audio> tag is used to insert sound content in an HTML document, such as music or other audio streams.	Try It
<source>	Specifies a media resources for media elements, defined inside video or audio elements.	Try It
<track>	The <track> tag is used to specify text tracks for multimedia elements such as <audio> and <video> tags.	Try It
<video>	HTML <video> tag is used to insert video content in an HTML document, such as movie clips or other video streams. Specifies a text tracks used in media players.	Try It

HTML Link Tags

HTML Links are hyperlinks that means when you click on a link, it jump son another document. A webpage can contain various links that take us directly to other web pages or resources and even specific parts of a given page.

Following are the link tag that are listed below:

Tags	Description	Examples
<a>	Specifies an anchor. The HTML <a> tag creates hyperlinks within a HTML document.	Try It
<link>	HTML <link> tag is used to link external resource within a HTML document.	Try It
<nav>	HTML <nav> tag is used to Specify a section that contains only navigation links.	Try It

HTML List Tags

HTML lists are fundamental elements used to organize and structure content on web pages in a variety of ways.

Following are the list tags that are listed below:

Tags	Description	Examples
<ul>	HTML <ul> tag Specifies an unordered list within a Html document. It is used to group to collection of items without any specific numerical order.	Try It
<ol>	HTML <ol> tag Specifies an ordered list within a Html document. It is used to group to collection of items in a specific numerical order.	Try It
<li>	HTML <li> is used to Specify a list item within a HTML document. It plays an important role in creating both ordered and unordered lists.	Try It
<dl>	HTML <dt> tag is used to Specify a definition list within a HTML document and serves a way to organize them.	Try It
<dt>	The <dt> tag is used to specify a term within a description or definition list.	Try It
<dd>	HTML <dd> tag plays a crucial role in Specifying a definition description within a description list .	Try It

HTML Table Tags

Tables in HTML are commonly used to organize and present detailed data in rows and columns. They allow users to quickly scan and understand the information.

Following are the table tags that are listed below:

Tags	Description	Examples
<table>	Specify a table within a HTML document in an organized and presentable Manner.	Try It
<caption>	Specify a table caption within a HTML document.	Try It
<th>	Specify a table heading within a HTML <table> tag .	Try It
<tr>	Specify a table row within a HTML <table>.	Try It
<td>	Specify a table cell within a HTML <table>.	Try It
<thead>	Specify a table heading within a HTML <table> and used to group header content within an HTML table.	Try It
<tbody>	Specify a table body within a HTML <table>.	Try It
<tfoot>	Specify a table footer within a HTML table and used to group footer content within an HTML table.	Try It
<col>	Specify attributes for table columns. The <col> element allows you to apply styles to entire columns.	Try It
<colgroup>	Specify groups of table columns. The <colgroup> tag must appear as a child of a <table> element.	Try It

HTML Styles and Semantics Tags

HTML includes list of style and semantic tags. The HTML style tag enhances it’s appearance by adding style within HTML document. And HTML semantic tags embed simplicity by defining the meaning of the content they contain.

Following are the Styles and Semantics tags that are listed below:

Tags	Description	Examples
<style>	HTML <style> tag defines CSS (Cascading Style Sheets) for document styling. This tags are used to define the presentation style of elements within a web page	Try It
<div>	HTML <div> tag is a fundamental building block for structuring web pages and is used to defines a division or section in an HTML document.	Try It
<span>	HTML <span> tag is an inline container for inline elements and content used to mark up a part of text or a section within a document.	Try It
<header>	Specify a header for a document or section. It is a semantic element and contain introductory content and navigational elements within a web page.	Try It
<footer>	Specify a footer for a document or section. It is a semantic element used to define the footer section of a webpage.	Try It
<main>	Specifies the main or important content in the document. There is only one <main> element in the document.	Try It
<section>	Specify a section within a document. The HTML <section> tag adds a well organized sections within a document.	Try It
<article>	Specify an article within a HTML document. It is a semantic element used to define a self-contained piece of content.	Try It
<aside>	Specifies some content loosely related to the page content. If it is removed, the remaining content still makes sense.	Try It
<details>	It is used to create a disclosure widget that contains some information, and is visible when the widget is toggled to the “open” state.	Try It
<dialog>	Specify a dialog box or window within a HTML document.	Try It
<summary>	Specify a summary, caption, or legend for a given <details>.	Try It
<data>	The HTML data tag is used to link the given piece of content with the machine-readable translation.	Try It

HTML Meta Tags

HTML Meta tags is used to provide structured information within a webpage and it’s content is not displayed on the web page.

Following are the meta-info tags that are listed below:

Tags	Description	Examples
<meta>	Specify meta data of an html document which is not displayed on the page.	Try It
<base>	Specify a base URL for all the links in a page. The <base> tag is typically placed within the <head> section of an HTML document.	Try It

HTML Programming Tags

HTML Programming tags are building blocks of HTML document used to define different types of content within a document.

Following are the programming tags that are listed below:

Tags	Description	Examples
<script>	Specify a script within a HTML document and used to embed client-side scripting languages.	Try It
<noscript>	Specify a noscript section within a HTML document.	Try It
<embed>	Specify a container for an external (non-HTML) application.	Try It
<object>	Specify an embedded object within a HTML document.	Try It

This HTML cheatsheet is a summary of theHTML tutorial. Here, you will find quick information about HTML concepts, starting from the basic structure to advanced elements.

Basic HTML Structure

The following is the basic structure of an HTML document:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Webpage's Page Title</title></head><body><!-- Webpage's content goes here --></body></html>

Heading Tags

The following are the six HTML heading tags, where <h1> is the main heading of the webpage and <h6> is the least heading with the smallest size:

Heading 1 (<h1> Tag)

<h1>Heading 1</h1>

Heading 2 (<h2> Tag)

<h2>Heading 2</h2>

Heading 3 (<h3> Tag)

<h3>Heading 3</h3>

Heading 4 (<h4> Tag)

<h4>Heading 4</h4>

Heading 5 (<h5> Tag)

<h5>Heading 5</h5>

Heading 6 (<h6> Tag)

<h6>Heading 6</h6>

Paragraph

The <p> tag is used to place content in a paragraph.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis mattis nisi, at facilisis nunc tempus sed. Duis sagittis odio ac neque tempor iaculis. Fusce et arcu consequat, pretium lectus ut, venenatis leo. Phasellus libero enim, semper ut luctus a, pretium in turpis. Donec eget ultricies arcu, et suscipit nisi. Ut et neque posuere, lacinia dui vitae, varius tellus. Mauris placerat, leo sed pretium viverra, massa ante ultricies orci, quis vehicula ex elit et ligula. Nullam ac lectus semper, aliquet neque sit amet, cursus urna. Aenean faucibus dignissim orci sed malesuada. Maecenas arcu erat, aliquam eget lacus non, malesuada consectetur tellus. Fusce non eros et dui ultrices consequat. Vivamus rutrum lobortis purus, ut cursus massa malesuada vel.</p><p>Morbi sollicitudin luctus velit, eget maximus ex accumsan at. Sed interdum felis a erat tempor, et hendrerit sapien lacinia. Maecenas imperdiet lacinia ante ut congue. Vestibulum vehicula vulputate dolor non hendrerit.</p>

Text Formatting Tags

1. <b>

This tag makes the enclosed text bold.

<p><b>This is bold text</b></p>

2. <i>

This tag is used to make the enclosed text italic.

<p><i>This is italic text</i></p>

3. <u>

The <u> tag underlines the text.

<p><u>This is underlined text</u></p>

4. <strong>

The <strong> tag is used for semantically important text.

<p><strong>This is important bold text</strong></p>

5. <em>

The <em> tag is used to emphasize text.

<p><em>This is emphasized italic text</em></p>

5. <sub>

The <sub> tag is used for subscript text. 

<p>H<sub>2</sub>O</p>

6. <sup>

The <sup> tag creates superscript text.

<p>x<sup>2</sup> (x squared)</p>

7. <strike>

The <strike> tag shows text with a strikethrough effect.

<p><strike>This is strikethrough text</strike></p>

8. <mark>

The <mark> tag highlights or marks text.

<p><mark>This text is highlighted</mark></p>

Listing Tags

HTML provides two tags for listing <ul> and <ol>. The <ul> tag displays an unordered listing (shows bullets), and the <ol> tag displays an ordered listing (shows numbers).

Unordered Listing

The <ul> tag defines an unordered listing, which shows bullets with list items.

<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>

Ordered Listing

The <ol> tag defines an ordered listing, which shows numbers with list items.

<ol><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ol>

Link (Anchor) Tag

To link different internal or external webpages with text, images, or any other HTML elements, use the <a> tag. The <a> tag defines an anchor link.

Attributes of the <a> tag are:

• href: It is used to define the target page’s link.
• title: It is used to place the text that you want to see on the mouse over the link.
• target: It is used to define where you want to open the link (in the same tab, or in the new tab).

<p>Open TutorialsPoint by clicking on the following link:</p><p><a href="https://www.tutorialspoint.com/" target="_blank" title="Open TutorialsPoint">Open TutorialsPoint</a></p>

Container Tags

HTML container tags are used as the parent element to contain the other HTML tags. These tags are used to define multiple sections on the webpage.

There are many container tags, such as <div>, <span>, <p>, etc.

<div> Tag

The <div> tag defines the division (or blocks) on the webpage.

<div><p>Paragraph inside div</p><ul><li>Item 1</li><li>Item 1</li></ul></div>

<span> Tag

The <span> tag may contain various elements in it. Whenever you want to apply specific styles to a part of the text, you can use it.

<p>Hello, World: This is <span style="background-color:#f40;color:#fff;padding:8px;">HTML Cheatsheet</span>.</p>

<p> Tag

The <p> tag can also be used as a container tag, where you can use other tags such as <span>, <a>, <button>, etc.

<p>Take a variable <span class="tp-codespan">x</span> and assign <strong>100</strong> in it.</p>

<pre> Tag

The <pre> tag is used for preserving formatting and can also be used to display programming code on the webpage.

<pre>
Hello World
Hello World
    Hello World
        Hello World
    Hello World
Hello World
Hello World    
</pre>

<code> Tag

The <code> tag is used to display source codes.

<code>#include <stdio.h></code>

Images

The <img> tag inserts an image on the webpage. The following are the attributes of the <img> tag:

• src: It defines the source (path) of the image.
• alt: It defines an alternative text to be displayed on the webpage when an image is not found.
• title: It defines the title that shows on the mouse over on the image.

Read More: HTML Images

<img src="/html/images/html-mini-logo.jpg" alt="logo" title="logo"/>

Tables

The HTML <table> tag is used to display data in a tabular format. The following tags are used with the <table> tag:

• <thead>: It defines table head.
• <tbody>: It defines the table body.
• <tr>: It defines a row in the table.
• <th>: It defines a table cell (known as a table head) inside a <tr> tag.
• <td>: It defines a table cell (known as table data) inside a <tr> tag.
• <caption>: It defines the table’s caption.

Table Structure

The table structure is as follows:

<table><caption>Table Structure</caption><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 4</td><td>Data 5</td><td>Data 6</td></tr></tbody></table>

Table Tag Attributes

The following are the common attributes that can be used with the <table> tag.

Note: These attributes are deprecated in HTML5.

Attribute	Description	Example	Status
border	It defines the thickness of the table border.	<table border=”1″>	Deprecated
cellpadding	It defines the padding inside a table cell.	<table cellpadding=”10″>	Deprecated
cellspacing	It defines the space between table cells.	<table cellspacing=”5″>	Deprecated
width	It defines the width of the table.	<table width=”100%”>	Deprecated
height	It defines the height of the table.	<table height=”300″>	Deprecated
align	It defines the alignment of the table.	<table align=”center”>	Deprecated
bgcolor	It defines the background color of the table.	<table bgcolor=”#f0f0f0″>	Deprecated
summary	It provides a summary of the table’s purpose.	<table summary=”Sales data for Q1″>	Deprecated
bordercolor	It defines the color of the table border.	<table border=”1″ bordercolor=”blue”>	Deprecated

Quotation and Citation Elements

The following are the quotation and citation tags:

1. <blockquote> and <cite> Tags

The <blockquote> defines the quoted text, and <cite> defines the title of the work.

<blockquote>
Education is the most powerful weapon which you can use to change the world.
</blockquote><p><cite>Programming in ANSI C</cite> was written by E. Balagurusamy.</p>

2. <q> Tag

The <q> tag is used to define a short quotation.

<p>Here is: <q>Live as if you were to die tomorrow</q></p>

3.<abbr> Tag

The <abbr> tag is used to define an abbreviation or an acronym.

<p>The <abbr title="HyperText Markup Language">HTML</abbr> was founded in 1993.</p>

4. <address> Tag

The <address> tag is used to define the contact information.

<address>
Written by SUDHIR SHARMA.<br>
Visit us at:<br>
tutorialspoint.com<br>
Madhapur, Hyderabad<br>
India
</address>

5. <bdo> Tag

The <bdo> tag is used to override the current text direction

<bdo dir="rtl">HTML stands for Hyper Text Markup Language</bdo>

Comments

Place the comment in an HTML document by using <!– and –>.

<!--This is comment-->

Entities

1. Character Entities

HTML character entities can be used with the & (ampersand) sign.

<p>This is RIGHT ARROW: →</p><p>This is LEFT ARROW: ←</p><p>This is BLACK SUN WITH RAYS: ☀</p><p>This WHITE UP POINTING INDEX: ☝</p>

2. Non-breaking Space

Use the &nbsp; entity to display non-breaking space.

<p>ABC        XYZ</p>

3. Less Than and Greater Than

To display less than and greater than characters, you can use the &lt; and &gt; respectively.

Open Compiler

<p>The <BODY> tag defines body of the webpage.</p>

HTML Quick Reference

Find the quick reference of different HTML tags, elements, attributes, etc.:

• Basic Tags
• Body Attributes
• Text Tags
• Links
• Text and Layout
• Lists

• Horizontal Rule & Image Attributes
• Forms
• Tables
• Table Attributes
• HTML5 input tag Attributes

Basic Tags

The following are the basic and required tags for an HTML document:

Tags	Description	Examples
<html>..</html>	This tag serves as the root element of an HTML document, encapsulating all other elements within it.	Try It
<head>..</head>	The ‘head’ tag include meta-information about the document that isn’t directly displayed on the page.	Try It
<body>..</body>	Sets off the visible portion of the document.	Try It
<title>..</title>	Puts the name of the document in the title bar, when bookmarking pages, this is what is bookmarked and render on the browser’s tab.	Try It

Body Attributes

The body section is the main part of any website, as we all know. There are a few attributes that can be applied to the <body> tag. It is highly recommended that these attributes not be used to develop an actual website but only be used in email newsletters.

Attributes	Description	Examples
<body bgcolor=””>	HTML bgcolor set background color of the document, using color name or hex value.	Try It
<body text=””>	HTML text attribute is used to define color of text inside the body, default value is black.	Try It
<body link=””>	Used to set color of hyperlinks inside body, using color name or hex value.	Try It
<body vlink=””>	Used to specify color of visited hyperlinks, using color name or hex value.	Try It
<body alink=””>	Define color of active links (while mouse-clicking).	Try It

Text Tags

The following are the different text tags to make the text look beautiful and readable:

Tags & Attributes	Description	Examples
<pre>..</pre>	HTML pre tag used to create preformatted text.	Try It
<h1>..</h1> to <h6>..</h6>	Creates headlines of variable size — H1=largest, H6=smallest	Try It
<b>..</b>	The b tag is used create bold text (should use <strong> instead).	Try It
<i>..</i>	Creates italic text (should use <em> instead).	Try It
<tt>..</tt>	Used to create typewriter-style text.	Try It
<code>..</code>	Used to define source code, usually monospace.	Try It
<cite>..</cite>	Creates a citation, usually processed in italics.	Try It
<address>..</address>	Creates address section, usually processed in italics.	Try It
<em>..</em>	Emphasizes a word (usually processed in italics).	Try It
<strong>..</strong>	Emphasizes a word (usually processed in bold)	Try It
<font size=””>..</font>	Sets size of font – 1 to 7 (Recommended to use CSS instead).	Try It
<font color=””>..</font>	Used to define color of font (should use CSS instead).	Try It
<font face=””>..</font>	Defines the font used (should use CSS instead).	Try It

Links

HTML links, also known as hyperlinks, are a fundamental feature of the World Wide Web. They allow users to navigate between different web pages, websites, or different sections of the same document.

Attributes	Description	Examples
<a href=”URL”>clickable text</a>	Creates a hyperlink to a Uniform Resource Locator.	Try It
<a href=”mailto:email_address”>clickable text</a>	Creates a hyperlink to a specified email address.	Try It
<a name=”NAME”>	Creates a target location within a document	Try It
<a href=”#NAME”>clickable text</a>	Creates a link to that target location.	Try It

Text and Layout

Text and Layoutin HTML involves using a variety of tags to define the structure, appearance, and semantic meaning of the text. Here are some of the most commonly used HTML tags for text formatting.

Tags	Description	Examples
<p>..</p>	The P tag is used to define a new paragraph in a document	Try It
<br>	The br tag is used to insert a line break (carriage return) between two lines.	Try It
<blockquote>..</blockquote>	Puts content in a quote – indents text from both sides.	Try It
<div>..</div>	The div tag is used to format block content with CSS.	Try It
<span>..</span>	The span tag is used to format inline content and block content with CSS.	Try It

Lists

In HTML, lists are used to group a set of related items. There are three main types of lists: ordered lists, unordered lists, and description lists. Each serves a different purpose and is marked up with specific HTML tags.

Tags	Description	Examples
<ul>..</ul>	The ul tag in HTML is used for creating an unordered list, i.e, list without numbering.	Try It
<ol start=””>..</ol>	The ol tag is used to create an ordered list (start=xx, where xx is a counting number).	Try It
<li>..</li>	The li tag defines each item in the list for both unordered list and ordered list.	Try It
<dl>..</dl>	The dl tag is used to create a definition list, a heading with its definition.	Try It
<dt>	The dt tag defines heading element of the definition list.	Try It
<dd>	The dd tag defines definition element of the definition list.	Try It

Horizontal Rule and Image Attributes

The following are the attributes for customizing horizontal rules, such as size, width, and for images, including source, alignment, border, dimensions, etc.:

Attributes	Description	Examples
<hr>	Hr tag is used to insert a horizontal rule in document.	Try It
<hr size=””>	Sets size (height) of a horizontal rule.	Try It
<hr width=””>	Defines width of rule (as a % or absolute pixel length).	Try It
<hr noshade>	Creates a horizontal rule without a shadow (This attribute is deprecated in HTML5).	Try It
<img src=”URL” />	Adds image, it is a separate file located at the URL.	Try It
<img src=”URL” align=””>	Aligns image left/right/center/bottom/top/middle (use CSS).	Try It
<img src=”URL” border=””>	Sets the size of the border surrounding the image (use CSS).	Try It
<img src=”URL” height=””>	Sets the height of the image, in pixels or percentage of screen width.	Try It
<img src=”URL” width=””>	Defines width of image, in pixels or percentage of screen width.	Try It
<img src=”URL” alt=””>	Sets the alternate text for browsers that can’t process images (required by the ADA).	Try It

Forms

HTML forms are one of the most important components of web development. The following table contains the common tags and attributes related to designing forms in HTML:

Tags & Attributes	Description	Examples
<form>..</form>	The form tag in HTML is used to define user submittable application form.	Try It
<select multiple name=”” size=””> </select>	Creates a scrollable selection menu. The Size sets the number of menu items visible before user needs to scroll.	Try It
<select name=””> </select>	Creates a dropdown menu with default size as 0.	Try It
<option>	Option tag is used to define each item in dropdown list.	Try It
<textarea name=”” cols=”x” rows=”y”></textarea>	Creates a text box area. Columns set the width, rows set the height.	Try It
<input type=”checkbox” name=”” value=””>	The input type with checkbox is used to create a checkbox, which allows users to select one or more options from a set.	Try It
<input type=”checkbox” name=”” value=”” checked>	Creates a checkbox which is pre-checked for certain values.	Try It
<input type=”radio” name=”” value=””>	The input type with radio attribute is used to create radio buttons in HTML.	Try It
<input type=”radio” name=”” value=”” checked>	Creates a radio button which is pre-checked.	Try It
<input type=”text” name=”” size=””>	Defines a one-line text area. Size sets length, in characters.	Try It
<input type=”submit” value=””>	Used to add a submit button at the end of form. Value sets the text in the submit button.	Try It
<input type=”image” name=”” src=”” border=”” alt=””>	Creates a submit button using an image. It helps to hide a button in an image.	Try It
<input type=”reset”>	A reset button is used within a form to clear all user inputs and reset the form fields to their default values.	Try It

Tables

Tables are used to render the data in a structured form. Use tables for data layout and CSS for page layout.

Tags	Description	Examples
<table>..</table>	Tables in HTML are used to organize and display data in a tabular format, consisting of rows and columns.	Try It
<tr>..</tr>	The tr tag inside table tag is used to define each row in a table.	Try It
<td>..</td>	The td tag inside tr tag is used to define each cell in a row.	Try It
<th>..</th>	Sets off the table header (a normal cell with bold, centered text).	Try It

Table Attributes

Sometimes a normal table is not enough to represent the data we want to render. So, some attributes are required to be used on table elements so that the table looks good. Use these attributes for email newsletters, and to decorate a table, use CSS for better results.

Attributes	Description	Examples
<table border=””>	Sets the width of the border around table cells.	Try It
<table cellspacing=””>	Defines amount of space between table cells.	Try It
<table cellpadding=””>	Sets amount of space between a cell’s border and its contents.	Try It
<table width=””>	Specify width of the table in pixels or as a percentage.	Try It
<tr align=””>	Sets alignment for cells within the row (left/center/right).	Try It
<td align=””>	Sets alignment for cells (left/center/right).	Try It
<tr valign=””>	Defines vertical alignment for cells within the row (top/middle/bottom).	Try It
<td valign=””>	Sets vertical alignment for cell (top/middle/bottom).	Try It
<td rowspan=””>	Defines number of rows a cell should span (default=1).	Try It
<td colspan=””>	Sets number of columns a cell should span.	Try It
<td nowrap>	Prevents lines within a cell from being broken to fit.	Try It

HTML5 Input Tag Attributes

These attributes are newly included after the release of HTML5, and the input tag plays an important role. Not all browsers support these attributes. So, it is better to verify before using.

Attributes	Description	Examples
<input type=”email” name=””>	The input type email is used to accept text which are in the format of email address.	Try It
<input type=”url” name=””>	The input type with value url is used to specifically accept URLs.	Try It
<input type=”number” name=””>	The input type number is used to accept single-line number.	Try It
<input type=”range” name=””>	Defines single-line text box for a range of numbers.	Try It
<input type=”date/month/week/time” name=””>	Generates single-line text box with a calendar showing the date/month/week/time.	Try It
<input type=”search” name=””>	Sets a single-line text box for searching.	Try It
<input type=”color” name=””>	Defines single-line text box for choosing a color.	Try It