HTML5 Complete Book
Uploaded by
Hashiim TahirHTML5 Complete Book
Uploaded by
Hashiim TahirHYPERTEXT MARKUP
LANGUAGE
By Muhammad Hashim
JULY 17, 2023
ACIT
Royal Plaza 1st Floor ACIT
HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our
HTML tutorial is developed for beginners and professionals. In our tutorial, every topic
is given step-by-step so that you can learn it in a very easy way. If you are new in
learning HTML, then you can learn HTML from basic to a professional level and after
learning HTML with CSS and JavaScript you will be able to create your own interactive
and dynamic website. But Now We will focus on HTML only in this tutorial.
The major points of HTML are given below:
HTML stands for HyperText Markup Language.
HTML is used to create web pages and web applications.
HTML is widely used language on the web.
We can create a static website by HTML only.
Technically, HTML is a Markup language rather than a programming language.
HTML Example with HTML Editor
In this tutorial, you will get a lot of HTML examples, at least one example for each topic
with explanation. You can also edit and run these examples, with our online HTML
editor. Learning HTML is fun, and it's very easy to learn.
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
1/2
What is HTML? Definition of
Hypertext Markup Language
What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext
Markup Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.
Markup language: A markup language is a computer language that is used to apply
layout and formatting conventions to a text document. Markup language makes text
more interactive and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A Web
page can be of the static or dynamic type. With the help of HTML only, we can
create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages
with the help of styling, and which looks in a nice format on a web browser. An HTML
document is made of many HTML tags and each HTML tag contains different content.
Let's see a simple example of HTML.
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
2/3
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version
of HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag
opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears
at the top of the browser window. It must be placed inside the head tag and should
close immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible
to the end user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
3/3
Brief History of HTML
In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN,
proposed a system for CERN researchers. In 1989, he wrote a memo proposing an
internet based hypertext system.
Tim Berners-Lee is known as the father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest
version of HTML is HTML5, which we will learn later in this tutorial.
HTML Versions
Since the time HTML was invented there are lots of HTML versions in market, the brief
introduction about the HTML version is given below:
HTML 1.0: The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in1991.
HTML 2.0: This was the next version which was released in 1995, and it was standard
language version for website design. HTML 2.0 was able to support extra features such
as form-based file upload, form elements such as text box, option button, etc.
HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements. It
can also support a web page with complex mathematical equations. It became an
official standard for any browser till January 1997. Today it is practically supported by
most of the browsers.
HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very
stable version of HTML language. This version is the current official standard, and it
provides added support for stylesheets (CSS) and scripting ability for various
multimedia elements.
HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of
this version was announced in January 2008. There are two major organizations one is
W3C (World Wide Web Consortium), and another one is WHATWG( Web Hypertext
Application Technology Working Group) which are involved in the development of
HTML 5 version, and still, it is under development.
4/3
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along
with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like
Windows, Linux, and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages
which makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-
case or upper-case.
NOTE: It is recommended to write all tags in lower-case for consistency,
readability, etc.
5/3
HTML Text Editors
HTML text Editors
An HTML file is a text file, so to create an HTML file we can use any text editors.
Text editors are the programs which allow editing in a written text, hence to create
a web page we need to write our code in some text editor.
There are various types of text editors available which you can directly download,
but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
After learning the basics, you can easily use other professional text editors which
are, Notepad++, Sublime Text, Vim, etc.
In our tutorial, we will use Notepad and sublime text editor. Following are some
easy ways to create your first web page with Notepad, and sublime text.
A. HTML code with Notepad. (Recommended for Beginners)
Notepad is a simple text editor and suitable for beginners to learn HTML. It is available
in all versions of Windows, from where you easily access it.
Step 1: Open Notepad (Windows)
Step 2: Write code in HTML
1/6
Step 3: Save the HTML file with .htm or .html extension.
Step 4: Open the HTML page in your web browser.
To run the HTML page, you need to open the file location, where you have saved the
file and then either double-click on file or click on open with option
2/6
B. HTML code with Sublime Text-editor.(Recommended after
learning basics of HTML)
When you will learn the basics of HTML, then you can use some professional text
editors, which will help you to write an efficient and fast code. So to use Sublime Text
editors, first it needs to download and install from internet. You can easily download it
from this https://www.sublimetext.com/download link and can install in your PC. When
installation of Sublime text editor done then you can follow the simple steps to use it:
Step 1: Open Sublime Text editor(Windows 8):
To open Sublime Text editor go to Start screen type Sublime Text Open it. To
open a new page press CTRL+N.
3/6
Step 2: Save the page before writing any code.
To save your page in Sublime Text press Ctrl+S or go to File option save, to save a
file use extension .htm or .html. We recommend to save the file first then write the code
because after saving the page sublime text editor will give you suggestions to write
code.
Step 3: Write the code in Sublime Text editor
4/6
Step 4: Open the HTML page in your Browser
To execute or open this page in Web browser just right click by mouse on sublime text
page and click on Open in Browser.
5/6
Note: You can execute HTML file in any browser, but there are some tags which
are not supported by Some Web browser.
6/6
HTML Building Blocks
Building blocks of HTML
An HTML document consist of its basic building blocks
which are:
Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.
Attribute: An attribute in HTML provides extra information about the element,
and it is applied within the start tag. An HTML attribute contains two fields: name
& value.
Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>
Elements: An HTML element is an individual component of an HTML file. In an
HTML file, everything written within tags are termed as HTML elements.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
1/2
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of paragraph tag</p>
10. <span>The element contains tag, attribute and content</span>
11. </body>
12. </html>
Output:
The building blocks
This is a paragraph tag
The style is attribute of paragraph tag
The element contains tag, attribute and content
2/2
HTML Tags
HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between an
HTML content and a simple content. HTML tags contain three main parts: opening tag,
content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom
and left to right. HTML tags are used to create HTML documents and render their
properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text. You can use as many tags you want as per your
code requirement.
All HTML tags must enclosed within < > these brackets.
Every tag in HTML perform different tasks.
If you have used an open tag <tag>, then you must use a close tag </tag>
(except some tags)
Syntax
<tag> content </tag>
HTML Tag Examples
Note: HTML Tags are always written in lowercase letters. The basic HTML tags
are given below:
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
Test it Now
1/9
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.
HTML Meta Tags
DOCTYPE, title, link, meta and style
HTML Text Tags
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>,
<pre>, <samp>, <var> and <br>
HTML Link Tags
<a> and <base>
HTML Image and Object Tags
<img>, <area>, <map>, <param> and <object>
HTML List Tags
<ul>, <ol>, <li>, <dl>, <dt> and <dd>
HTML Table Tags
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
HTML Scripting Tags
script and noscript
Note: We will see examples using these tags in later charters.
HTML Tags List
Following is the complete list of HTML tags with the description which are arranged
alphabetically.
Note: Here represents newly added Elements in HTML5.
HTML Tags by Alphabets
2/9
Tag name Description
<!-- --> This tag is used to apply comment in an HTML document.
<!DOCTYPE> This tag is used to specify the version of HTML
A
<a> It is termed as anchor tag and it creates a hyperlink or link.
<abbr> It defines an abbreviation for a phrase or longer word.
<acronym> It defines acronym for a word. (Not supported in HTML5)
<address> It defines the author's contact information of the HTML article
<applet> It defines an embedded Java applet. (Not supported in HTML5)
<area> It defines the area of an image map.
<article> It defines the self-contained content.
<aside> It defines content aside from main content. Mainly represented as
sidebar.
<audio> It is used to embed sound content in HTML document.
B
<b> It is used to make a text bold.
<base> This tag defines the base URL for all relative URL within the
document.
<basefont> This tag is used to set default font, size and color for all elements of
document. (Not supported in HTML5)
<bdi> This tag is used to provide isolation for that part of text which may
be formatted in different directions from its surrounding text.
<bdo> It is used to override the current text direction.
<big> This tag is used to make font size one level larger than its
surrounding content. (Not supported in HTML5)
<blockquote> It is used to define a content which is taken from another source.
<body> It is used to define the body section of an HTML document.
<br> It is used to apply single line break.
<button> It is used to represent a clickable button
3/9
C
<canvas> It is used to provide a graphics space within a web document.
<caption> It is used to define a caption for a table.
<center> It is used to align the content in center. (Not supported in HTML5)
<cite> It is used to define the title of the work, book, website, etc.
<code> It is used to display a part of programming code in an HTML
document.
<col> It defines a column within a table which represent common
properties of columns and used with the <colgroup> element.
<colgroup> It is used to define group of columns in a table.
D
<data> It is used to link the content with the machine-readable translation.
<datalist> It is used to provide a predefined list for input option.
<dd> It is used to provide definition/description of a term in description list.
<del> It defines a text which has been deleted from the document.
<details> It defines additional details which user can either view or hide.
<dfn> It is used to indicate a term which is defined within a
sentence/phrase.
<dialog> It defines a dialog box or other interactive components.
<dir> It is used as container for directory list of files. (Not supported in
HTML5)
<div> It defines a division or section within HTML document.
<dl> It is sued to define a description list.
<dt> It is used to define a term in description list.
E
<em> It is used to emphasis the content applied within this element.
<embed> It is used as embedded container for external file/application/media,
etc.
F
4/9
<fieldset> It is used to group related elements/labels within a web form.
<figcaption> It is used to add a caption or explanation for the <figure> element.
<figure> It is used to define the self-contained content, and s mostly refer as
single unit.
<font> It defines the font, size, color, and face for the content. (Not
supported in HTML5)
<footer> It defines the footer section of a webpage.
<form> It is used to define an HTML form.
<frame> It defines a particular area of webpage which can contain another
HTML file. (Not supported in HTML5)
<frameset> It defines group of Frames. (Not supported in HTML5)
H
<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.
<head> It defines the head section of an HTML document.
<header> It defines the header of a section or webpage.
<hr> It is used to apply thematic break between paragraph-level
elements.
<html> It represents root of an HTML document.
I
<i> It is used to represent a text in some different voice.
<iframe> It defines an inline frame which can embed other content.
<img> It is used to insert an image within an HTML document.
<input> It defines an input field within an HTML form.
<ins> It represent text that has been inserted within an HTML document.
<isindex> It is used to display search string for current document. (Not
supported in HTML5)
K
<kbd> It is used to define keyboard input.
5/9
L
<label> It defines a text label for the input field of form.
<legend> It defines a caption for content of <fieldset>
<li> It is used to represent items in list.
<link> It represents a relationship between current document and an
external resource.
M
<main> It represents the main content of an HTML document.
<map> It defines an image map with active areas.
<mark> It represents a highlighted text.
<marquee> It is used to insert the scrolling text or an image either horizontally or
vertically. (Not supported in HTML5)
<menu> It is used for creating a menu list of commands.
<meta> It defines metadata of an HTML document.
<meter> It defines scalar measurement with known range or fractional value.
N
<nav> It represents section of page to represent navigation links.
<noframes> It provides alternate content to represent in browser which does not
support the <frame> elements. (Not supported in HTML5)
<noscript> It provides an alternative content if a script type is not supported in
browser.
O
<object> It is used to embed an object in HTML file.
<ol> It defines an ordered list of items.
<optgroup> It is used to group the options of a drop-down list.
<option> It is used to define options or items in a drop-down list.
<output> It is used as container element which can show result of a
calculation.
6/9
P
<p> It represents a paragraph in an HTML document.
<param> It defines parameter for an <object> element
<picture> It defines more than one source element and one image element.
<pre> It defines preformatted text in an HTML document.
<progress> It defines the progress of a task within HTML document.
Q
<q> It defines short inline quotation.
R
<rp> It defines an alternative content if browser does not supports ruby
annotations.
<rt> It defines explanations and pronunciations in ruby annotations.
<ruby> It is used to represent ruby annotations.
S
<s> It render text which is no longer correct or relevant.
<samp> It is used to represent sample output of a computer program.
<script> It is used to declare the JavaScript within HTML document.
<section> It defines a generic section for a document.
<select> It represents a control which provides a menu of options.
<small> It is used to make text font one size smaller than document?s base
font size.
<source>> It defines multiple media recourses for different media element such
as <picture>, <video>, and <audio> element.
<span> It is used for styling and grouping inline.
<strike> It is used to render strike through the text. (Not supported in
HTML5)
<strong> It is used to define important text.
<style> It is used to contain style information for an HTML document.
7/9
<sub> It defines a text which displays as a subscript text.
<summary> It defines summary which can be used with <details> tag.
<sup> It defines a text which represent as superscript text.
<svg> It is used as container of SVG (Scalable Vector Graphics).
T
<table> It is used to present data in tabular form or to create a table within
HTML document.
<tbody> It represents the body content of an HTML table and used along with
<thead> and <tfoot>.
<td> It is used to define cells of an HTML table which contains table data
<template> It is used to contain the client side content which will not display at
time of page load and may render later using JavaScript.
<textarea> It is used to define multiple line input, such as comment, feedback,
and review, etc.
<tfoot> It defines the footer content of an HTML table.
<th> It defines the head cell of an HTML table.
<thead> It defines the header of an HTML table. It is used along with <tbody>
and <tfoot> tags.
<time> It is used to define data/time within an HTML document.
<title> It defines the title or name of an HTML document.
<tr> It defines the row cells in an HTML table
<track> It is used to define text tracks for <audio> and <video> elements.
<tt> It is used to define teletype text. (Not supported in HTML5)
U
<u> It is used to render enclosed text with an underline.
<ul> It defines unordered list of items.
V
<var> It defines variable name used in mathematical or programming
context.
8/9
<video> It is used to embed a video content with an HTML document
W
<wbr> It defines a position within text where break line is possible.
9/9
HTML Attributes
HTML Attribute
HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the
HTML element.
Each element or tag can have attributes, which defines the behaviour of that element.
Attributes should always be applied with start tag.
The Attribute should always be applied with its name and value pair.
The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.
You can add multiple attributes in one HTML element, but need to give space between two attributes.
Syntax
1. <element attribute_name="value">content</element>
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in element</p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>
Output:
Explanation of above example:
1. <p style="height: 50px; color: blue">It will add style property in element</p>
Test it Now
In the above statement, we have used paragraph tags in which we have applied style attribute. This attribute is used for applying CSS
property on any HTML element. It provides height to paragraph element of 50px and turns it colour to blue.
1. <p style="color: red">It will change the color of content</p>
In the above statement we have again used style attribute in paragraph tag, which turns its colour red.
Note: There are some commonly used attributes are given below, and the complete list and explanation of all attributes are
given in HTML attributes List.
The title attribute in HTML
Description: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or
any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with
paragraph tag and heading tag.
Example
With <h1> tag:
1. <h1 title="This is heading tag">Example of title attribute</h1>
1/3
Test it Now
With <p> tag:
1. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
Test it Now
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1 title="This is heading tag">Example of title attribute</h1>
7. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
8. </body>
9. </html>
Output:
The href attribute in HTML
Description: The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address which is specified in that link.
The href attribute provides the hyperlink, and if it is blank, then it will remain in same page.
Example
With link address:
1. <a href="https://www.javatpoint.com/html-anchor">This is a link</a>
Test it Now
Without link address:
1. <a href="">This is a link</a>
The src Attribute
The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display
on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else
browser will not display the image.
Example
1. <img src="whitepeacock.jpg" height="400" width="600">
2/3
Test it Now
Note: The above example also have height and width attribute, which define the height and width of image on web page.
Output:
Quotes: single quotes or double quotes?
In this chapter you have seen that, we have used attribute with double quotes, but some people might use single quotes in HTML. So
use of single quotes with HTML attribute, is also allowed. The following both statements are absolutely fine.
1. <a href="https://www.javatpoint.com">A link to HTML.</a>
2. <a href='https://www.javatpoint.com'>A link to HTML.</a>
Test it Now
IN HTML5, you can also omit use of quotes around attribute values.
1. <a href=https://www.javatpoint.com>A link to HTML.</a>
3/3
HTML Elements
HTML Elements
An HTML file is made of elements. These elements are responsible for creating web
pages and define content in that webpage. An element in HTML usually consist of a
start tag <tag name>, close tag </tag name> and content inserted between them.
Technically, an element is a collection of start tag, attributes, end tag, content
between them.
Note: Some elements does not have end tag and content, these elements are
termed as empty elements or self-closing element or void elements.
Such as:
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10. </body>
11. </html>
1/4
All the content written between body elements are visible on web page.
Void element: All the elements in HTML do not require to have start tag and end tag,
some elements does not have content and end tag such elements are known as Void
elements or empty elements. These elements are also called as unpaired tag.
Some Void elements are <br> (represents a line break) , <hr>(represents a
horizontal line), etc.
Nested HTML Elements: HTML can be nested, which means an element can contain
another element.
Block-level and Inline HTML elements
For the default display and styling purpose in HTML, all the elements are divided into
two categories:
Block-level element
Inline element
Block-level element:
These are the elements, which structure main part of web page, by dividing a
page into coherent blocks.
A block-level element always start with new line and takes the full width of web
page, from left to right.
These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,
<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>,
<main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>,
<ul> and <video>.
Note: All these elements are described in later chapters.
Example:
2/4
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <div style="background-color: lightblue">This is first div</div>
7. <div style="background-color: lightgreen">This is second div</div>
8. <p style="background-color: pink">This is a block level element</p>
9. </body>
10. </html>
Output:
In the above example we have used
tag, which defines a section in a web page, and takes full width of page.
We have used style attribute which is used to styling the HTML content, and the
background color are showing that it's a block level element.
Inline elements:
Inline elements are those elements, which differentiate the part of a given text
and provide it a particular function.
These elements does not start with new line and take width as per requirement.
The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>,
<em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
Example:
Output:
Following is the list of the some main elements used in HTML:
3/4
Start tag Content End tag Description
<h1> These are </h1>??.. These elements are used to provide the
...... headings of HTML </h6> headings of page.
<h6>
<p> This is the </p> This element is used to display a content
paragraph in form of paragraph.
<div> This is div section </div> This element is used to provide a section
in web page.
<br> This element is used to provide a line
break. ( void element)
<hr> This element is used to provide a
horizontal line. (void element)
4/4
HTML Formatting
HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML provides us
ability to format text without using CSS. There are many formatting tags in HTML. These
tags are used to make text bold, italicized, or underlined. There are almost 14 options
available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
Physical tag: These tags are used to provide the visual appearance to the text.
Logical tag: These tags are used to add some logical or semantic value to the text.
NOTE: There are some physical and logical tags which may give same visual
appearance, but they will be different in semantics.
Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML
formatting text.
Element
name Description
<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not
supported in HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.
1/5
1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font, without any logical
importance. If you write anything within <b>. .............. </b> element, is shown in bold letters.
See this example:
1. <p> <b>Write Your First Paragraph in bold text.</b></p>
Write Your First Paragraph in bold text.
The HTML <strong> tag is a logical tag, which displays the content in bold font and informs
the browser about its logical importance. If you write anything between <strong>???????.
</strong>, is shown important text.
See this example:
1. <p><strong>This is an important content</strong>, and this is normal content</p>
Output:
This is an important content, and this is normal content
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal content</p>
9. </body>
10. </html>
2) Italic Text
HTML <i> and <em> formatting elements
The HTML <i> element is physical element, which display the enclosed content in italic font,
without any added importance. If you write anything within <i>. ............. </i> element, is shown
in italic letters.
See this example:
1. <p> <i>Write Your First Paragraph in italic text.</i></p>
Output:
Write Your First Paragraph in italic text.
The HTML <em> tag is a logical element, which will display the enclosed content in italic
font, with added semantics importance.
2/5
See this example:
1. <p><em>This is an important content</em>, which displayed in italic font.</p>
Output:
This is an important content, which displayed in italic font.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font.</p>
9. </body>
10. </html>
3) HTML Marked formatting
If you want to mark or highlight a text, you should write the content within <mark>.........
</mark>.
See this example:
1. <h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
4) Underlined Text
If you write anything within <u>. ......... </u> element, is shown in underlined text.
See this example:
1. <p> <u>Write Your First Paragraph in underlined text.</u></p>
Output:
Write Your First Paragraph in underlined text.
5) Strike Text
Anything written within <strike>. ......................... </strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
See this example:
1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
3/5
Write Your First Paragraph with strikethrough.
6) Monospaced Font
If you want that each letter has the same width then you should write the content within
<tt>. ............. </tt> element.
Note: We know that most of the fonts are known as variable-width fonts because different
letters have different width. (for example: 'w' is wider than 'i'). Monospaced Font provides
similar space among every letter.
See this example:
1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Output:
Hello Write Your First Paragraph in monospaced font.
7) Superscript Text
If you put the content within <sup>. ...............</sup> element, is shown in superscript; means
it is displayed half a character's height above the other characters.
See this example:
1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your First Paragraph in superscript.
8) Subscript Text
If you put the content within <sub>. ...............</sub> element, is shown in subscript ; means it
is displayed half a character's height below the other characters.
See this example:
1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Output:
Hello Write Your First Paragraph in subscript.
9) Deleted Text
Anything that puts within <del>. .......... </del> is displayed as deleted text.
See this example:
1. <p>Hello <del>Delete your first paragraph.</del></p>
Output:
Hello
4/5
10) Inserted Text
Anything that puts within <ins>. .......... </ins> is displayed as inserted text.
See this example:
1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
Output:
Delete your first paragraph.Write another paragraph.
11) Larger Text
If you want to put your font size larger than the rest of the text then put the content within
<big>. .........</big>. It increase one font size larger than the previous one.
See this example:
1. <p>Hello <big>Write the paragraph in larger font.</big></p>
Output:
Hello Write the paragraph in larger font.
12) Smaller Text
If you want to put your font size smaller than the rest of the text then put the content within
<small>. .........</small>tag. It reduces one font size than the previous one.
See this example:
1. <p>Hello <small>Write the paragraph in smaller font.</small></p>
Output:
Hello Write the paragraph in smaller font.
5/5
HTML Heading
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on
the webpage. When you place the text within the heading tags <h1>. ......... </h1>, it is displayed on
the browser in the bold format and size of the text depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest
level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading
and h6 is used for least important.
Headings in HTML helps the search engine to understand and index the structure of web
page.
Note: The main keyword of the whole content of a webpage should be display by h1
heading tag.
See this example:
1. <h1>Heading no. 1</h1>
2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>
Output:
Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
Heading elements (h1.... h6) should be used for headings only. They should not be used just
to make text bold or big.
HTML headings can also be used with nested elements. Following are different codes
to display the way to use heading elements.
Example:
1/2
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Heading elements</title>
5. </head>
6. <body>
7. <h1>This is main heading of page. </h1>
8. <p>h1 is the most important heading, which is used to display the keyword of page </p>
9. <h2>This is first sub-heading</h2>
10. <p>h2 describes the first sub heading of page. </p>
11. <h3>This is Second sub-heading</h3>
12. <p>h3 describes the second sub heading of page.</p>
13. <p>We can use h1 to h6 tag to use the different sub-
heading with their paragraphs if
14. required.
15. </p>
16. </body>
17. </html>
Output:
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<h1> to <h6> Yes Yes Yes Yes Yes
2/2
HTML Paragraph
HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is
a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new
paragraph.
Note: If we are using various <p> tags in one HTML file then browser automatically adds a single blank line between the
two paragraphs.
See this example:
1. <p>This is first paragraph.</p>
2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>
Output:
This is first paragraph.
This is second paragraph.
This is third paragraph.
Space inside HTML Paragraph
If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The
browser counts number of spaces and lines as a single one.
1. <p>
2. I am
3. going to provide
4. you a tutorial on HTML
5. and hope that it will
6. be very beneficial for you.
7. </p>
8. <p>
9. Look, I put here a lot
10. of spaces but I know, Browser will ignore it.
11. </p>
12. <p>
13. You cannot determine the display of HTML</p>
14. <p>because resized windows may create different result.
15. </p>
Output:
I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
You cannot determine the display of HTML
because resized windows may create different result.
As you can see, all the extra lines and unnecessary spaces are removed by the browser.
How to Use <br> and <hr> tag with paragraph?
An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the example to show how to
use <br> with <p> element.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Use of line break with pragraph tag</h2>
7. <p><br>Papa and mama, and baby and Dot,
8. <br>Willie and me?the whole of the lot
9. <br>Of us all went over in Bimberlie's sleigh,
1/3
10. <br>To grandmama's house on Christmas day.
11. </p>
12. </body>
13. </html>
Output:
An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs. Following is the example which
is showing use of <hr> tag with paragraph.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Example to show a horizontal line with paragraphs</h2>
7. <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will start a new paragraph.
8. </p>
9. </body>
10. </html>
Output:
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<p> Yes Yes Yes Yes Yes
2/3
HTML Phrase Tags
HTML Phrase tag
The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of text or semantics of text. Following is the
phrase tags, some of which we have already discussed in HTML formatting.
Abbreviation tag : <abbr>
Acronym tag: <acronym> (not supported in HTML5)
Marked tag: <mark>
Strong tag: <strong>
Emphasized tag : <em>
Definition tag: <dfn>
Quoting tag: <blockquote>
Short quote tag : <q>
Code tag: <code>
Keyboard tag: <kbd>
Address tag: <address>
1. Text Abbreviation tag
This tag is used to abbreviate a text. To abbreviate a text, write text between <abbr> and </abbr> tag.
Example
1. <p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is used to create web pages. </p>
Output:
2. Marked tag:
The content written between <mark> and </mark> tag will show as yellow mark on browser. This tag is used to highlight a particular text.
Example
1. <p>This tag will <mark>highlight</mark> the text.</p>
Output:
1/5
3. Strong text:
This tag is used to display the important text of the content. The text written between <strong> and </strong> will be displayed as important t
Example
1. <p>In HTML it is recommended to use <strong>lower-case</strong>, while writing a code. </p>
Output:
4. Emphasized text
This tag is used to emphasize the text, and displayed the text in italic form. The text written between <em> and </em> tag will italicized the t
Example
1. <p>HTML is an <em>easy </em>to learn language.</p>
Output:
5. Definition tag:
When you use the <dfn> and </dfn> tags, it allow to specify the keyword of the content. Following is the example to show how to definition e
Example
1. <p><dfn>HTML </dfn> is a markup language. </p>
Output:
2/5
6. Quoting text:
The HTML <blockquote> element shows that the enclosed content is quoted from another source. The Source URL can be given using the c
attribute, and text representation of source can display using <cite> ....... </cite>element.
Example
1. <blockquote cite="https://www.keepinspiring.me/famous-quotes/"><p>?
The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.?</p></blockq
2. <cite>-Mark Caine</cite>
Output:
7. Short Quotations:
An HTML <q> ....... </q> element defines a short quotation. If you will put any content between <q>.......... </q>, then it will enclose the text in
quotes.
Example:
1. <p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About, You Don?t Have To Be Pushed. The Vision Pu
</q>?</p>
Output:
3/5
8. Code tags
The HTML <code> </code> element is used to display the part of computer code. It will display the content in monospaced font.
1. <p>First Java program</p>
2. <p><code>class Simple{ public static void main(String args[]){
3. System.out.println("Hello Java"); }} </code>
4. </p>
Output:
9. Keyboard Tag
In HTML the keyboard tag, <kbd>, indicates that a section of content is a user input from keyboard.
1. <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome.</p>
Test it Now
Output:
10. Address tag
An HTML <address> tag defines the contact information about the author of the content. The content written between <address> and </addr
tag, then it will be displayed in italic font.
1. <address> You can ask your queries by contact us on <a href="">[email protected]</a>
2. <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
3. </address>
Output:
4/5
HTML Anchor
HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It can
create hyperlink to other web page as well as files, location, or any URL. The "href"
attribute is the most important attribute of the HTML a tag. and which links to
destination page or URL.
href attribute of HTML anchor tag
The href attribute is used to define the address of the file to be linked. In other words, it
points out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Let's see an example of HTML anchor tag.
1. <a href="second.html">Click for Second Page</a>
Specify a location for Link using target attribute
If we want to open that link to another page then we can use target attribute of <a> tag.
With the help of this link will be open in next page.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. <p>Click on <a href="https://www.javatpoint.com/" target="_blank"> this-
link </a>to go on home page of JavaTpoint.</p>
8. </body>
9. </html>
Output:
1/2
Note:
The target attribute can only use with href attribute in anchor tag.
If we will not use target attribute then link will open in same page.
Appearance of HTML anchor tag
An unvisited link is displayed underlined and blue.
A visited link displayed underlined and purple.
An active link is underlined and red.
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<a> Yes Yes Yes Yes Yes
2/2
HTML Image
HTML Image
HTML img tag is used to display image on the web page.
HTML img tag is an empty tag that contains attributes only,
closing tags are not used in HTML image element.
Let's see an example of HTML image.
1. <h2>HTML Image Example</h2>
2. <img src="good_morning.jpg" alt="Good Morning
Friends"/>
Output:
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words. The alt attribute is considered
good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.
1/3
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.
Use of height and width attribute with img tag
You have learnt about how to insert an image in your web page, now if we want to give
some height and width to display image according to our requirement, then we can set
it with height and width attributes of image.
Example:
1. <img src="animal.jpg" height="180" width="300" alt="animal image">
Output:
Note: Always try to insert the image with height and width, else it may flicker
while displaying on webpage.
Use of alt attribute
We can use alt attribute with tag. It will display an alternative text in case if image
cannot be displayed on browser. Following is the example for alt attribute:
1. <img src="animal.png" height="180" width="300" alt="animal image">
Output:
How to get image from another directory/folder?
To insert an image in your web, that image must be present in your same folder where
you have put the HTML file. But if in some case image is available in some other
directory then you can access the image like this:
2/3
1. <img src="E:/images/animal.png" height="180" width="300" alt="animal image">
In above statement we have put image in local disk E------>images folder------
>animal.png.
Note: If src URL will be incorrect or misspell then it will not display your image
on web page, so try to put correct URL.
Use <img> tag as a link
We can also link an image with other page or we can use an image as a link. To do
this, put <img> tag inside the <a> tag.
Example:
1. <a href="https://www.javatpoint.com/what-is-robotics">
<img src="robot.jpg" height="100" width="100"></a>
Output:
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<img> Yes Yes Yes Yes Yes
3/3
HTML Table
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to
manage the layout of the page .
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for
each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
HTML Table Example
Let's see the example of HTML table tag. It output is shown above.
1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
1/8
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Output:
First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.
HTML Table with Border
There are two ways to specify border for HTML tables.
1. By border attribute of table in HTML
2. By border property in CSS
1) HTML Border attribute
You can use border attribute of table tag in HTML to specify border. But it is not
recommended now.
1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Output:
First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
2) CSS Border property
2/8
It is now recommended to use border property of CSS to specify border in table.
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>
Test it Now
You can collapse all the borders in one border by border-collapse property. It will
collapse the border into one.
1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>
Output:
Name Last Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML Table with cell padding
You can specify padding for table header and table data by two ways:
1. By cellpadding attribute of table in HTML
2. By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It is recommended to use
CSS. So let's see the code of CSS.
1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
Output:
Name Last Name Marks
3/8
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML Table width:
We can specify the HTML table width using the CSS width property. It can be specify
in pixels or percentage.
We can adjust our table width as per our requirement. Following is the example to
display table with width.
1. table{
2. width: 100%;
3. }
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>table</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. width: 100%;
9. }
10. th,td{
11. border: 2px solid green;
12. padding: 15px;
13. }
14. </style>
15. </head>
16. <body>
17. <table>
18. <tr>
19. <th>1 header</th>
20. <th>1 header</th>
21. <th>1 header</th>
22. </tr>
23. <tr>
24. <td>1data</td>
25. <td>1data</td>
26. <td>1data</td>
27. </tr>
28. <tr>
29. <td>2 data</td>
30. <td>2 data</td>
31. <td>2 data</td>
32. </tr>
4/8
33. <tr>
34. <td>3 data</td>
35. <td>3 data</td>
36. <td>3 data</td>
37. </tr>
38. </table>
39. </body>
40. </html>
Output:
HTML Table with colspan
If you want to make a cell span more than one column, you can use the colspan
attribute.
It will divide one cell/row into multiple columns, and the number of columns depend on
the value of colspan attribute.
Let's see the example that span two columns.
CSS code:
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>
HTML code:
1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5/8
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>
Output:
Name Mobile No.
Ajeet Maurya 7503520801 9555879135
HTML Table with rowspan
If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on
rowspan values.
Let's see the example that span two rows.
CSS code:
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
HTML code:
1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>
Output:
Name Ajeet Maurya
7503520801
Mobile No. 9555879135
HTML table with caption
HTML caption is diplayed above the table. It must be used after table tag only.
6/8
1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>
Styling HTML table even and odd cells
CSS code:
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. table#alter tr:nth-child(even) {
10. background-color: #eee;
11. }
12. table#alter tr:nth-child(odd) {
13. background-color: #fff;
14. }
15. table#alter th {
16. color: white;
17. background-color: gray;
18. }
19. </style>
Output:
NOTE: You can also create various types of tables using different CSS properties
in your table.
7/8
HTML Lists
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
Note: We can create a list inside another list, which will be termed as nested List.
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items
start with <li> tag.
1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li>
tag.
1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>
Test it Now
Output:
Aries
Bingo
1/4
Leo
Oracle
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a
numbered list then such type of list will called as nested list.
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Nested list</title>
5. </head>
6. <body>
7. <p>List of Indian States with thier capital</p>
8. <ol>
9. <li>Delhi
10. <ul>
2/4
11. <li>NewDelhi</li>
12. </ul>
13. </li>
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38. </ol>
39. </body>
40. </html>
Output:
3/4
HTML Ordered List | HTML Numbered
List
HTML Ordered List or Numbered List displays elements in numbered format. The
HTML ol tag is used for ordered list. We can use ordered list to represent items either
in numerical order format or alphabetical order format, or any format where an order is
emphasized. There can be different types of numbered list:
Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Romal Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type Description
Type This is the default type. In this type, the list items are numbered with
"1" numbers.
Type "I" In this type, the list items are numbered with upper case roman numbers.
Type "i" In this type, the list items are numbered with lower case roman numbers.
Type In this type, the list items are numbered with upper case letters.
"A"
Type In this type, the list items are numbered with lower case letters.
"a"
HTML Ordered List Example
Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here
we are not defining type="1" because it is the default type.
1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
ol type="I"
1/4
Let's see the example to display list in roman number uppercase.
1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
I. HTML
II. Java
III. JavaScript
IV. SQL
ol type="i"
Let's see the example to display list in roman number lowercase.
1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
i. HTML
ii. Java
iii. JavaScript
iv. SQL
ol type="A"
Let's see the example to display list in alphabet uppercase.
1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
A. HTML
B. Java
C. JavaScript
D. SQL
ol type="a"
Let's see the example to display list in alphabet lowercase.
2/4
1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
a. HTML
b. Java
c. JavaScript
d. SQL
start attribute
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="1" start="5"> : It will show numeric values starting with "5".
<ol type="A" start="5"> : It will show capital alphabets starting with "E".
<ol type="a" start="5"> : It will show lower case alphabets starting with "e".
<ol type="I" start="5"> : It will show Roman upper case value starting with "V".
<ol type="i" start="5"> : It will show Roman lower case value starting with "v".
1. <ol type="i" start="5">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
v. HTML
vi. Java
vii. JavaScript
viii. SQL
reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use
the reversed attribute with
tag then it will numbered the list in descending order (7, 6, 5, 4...... 1).
Example:
1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
3/4
6. </ol>
Output:
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<ol> Yes Yes Yes Yes Yes
4/4
HTML Unordered List |
HTML Bulleted List
HTML Unordered List or Bulleted List displays elements in
bulleted format . We can use unordered list where we do not
need to display items in any particular order. The HTML ul tag is
used for the unordered list. There can be 4 types of bulleted list:
disc
circle
square
none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
Type Description
Type "disc" This is the default style. In this style, the list items are marked with
bullets.
Type "circle" In this style, the list items are marked with circles.
Type In this style, the list items are marked with squares.
"square"
Type "none" In this style, the list items are not marked .
HTML Unordered List Example
1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Output:
HTML
Java
JavaScript
SQL
1/4
ul type="circle"
1. <ul type="circle">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Output:
HTML
Java
JavaScript
SQL
ul type="square"
1. <ul type="square">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Output:
HTML
Java
JavaScript
SQL
ul type="none"
1. <ul type="none">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Output:
HTML
Java
JavaScript
SQL
Note: The type attribute is not supported in HTML5, instead of type you can use
CSS property of list-style-type. Following is the example to show the CSS
property for ul tag.
1. <ul style="list-style-type: square;">
2. <li>HTML</li>
2/4
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2>The type attribute with CSS property</h2>
7. <ul style="list-style-type: square;">
8. <li>HTML</li>
9. <li>Java</li>
10. <li>JavaScript</li>
11. <li>SQL</li>
12. </ul>
13. </body>
14. </html>
Output:
3/4
HTML Description List | HTML Definition List
HTML Description List or Definition List displays elements in
definition form like in dictionary. The <dl>, <dt> and <dd> tags
are used to define description list.
The 3 HTML description list tags are given below:
1. <dl> tag defines the description list.
2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).
1. <dl>
2. <dt>HTML</dt>
3. <dd>is a markup language</dd>
4. <dt>Java</dt>
5. <dd>is a programming language and platform</dd>
6. <dt>JavaScript</dt>
7. <dd>is a scripting language</dd>
8. <dt>SQL</dt>
9. <dd>is a query language</dd>
10. </dl>
Output:
HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language
1/1
HTML Form
HTML Form
An HTML form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name,
email address, password, phone number, etc. .
Why use HTML Form
HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping
address and credit/debit card details so that item can be sent to the given address.
HTML Form Syntax
1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>
HTML Form Tags
Let's see the list of HTML 5 form tags.
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML 5 Form Tags
Let's see the list of HTML 5 form tags.
Tag Description
<datalist> It specifies a list of pre-defined options for input control.
<keygen> It defines a key-pair generator field for forms.
1/9
<output> It defines the result of a calculation.
HTML <form> element
The HTML <form> element provide a document section to take input from user. It provides various
interactive controls for submitting information to web server such as text field, text area, password field, etc.
Note: The <form> element does not itself create a form but it is container to contain all required
form elements, such as <input>, <label>, etc.
Syntax:
1. <form>
2. //Form elements
3. </form>
HTML <input> element
The HTML <input> element is fundamental form element. It is used to create form fields, to take input from
user. We can apply different input filed to gather different information form user. Following is the example to
show the simple text input.
Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>
Output:
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known as single line textfield control. The
name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>
Output:
2/9
Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.
HTML <textarea> tag in form
The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be
specify either using "rows" or "cols" attribute or by CSS.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>
Output:
Label Tag in Form
It is considered better to have label in form. As it makes the code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label
tag that must be same as id attribute of input tag.
3/9
NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will
provide a focus when you tap or click on label tag. It is more worthy with touchscreens.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>
Output:
HTML Password Field Control
The password is not visible to the user in password field control.
1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>
Output:
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in
this field.
1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>
It will display in browser like below:
4/9
Note: If we will not enter the correct email, it will display error like:
Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of gender, quiz
questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at a time.
Using radio buttons for multiple options, you can only choose a single option at a time.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
5. </form>
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/>
5/9
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
Note: These are similar to radio button except it can choose multiple options at a time and radio
button can select one button at a time, and its display.
Output:
Submit button control
HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit
button, then form get submit to the server.
Syntax:
1. <input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web page.
The name attribute can be omit here.
Example:
1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>
Output:
6/9
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a form. This element is used
with <legend> element which provide caption for the grouped elements.
Example:
1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/form>
Output:
HTML Form Example
Following is the example for a simple form of registration.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
7/9
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
Output:
HTML Form Example
Let's see a simple example of creating HTML form.
1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
5. <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>
9. <td><input type="password" name="password" id="register_password" style="width:160px"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
13. <td
14. ><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>
20. <label for="register_gendermale">male</label>
8/9
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
27. <td><select name="country" id="register_country" style="width:160px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34. </td>
35. </tr>
36. <tr>
37. <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>
9/9
HTML Form Input Types
In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element can be various types, which defines
information field. Such as <input type="text" name="name"> gives a text box.
Following is a list of all types of <input> element of HTML.
type=" " Description
text Defines a one-line text input field
password Defines a one-line password input field
submit Defines a submit button to submit the form to server
reset Defines a reset button to reset all values in the form.
radio Defines a radio button which allows select one option.
checkbox Defines checkboxes which allow select multiple options form.
button Defines a simple push button, which can be programmed to perform a task on an event.
file Defines to select the file from device storage.
image Defines a graphical submit button.
HTML5 added new types on <input> element. Following is the list of types of elements of HTML5
type=" " Description
color Defines an input field with a specific color.
date Defines an input field for selection of date.
datetime-local Defines an input field for entering a date without time zone.
email Defines an input field for entering an email address.
month Defines a control with month and year, without time zone.
number Defines an input field to enter a number.
url Defines a field for entering URL
week Defines a field to enter the date with week-year, without time zone.
search Defines a single line text field for entering a search string.
tel Defines an input field for entering the telephone number.
Following is the description about types of <input> element with examples.
1. <input type="text">:
<input> element of type "text" are used to define a single-line input text field.
Example:
1. <form>
2. <label>Enter first name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter last name</label><br>
5. <input type="text" name="lastname"><br>
6. <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>
7. </form>
2. <input type="password">:
The <input> element of type "password" allow a user to enter the password securely in a webpage. The entered text in password filed
converted into "*" or ".", so that it cannot be read by another user.
Example:
1. <form>
2. <label>Enter User name</label><br>
1/5
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
3. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit the form to the server when the "click" event occurs.
Example:
1. <form action="https://www.javatpoint.com/html-tutorial">
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
After clicking on submit button, this will submit the form to server and will redirect the page to action value.We will learn about "action"
attribute in later chapters
4. <input type="reset">:
The <input> type "reset" is also defined as a button but when the user performs a click event, it by default reset the all inputted values.
Example:
1. <form>
2. <label>User id: </label>
3. <input type="text" name="user-id" value="user">
4. <label>Password: </label>
5. <input type="password" name="pass" value="pass"><br><br>
6. <input type="submit" value="login">
7. <input type="reset" value="Reset">
8. </form>
Input "reset" type:
Try to change the input values of user id and password, then when you click on reset, it will reset input fields with default values.
5. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio
button option can be selected at a time.
Example:
1. <form>
2. <p>Kindly Select your favorite color</p>
3. <input type="radio" name="color" value="red"> Red <br>
4. <input type="radio" name="color" value="blue"> blue <br>
5. <input type="radio" name="color" value="green">green <br>
6. <input type="radio" name="color" value="pink">pink <br>
7. <input type="submit" value="submit">
8. </form>
6. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be checked or unchecked to select the choices from the given
options.
Note: The "radio" buttons are similar to checkboxes, but there is an important difference between both types: radio buttons allow
the user to select only one option at a time, whereas checkbox allows a user to select zero to multiple options at a time.
Example:
1. <form>
2. <label>Enter your Name:</label>
3. <input type="text" name="name">
4. <p>Kindly Select your favourite sports</p>
5. <input type="checkbox" name="sport1" value="cricket">Cricket<br>
6. <input type="checkbox" name="sport2" value="tennis">Tennis<br>
7. <input type="checkbox" name="sport3" value="football">Football<br>
8. <input type="checkbox" name="sport4" value="baseball">Baseball<br>
9. <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
10. <input type="submit" value="submit">
11. </form>
Cricket
Tennis
2/5
Football
Baseball
Badminton
7. <input type="button">:
The <input> type "button" defines a simple push button, which can be programmed to control a functionally on any event such as, click
event.
Note: It mainly works with JavaScript.
Example:
1. <form>
2. <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
3. </form>
Input "button" type.
Click the button to see the result:
Note: In the above example we have used the "alert" of JS, which you will learn in our JS tutorial. It is used to show a pop window.
8. <input type="file">:
The <input> element with type "file" is used to select one or more files from user device storage. Once you select the file, and after
submission, this file can be uploaded to the server with the help of JS code and file API.
Example:
1. <form>
2. <label>Select file to upload:</label>
3. <input type="file" name="newfile">
4. <input type="submit" value="submit">
5. </form>
Input "file" type.
We can choose any type of file until we do not specify it! The selected file will appear at next to "choose file" option
9. <input type="image">:
The <input> type "image" is used to represent a submit button in the form of image.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Input "image" type.</h2>
5. <p>We can create an image as submit button</p>
6. <form>
7. <label>User id:</label><br>
8. <input type="text" name="name"><br><br>
9. <input type="image" alt="Submit" src="login.png" width="100px">
10. </form>
11. </body>
12. </html>
HTML5 newly added <input> types element
1. <input type="color">:
The <input> type "color" is used to define an input field which contains a colour. It allows a user to specify the colour by the visual colour
interface on a browser.
Note: The "color" type only supports color value in hexadecimal format, and the default value is #000000 (black).
Example:
1. <form>
2. Pick your Favorite color: <br><br>
3. <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>
4. <input type="color" name="downclick" value="#f5f5dc"> Downclick
5. </form>
Input "color" types:
Pick your Favorite color:
Up-click
Down-click
3/5
Note:The default value of "color" type is #000000 (black). It only supports color value in hexadecimal format.
2. <input type="date">:
The <input> element of type "date" generates an input field, which allows a user to input the date in a given format. A user can enter the
date by text field or by date picker interface.
Example:
1. <form>
2. Select Start and End Date: <br><br>
3. <input type="date" name="Startdate"> Start date:<br><br>
4. <input type="date" name="Enddate"> End date:<br><br>
5. <input type="submit">
6. </form>
3. <input type="datetime-local">:
The <input> element of type "datetime-local" creates input filed which allow a user to select the date as well as local time in the hour and
minute without time zone information.
Example:
1. <form>
2. <label>
3. Select the meeting schedule: <br><br>
4. Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
5. </label>
6. <input type="submit">
7. </form>
4. <input type="email">:
The <input> type "email" creates an input filed which allow a user to enter the e-mail address with pattern validation. The multiple attributes
allow a user to enter more than one email address.
Example:
1. <form>
2. <label><b>Enter your Email-address</b></label>
3. <input type="email" name="email" required>
4. <input type="submit">
5. <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p>
6. <label><b>Enter multiple Email-addresses</b></label>
7. <input type="email" name="email" multiple>
8. <input type="submit">
9. </form>
Note:User can also enter multiple email addresses separating by comma or whitespace as following:
5. <input type="month">:
The <input> type "month" creates an input field which allows a user to easily enter month and year in the format of "MM, YYYY" where MM
defines month value, and YYYY defines the year value. New
Example:
1. <form>
2. <label>Enter your Birth Month-year: </label>
3. <input type="month" name="newMonth">
4. <input type="submit">
5. </form>
6. <input type="number">:
The <input> element type number creates input filed which allows a user to enter the numeric value. You can also restrict to enter a
minimum and maximum value using min and max attribute.
Example:
1. <form>
2. <label>Enter your age: </label>
3. <input type="number" name="num" min="50" max="80">
4. <input type="submit">
5. </form>
Note:It will allow to enter number in range of 50-80. If you want to enter number other than range, it will show an error.
7. <input type="url">:
The <input> element of type "url" creates an input filed which enables user to enter the URL.
4/5
Example:
1. <form>
2. <label>Enter your website URL: </label>
3. <input type="url" name="website" placeholder="http://example.com"><br>
4. <input type="submit" value="send data">
5. </form>
8. <input type="week">:
The <input> type week creates an input field which allows a user to select a week and year form the drop-down calendar without time zone.
Example:
1. <form>
2. <label><b>Select your best week of year:</b></label><br><br>
3. <input type="week" name="bestweek">
4. <input type="submit" value="Send data">
5. </form>
9. <input type="search">:
The <input> type "search" creates an input filed which allows a user to enter a search string. These are functionally symmetrical to the text
input type, but may be styled differently.
Example:
1. <form>
2. <label>Search here:</label>
3. <input type="search" name="q">
4. <input type="submit" value="search">
5. </form>
10. <input type="tel">:
The <input> element of type ?tel? creates an input filed to enter the telephone number. The "tel" type does not have default validation such
as email, because telephone number pattern can vary worldwide.
Example:
1. <form>
2. <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>
3. <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
4. <input type="submit"><br><br>
5. </form>
Note: Here we are using two attributes that are "pattern" and"required" which will allow user to enter the number in given format and it is
required to enter the number in input field.
Next TopicHTML form attribute
5/5
HTML form Attribute
HTML <form> element attributes
In HTML there are various attributes available for <form> element which are given below:
HTML action attribute
The action attribute of <form> element defines the process to be performed on form when
form is submitted, or it is a URI to process the form information.
The action attribute value defines the web page where information proceed. It can be
.php, .jsp, .asp, etc. or any URL where you want to process your form.
Note: If action attribute value is blank then form will be processed to the same
page.
Example:
1. <form action="action.html" method="post">
2. <label>User Name:</label><br>
3. <input type="text" name="name"><br><br>
4. <label>User Password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit">
7. </form>
It will redirect to a new page "action.html" when you click on submit button
HTML method attribute
The method attribute defines the HTTP method which browser used to submit the form.
The possible values of method attribute can be:
post: We can use the post value of method attribute when we want to process the
sensitive data as it does not display the submitted data in URL.
get: The get value of method attribute is default value while submitting the form. But
this is not secure as it displays data in URL after submitting the form.
When submitting the data, it will display the entered data in the form of:
HTML target attribute
1/5
The target attribute defines where to open the response after submitting the form. The
following are the keywords used with the target attribute.
_self: If we use _self as an attribute value, then the response will display in current
page only.
_blank: If we use _blank as an attribute it will load the response in a new page.
HTML autocomplete attribute
The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an
input field to complete automatically. It can have two values "on" and "off" which enables
autocomplete either ON or OFF. The default value of autocomplete attribute is "on".
Note: it can be used with <form> element and <input> element both.
HTML enctype attribute
The HTML enctype attribute defines the encoding type of form-content while submitting
the form to the server. The possible values of enctype can be:
application/x-www-form-urlencoded: It is default encoding type if the enctype
attribute is not included in the form. All characters are encoded before submitting
the form.
multipart/form-data: It does not encode any character. It is used when our form
contains file-upload controls.
text/plain (HTML5): In this encoding type only space are encoded into + symbol
and no any other special character encoded.
1. <form action="action.html" method="post" enctype="text/plain" >
HTML novalidate attribute HTML5
The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this
attribute in form then it does not perform any type of validation and submit the form.
1. <form action = "action.html" method = "get" novalidate>
Try to change the form detials with novalidate atttribute and without novalidate
attribute and see the difference.
HTML <input> element attribute
2/5
HTML name attribute
The HTML name attribute defines the name of an input element. The name and value
attribute are included in HTTP request when we submit the form.
Note: One should not omit the name attribute as when we submit the form the
HTTP request includes both name-value pair and if name is not available it will not
process that input field.
Example:
1. <form action = "action.html" method = "get">
2. Enter name:<br><input type="name" name="uname"><br>
3. Enter age:<br><input type="number" name="age"><br>
4. Enter email:<br><input type="email"><br>
5. <input type="submit" value="Submit">
6. </form>
Note: If you will not use name attribute in any input field, then that input field will
not be submitted, when submit the form.
Click on submit and see the URL where email is not included in HTTP request as we
have not used name attribute in the email input field
HTML value attribute
The HTML value attribute defines the initial value or default value of an input field.
Example:
1. <form>
2. <label>Enter your Name</label><br>
3. <input type="text" name="uname" value="Enter Name"><br><br>
4. <label>Enter your Email-address</label><br>
5. <input type="text" name="uname" value="Enter email"><br><br>
6. <label>Enter your password</label><br>
7. <input type="password" name="pass" value=""><br><br>
8. <input type="submit" value="login">
9. </form>
Note: In password input filed the value attribute will always unclear
HTML required attribute HTML5
3/5
HTML required is a Boolean attribute which specifies that user must fill that filed before
submitting the form.
Example:
1. <form>
2. <label>Enter your Email-address</label><br>
3. <input type="text" name="uname" required><br><br>
4. <label>Enter your password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit" value="login">
7. </form>
If you will try to submit the form without completing email field then it will give an
error pop up.
HTML autofocus attribute HTML5
The autofocus is a Boolean attribute which enables a field automatically focused when a
webpage loads.
Example:
1. <form>
2. <label>Enter your Email-address</label><br>
3. <input type="text" name="uname" autofocus><br><br>
4. <label>Enter your password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit" value="login">
7. </form>
HTML placeholder attribute HTML5
The placeholder attribute specifies a text within an input field which informs the user
about the expected input of that filed.
The placeholder attribute can be used with text, password, email, and URL values.
When the user enters the value, the placeholder will be automatically removed.
Example:
1. <form>
2. <label>Enter your name</label><br>
3. <input type="text" name="uname" placeholder="Your name"><br><br>
4/5
4. <label>Enter your Email address</label><br>
5. <input type="email" name="email" placeholder="[email protected]"><br>
<br>
6. <label>Enter your password</label><br>
7. <input type="password" name="pass" placeholder="your password"><br>
<br>
8. <input type="submit" value="login">
9. </form>
HTML disabled attribute
The HTML disabled attribute when applied then it disable that input field. The disabled
field does not allow the user to interact with that field.
The disabled input filed does not receive click events, and these input value will not be
sent to the server when submitting the form.
HTML size attribute
The size attribute controls the size of the input field in typed characters.
Example:
1. <label>Account holder name</label><br>
2. <input type="text" name="uname" size="40" required><br><br>
3. <label>Account number</label><br>
4. <input type="text" name="an" size="30" required><br><br>
5. <label>CVV</label><br>
6. <input type="text" name="cvv" size="1" required><br><br>
HTML form attribute
HTML form attribute allows a user to specify an input filed outside the form but remains
the part of the parent form.
The email field is outside the form but still it will remain part of the form
User email:
5/5
HTML Comments
HTML Comments
Comments are some text or code written in your code to give an explanation about the code, and not visible
to the user. Comments which are used for HTML file are known as HTML comments. Anything written
between these tags will be ignored by the browser, so comments will not be visible on the webpage.
Comments of any code make code easy to understand and increase readability of code.
Comments are also part of the code, which gives an explanation of the code.
How to add comment In HTML
You can add comments in your HTML file using <! -- ... --> tag. So if you will write anything between theses
comment tag that will be treated as comment and browser will not read it.
Syntax
1. <! -- Write commented text here -->
Note: The commented code will not be visible to a webpage, and hence you can use comment tag
for documentation purpose, and debugging purpose:
Such as:
1. <!-- <p>There is some text</p>
2. <p>There is second text</p> -->
Example:
1. <!DOCTYPE html>
2. <html>
3. <!-- This is Header section -->
4. <head>
5. <!-- Internal CSS -->
6. <style>
7. body{
8. text-align: center;
9. background-color: #f0f8ff;
10. font-size: 30px;
11. color: red;
12. }
13. </style>
14. </head>
15. <!-- This is body section, write code here which you want to display on web-page -->
16. <body>
17. <!-- heading tag -->
18. <h2>First WebPage</h2>
19. <!-- Paragraph tag -->
20. <p>Write your Content here!!!</p>
21. </body>
22. </html>
Multiline Comment
In HTML code, we can also comments multiple lines at a time. In multiline comment we can use any
description about code or multiple line code to debug, etc.
Syntax
1. <!---
1/2
2. Your code is commented.
3. Write description of code.
4. It will not display at webpage.
5. -->
Example:
1. <h2>Cake Gallery</h2>
2. <!-- This is image for a yummy cake
3. you can see it on your web-page
4. of your favorite browser -->
5. <img src="https://static.javatpoint.com/htmlpages/images/cake.png" alt="cake image" height="300px"
6. width="300px">
Output:
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<!-- --> Yes Yes Yes Yes Yes
2/2
HTML File Path
HTML File Paths
An HTML file path is used to describe the location of a file
in a website folder. File paths are like an address of file for
a web browser. We can link any external resource to add
in our HTML file with the help of file paths such as images,
file, CSS file, JS file, video, etc.
The src or href attribute requires an attribute to link any
external source to HTML file.
Following are the different types to specify file paths:
1. <img src="picture.jpg"> It specifies that picture.jpg is located in the same folder
as the current page.
2. <img src="images/picture.jpg"> It specifies that picture.jpg is located in the
images folder in the current folder.
3. <img src="/images/picture.jpg"> It specifies that picture.jpg is located in the
images folder at the root of the current web.
4. <img src="../picture.jpg"> It specifies that picture.jpg is located in the folder one
level up from the current folder.
File paths are used on webpages to link external files like:
1. Web pages
2. Images
3. Style sheets
4. JavaScript
There are two types of File Paths:
1. Absolute File Paths
2. Relative File Paths
Absolute File Paths
Absolute file path specifies full URL address.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Using a Full URL File Path</h2>
1/3
5. <img src="https://www.javatpoint.com/images/nature-
1. jpg" alt="image" style="width:300px">
6. </body>
7. </html>
Relative File Paths
The relative file path specifies to a file which is related to the location of current page.
Example:
Let's take an example to see how the file path points to a file in the images folder
located at the root of the current web.
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Using a Relative File Path</h2>
5. <img src="/images/nature-2.jpg" alt="Mountain" style="width:300px">
6. </body>
7. </html>
Example:
This is how a file path points to a file in the images folder located in the current folder.
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Using a Relative File Path</h2>
5. <img src="images/nature-3.jpg" alt="Mountain" style="width:300px">
6. </body>
7. </html>
Example:
When the images folder located in the folder one level above the current folder.
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Using a Relative File Path</h2>
5. <img src="../images/nature4.jpg" alt="Mountain" style="width:300px">
6. </body>
7. </html>
Important Points for File path:
Always remember to use proper URL, file name, image name, else it will not
display on the webpage.
Try to use relative file paths, so that your code will be independent of URL.
2/3
HTML Head
HTML Head
The HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag.
The head of an HTML document is a part whose content is not displayed in the browser on page loading. It just contains metadata about the
HTML document which specifies data about the HTML document.
An HTML head can contain lots of metadata information or can have very less or no information, it depends on our requirement. But head
part has a crucial role an HTML document while creating a website.
Metadata defines the document title, character set, styles, links, scripts, and other meta information.
Following is a list of tags used in metadata:
<title>
<style>
<meta>
<link>
<script>
<base>
HTML <title> Element
The HTML <title> element is used to define the title of the document. It is used in all HTML/XHTML documents. The <title> element must be
placed between <head> element, and one document can only have one title element.
What does <title> element do?
1. It defines a title in the browser tab.
2. It provides a title for the page when it is added to favorites.
3. It displays a title for the page in search engine results.
Note: The title element must be specific about the document and its recommended length is 65 to 70 characters including spaces.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This Page Title</title>
5. </head>
6. <body>
7. <p>The body's content is displayed in the browser window.</p>
8. <p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>
9. </body>
10. </html>
HTML <style> Element
The HTML <style> element is used to style the HTML page. The <style> element can have CSS properties for that HTML page only. If we
want to apply CSS for multiple pages then we should use separate CSS file.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This is Page Title</title>
5. <style>
6. body {background-color: pink;}
7. h1 {color: red;}
8. p {color: blue;}
9. </style>
10. </head>
11. <body>
12. <h1>This is a Heading</h1>
13. <p>This is a paragraph.</p>
14. </body>
15. </html>
HTML <link> Element
The HTML <link> element is used to link an external style sheet to your webpage. The <link> element contains main two attributes which
are "rel" and "href". The rel attribute indicates that it is a stylesheet, and href gives the path to that external file.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
1/5
4. <title>This is title</title>
5. <link rel="stylesheet" href="style.css">
6. </head>
7. <body>
8. <h2>Web-page with external CSS</h2>
9. <p>This is looking a cool page</p>
10. </body>
11. </html>
HTML <meta> Element
The HTML <meta> element is used to specify the character set, page description, keywords, authors and other metadata on the webpage.
Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.
Let's see how to use metadata:
To define a character set:
1. <meta charset="UTF-8">
The charset attribute specifies the character encoding. In this example we have set it to "UTF-8" which means it can handle to display any
language.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. </head>
6. <body>
7. <p>This is written in English language<span style="color: blue"> My friend's name is....... </span></p>
8. <p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào</span></p>
9. </body>
10. </html>
Output:
To define a description of your webpage:
1. <meta name="description" content="Free Web tutorials">
If you give a meta description then it will be useful for the relevant search to perform by search engines.
To define keywords for search engines:
1. <meta name="keywords" content="HTML, CSS, XML, JavaScript">
The keyword value is also used to provide keywords for a search engine, but it may ignore by browser due to spammers.
To define author of the webpage:
1. <meta name="author" content="Akon">
The author value specifies the name of the person who wrote the page content, and it is useful to automatically extract author information by
some content management systems.
To refresh document every 30 seconds:
1. <meta http-equiv="refresh" content="30">
Meta refresh is used to provide instructions to the browser to automatically refresh the page after the given time interval. As in above
example it will automatically refresh after 30 sec
1. <meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html-head>
2/5
If you add an URL with content value, then it will redirect to that page after the time limit will over.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta http-equiv="refresh" content="5; url=https://www.javatpoint.com/html-head">
5. </head>
6. <body>
7. <h2>Meta element Example</h2>
8. <p style="color: green;">Kindly wait for 5 seconds and after 5 seconds it will automatically redirect to URL specified in meta tag</p>
9. </body>
10. </html>
Following is an example to show how to use all Meta elements within HTML head
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="description" content="Free Web tutorials">
6. <meta name="keywords" content="HTML,CSS,XML,JavaScript">
7. <meta name="author" content="Akon">
8. </head>
9. <body>
10. <p>All the meta information are set.</p>
11. </body>
12. </html>
Use <meta> tag to set the Viewport
This method is introduced in HTML5 to take control over the viewport by using <meta> tag.
Viewport is the user's visible area of a webpage. It changes from device to device and appears smaller on mobile phones than computer
screens.
Syntax for <meta> viewport element:
1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Here, the <meta> viewport element specifies how to control the page's dimensions and scaling.
The width=device-width is used to set the width of the page to follow the screen-width of the device (which will vary depending on the
device).
The initial-scale=1.0 is used to set the initial zoom level when the page is first loaded by the browser.
Example of a web page without the viewport <meta> tag:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
5. <img src="image.jpg" alt="image" width="460" height="345">
6. <p>
7. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
8. laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
9. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
10. eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
11. feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
12. zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
13. eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
14. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
15. facer possim assum.
16. </p>
17. </body>
18. </html>
Example of a web page with the viewport <meta> tag:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
5. <style>
6. img {
7. max-width: 100%;
8. height: auto;
9. }
10. </style>
11. </head>
12. <body>
13. <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
3/5
14. <img src="image.jpg" alt="image" width="460" height="345">
15. <p>
16. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
17. laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
18. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
19. eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
20. feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
21. zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
22. eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
23. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
24. facer possim assum.
25. </p>
26. </body>
27. </html>
Note: To see the difference clearly, open this page on smartphone or tablet.
HTML <base> Element
The HTML <base> element is used to specify the base URL and base target for all relative URLs in a page.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Page Title</title>
5. <base href="https://static.javatpoint.com/htmlpages/images/" target="_blank">
6. </head>
7. <body>
8. <img src="html5.png">
9. <p>We have specified a base URL, the browser will look for the image "html5.png"
10. at "https://static.javatpoint.com/htmlpages/images/html5.png"</p>
11. <p><a href=" https://www.javatpoint.com">JavatPoint</a></p>
12. <p>The link above will open in a new window because base target is set to "_blank".</p>
13. </body>
14. </html>
HTML <script> element
HTML <script> element is used to apply client side JavaScript for the same page or to add an external JavaScript file to current page.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script>
5. function fun() {
6. document.getElementById("p").style.color="green";
7. }
8. </script>
9. </head>
10. <body>
11. <h2>Script within Head element</h2>
12. <p id="p">This will change the color</p>
13. <button type="button" onclick="fun()">Click me</button>
14. </body>
15. </html>
If we want to use some external JavaScript file then it can be applied by:
1. <script src=".js file_path">
Excluding <html>, <head> and <body> elements
HTML 5 facilitates us to omit the <html>, the <body>, and the <head> tag.
Example:
1. <!DOCTYPE html>
2. <title>Page Title</title>
3. <h1>This is a heading</h1>
4. <p>This is a paragraph.</p>
Test it Now
Note: It is not recommended to omit the <html> and <body> tags. Omitting these tags can crash DOM or XML software and
produce errors in older browsers (IE9).
However, you can omit the <head> tag
4/5
HTML Layout
HTML Layouts
HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layo
which the web pages can be arranged. Web-page layout works with arrangement of visual elements of an HTML document.
Web page layout is the most important part to keep in mind while creating a website so that our website can appear professional with the gr
use CSS and JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website designing.
Every website has a specific layout to display content in a specific manner.
Following are different HTML5 elements which are used to define the different parts of a webpage.
<header>: It is used to define a header for a document or a section.
<nav>: It is used to define a container for navigation links
<section>: It is used to define a section in a document
<article>: It is used to define an independent self-contained article
<aside>: It is used to define content aside from the content (like a sidebar)
<footer>: It is used to define a footer for a document or a section
<details>: It is used to define additional details
<summary>: It is used to define a heading for the <details> element
NOTE: HTML layouts create an individual space for every part of the web page. So that every element can arrange in a significant o
Description of various Layout elements
HTML <header>
The <header> element is used to create header section of web pages. The header contains the introductory content, heading element, logo
webpage, and authorship information.
Example:
1. <header style="background-color: #303030; height: 80px; width: 100%">
2. <h1 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome to MyFirstWebpage</h1>
3. </header>
HTML <nav>
The <nav> elements is a container for the main block of navigation links. It can contain links for the same page or for other pages.
Example:
1. <nav style="background-color:#bcdeef;">
2. <h1 style="text-align: center;">Navgation Links</h1>
3. <ul>
4. <li><a href="#">link1</a></li>
5. <li><a href="#">link2</a></li>
6. <li><a href="#">link3</a></li>
7. <li><a href="#">link4</a></li>
8. </ul>
9. </nav>
1/3
HTML <section>
HTML <section> elements represent a separate section of a web page which contains related element grouped together. It can contain: text,
etc.
Example:
1. <section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
2. <h2>Introduction to HTML</h2>
3. <p>HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice fo
</p>
4. </section>
HTML <article>
The HTML
tag is used to contain a self-contained article such as big story, huge article, etc.
Example:
1. <article style="width: 100%; border:2px solid black; background-color: #fff0f5;">
2. <h2>History of Computer</h2>
3. <p>Write your content here for the history of computer</p>
4. </article>
HTML <aside>
HTML <aside> define aside content related to primary content. The <aside> content must be related to the primary content. It can function a
content of web page.
Example:
1. <aside style="background-color:#e6e6fa">
2. <h2>Sidebar information</h2>
3. <p>This conatins information which will represent like a side bar for a webpage</p>
4. </aside>
HTML <footer>
HTML <footer> element defines the footer for that document or web page. It mostly contains information about author, copyright, other links,
Example:
1. <footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
2. <h3>Footer Example</h3>
3. <p>© Copyright 2018-2020. </p>
4. </footer>
HTML <details>
HTML <details> element is used to add extra details about the web page and use can hide or show the details as per requirement.
Example:
1. <details style="background-color: #f5deb3">
2. <summary>This is visible section: click to show other details</summary>
3. <p>This section only shows if user want to see it. </p>
4. </details>
HTML <summary>
HTML <summary> element is used with the <details> element in a web page. It is used as summary, captions about the content of <details>
Example:
1. <details>
2. <summary>HTML is acronym for?</summary>
3. <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
4. </details>
2/3
HTML Computer code
When we are programming, sometimes it is mandatory to show the Output result, error
message, or coding part to user on a webpage. Hence to solve this issue HTML uses
different tags for the user inputs, codes, programs, etc. With the help of these tags, you
will be able to write codes to display on your webpage.
Following is a list of some tags which are used in HTML for this task.
<code>
<kbd>
<samp>
<var>
<pre>
HTML <code> element
It is used to represent some programming code on your website. The content written
between tag will be displayed in default monospace font.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Computer Code</h2>
5. <p>This is a programming code:</p>
6. <code>
7. x = 5;<br>
8. y = 6;<br>
9. z = x + y;
10. </code>
11. </body>
12. </html>
HTML <kbd> Element
It is used to represent user input, keyboard input, voice command etc. Text
written within <kbd>.....</kbd> tags is typically displayed in the
browser's default monospace font.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>The kbd Element</h2>
5. <kbd>This is how content written within kbd element looks like.</kbd>
</p>
6. </body>
7. </html>
HTML <samp> Element
1/3
The HTML <samp> element is used to represent a program's output. Text
written within samp element is typically displayed in the browser's default
monospace font.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>The samp Element</h2>
5. <samp>This is how the content within samp element looks like. </samp>
6. </body>
7. </html>
HTML <var> element
The HTML <var> element is used to define a variable. The variable could be
a variable in a mathematical expression or a variable in programming
context.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>The var Element</h2>
5. <p>This is a famous formula: <var>E</var> = <var>mc</var><sup>2</sup>.
</p>
6. </body>
7. </html>
HTML <pre> element
The <pre> element defines preformatted text, which displays the content
within it in a fixed-width font. It keeps the content into its original
format and ignores all formatting.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h3>Example of pre tag</h3>
5. <pre>
6. This is content written
7. within pre tag, and pre tag will ignore all
8. spaces, break lines, and will display the content
9. as in original format.
10. </pre>
11. </body>
12. </html>
2/3
HTML 5 Tags
HTML 5 Tags
There is a list of newly included tags in HTML 5. These HTML 5 tags (elements)
provide a better document structure. This list shows all HTML 5 tags in alphabetical
order with description.
List of HTML 5 Tags
Tag Description
<article> This element is used to define an independent piece of content in a
document, that may be a blog, a magazine or a newspaper article.
<aside> It specifies that article is slightly related to the rest of the whole page.
<audio> It is used to play audio file in HTML.
<bdi> The bdi stands for bi-directional isolation. It isolates a part of text that
is formatted in other direction from the outside text document.
<canvas> It is used to draw canvas.
<data> It provides machine readable version of its data.
<datalist> It provides auto complete feature for textfield.
<details> It specifies the additional information or controls required by user.
<dialog> It defines a window or a dialog box.
<figcaption> It is used to define a caption for a <figure> element.
<figure> It defines a self-contained content like photos, diagrams etc.
<footer> It defines a footer for a section.
<header> It defines a header for a section.
<main> It defines the main content of a document.
<mark> It specifies the marked or highlighted content.
<menuitem> It defines a command that the user can invoke from a popup menu.
<meter> It is used to measure the scalar value within a given range.
<nav> It is used to define the navigation link in the document.
<progress> It specifies the progress of the task.
1/2
<rp> It defines what to show in browser that don't support ruby annotation.
<rt> It defines an explanation/pronunciation of characters.
<ruby> It defines ruby annotation along with <rp> and <rt>.
<section> It defines a section in the document.
<summary> It specifies a visible heading for <detailed> element.
<svg> It is used to display shapes.
<time> It is used to define a date/time.
<video> It is used to play video file in HTML.
<wbr> It defines a possible line break.
2/2
HTML Symbols
HTML Symbols
There are many mathematical, technical and currency symbols which are not present
on a normal keyboard. We have to use HTML entity names to add such symbols to an
HTML page.
If there no entity name exists, you can use an entity number, a decimal, or hexadecimal
reference.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h3>The Currency Symbols</h3>
5. <p>This is Indian Rupee symbol <b>₹<b></p>
6. <p>This is Euro symbol <b>€</b></p>
7. <p> This is Dollar symbol <b>#36;</b></p>
8. </body>
9. </html>
Mathematical Symbols Supported by HTML
Char Number Entity Description
∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
∉ ∉ ∉ NOT AN ELEMENT OF
∋ ∋ ∋ CONTAINS AS MEMBER
1/3
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
Greek Symbols Supported by HTML
Char Number Entity Description
Α Α Α GREEK CAPITAL LETTER ALPHA
Β Β Β GREEK CAPITAL LETTER BETA
Γ Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε Ε GREEK CAPITAL LETTER EPSILON
Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA
Some Important Symbols Supported by HTML
Char Number Entity Description
© © © COPYRIGHT SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← ← LEFTWARDS ARROW
↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
↓ ↓ ↓ DOWNWARDS ARROW
♠ ♠ ♠ BLACK SPADE SUIT
♣ ♣ ♣ BLACK CLUB SUIT
♥ ♥ ♥ BLACK HEART SUIT
♦ ♦ ♦ BLACK DIAMOND SUIT
2/3
HTML Event Attributes
When a browser reacts on user action, then it is called as an event. For example, when
you click on the submit button, then if the browser displays an information box.
In HTML5 there are lots of event attributes available which can be activated using a
programming language such as JavaScript.
Following is a table of event attributes, using these attributes you can perform several
events.
Windows Event Attributes
Windows events are related for the window object, and it can only be applied with
<body> tag.
Attribute Description
onafterprint Executed the script after the document is printed.
onbeforeprint Executed the script before the document is printed.
onbeforeunload Executed the script before a document being unloaded.
onerror Executed the script when an error occurs.
onhashchange Executed the script when the anchor part in URL of the webpage is
changed.
onload Executed the script when the webpage is entirely loaded.
onmessage Executed the script when a message event occurs.
onoffline Executed the script when the network connection is disconnected,
and browser started working offline.
ononline Executed the script when the browser started working online
onpagehide Executed the script when the current webpage is hidden such as if
the user has moved away from the current webpage.
onpageshow Executed the script when the current webpage is focused.
onpopstate Executed the script when the window's active history is changed.
onresize Executed the script when the window is resized.
onstorage Executed the script when web storage is updated.
onunload Executed the script when the current webpage is unloaded, or
window is closed.
1/4
Form Event Attributes
Form event occurs when the user performs some action within the form such as
submitting the form, selecting input field, etc.
The form events can be used with any element, but these are mainly used with HTML
form elements.
Following is the list of all Form Event attributes:
Attribute Description
onblur Executed the script when form element loses the focus.
onchange Executed the script when the value of the element is changed.
onfocus Trigger an event when the element gets focused.
oninput Executed the script when the user enters input to the element.
oninvalid Executed the script when the element does not satisfy its predefined
constraints.
onreset Triggers the event when user reset the form element values.
onsearch Triggers the event when a search field receives some input.
onselect Triggers the event when the user has selected some text.
onsubmit Triggers the event when a form is submitted.
Keyboard Event Attributes
Keyboard event occurs when a user interacts with the keyboard. Following is a list of
the Keyboard event.
Attribute Description
onkeydown Triggers the event when the user presses down a key on the keyboard.
onkeypress Trigger the event when the user presses the key which displays some
character.
onkeyup Trigger the event when the user releases the currently pressed key.
Mouse Event Attributes
Attribute Description
onclick Trigger the event when the mouse clicks on the element.
ondblclick Trigger the event when mouse double-click occurs on the element.
onmousedown Trigger the event when the mouse button is pressed on the
element.
2/4
onmousemove Trigger the event when the mouse pointer moves over the element.
onmouseout Trigger the event when the mouse moves outside the element.
onmouseover Trigger the event when the mouse moves onto the element.
onmouseup Trigger the event when the mouse button is released.
onmousewheel Deprecated. Use the onwheel attribute.
onwheel Trigger the event when the mouse wheel rolls up or down on the
element
Clipboard Event Attributes
Attribute Description
oncopy Trigger the event when the user copies the content to the system
clipboard.
oncut Trigger the event when the content of an element is cut and copy to the
clipboard.
onpaste Trigger the event when the user pastes some content in an element.
Media Event Attributes
Attribute Description
onabort Executed the script when media playback is aborted.
oncanplay Executed the script when the media file is ready to play.
oncanplaythrough Executed the script when the media file is ready to play without
buffering or stopping.
oncuechange Executed the script text cue of <track> element is changed.
ondurationchange Executed the script when the media file duration is changed.
onemptied Executed the script if media occurs some fatal error, and the file
becomes unavailable.
onended Executed the script when the media file occurs its end point.
onerror Executed the script when some error occurred while fetching
the media data.
onloadeddata Executed the script when media data is loaded.
onloadedmetadata Executed the script when metadata of media file is loaded.
onloadstart Executed the script when loading of media file starts.
3/4
onpause Executed the script when media playback is paused.
onplay Executed the script when media file ready to play after being
paused.
onplaying Executed the script when media file is started playing.
onprogress Executed the script when the browser is in the process of
getting the media data.
onratechange Executed the script when playback speed changed.
onseeked Executed the script when seek operation is ended and seeking
attribute is set to false.
onseeking Executed the script when seek operation is active and seeking
attribute is set to true.
onstalled Executed the script when browser unexpectedly stopped
fetching the data media.
onsuspend Executed the script if fetching of media data is intentionally
stopped.
ontimeupdate Executed the script when playback position is changed, such as
if a user fasts forward the track.
onvolumechange Executed the script when media volume is changed (muted or
unmuted).
onwaiting Executed the script if playback pause to wait for loading more
data.
4/4
HTML Audio
HTML Audio Tag
HTML audio tag is used to define sounds such as
music and other audio clips. Currently there are
three supported file format for HTML 5 audio tag.
1. mp3
2. wav
3. ogg
HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar
technologies are used to play the multimedia items.
This table defines that which web browser supports which audio file format.
Browser mp3 wav ogg
Internet Explorer yes no no
Google Chrome yes yes yes
Mozilla Firefox yes* yes yes
Opera no yes yes
Apple Safari yes yes no
HTML Audio Tag Example
Let's see the code to play mp3 file using HTML audio tag.
1. <audio controls>
2. <source src="koyal.mp3" type="audio/mpeg">
3. Your browser does not support the html audio tag.
4. </audio>
Output:
0:00 / 0:00
Let's see the example to play ogg file using HTML audio tag.
1/3
1. <audio controls>
2. <source src="koyal.ogg" type="audio/ogg">
3. Your browser does not support the html audio tag.
4. </audio>
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<audio> Yes Yes Yes Yes Yes
Attributes of HTML Audio Tag
There is given a list of HTML audio tag.
Attribute Description
controls It defines the audio controls which is displayed with play/pause buttons.
autoplay It specifies that the audio will start playing as soon as it is ready.
loop It specifies that the audio file will start over again, every time when it is
completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file when the page loads.
src It specifies the source URL of the audio file.
HTML Audio Tag Attribute Example
Here we are going to use controls, autoplay, loop and src attributes of HTML audio tag.
1. <audio controls autoplay loop>
2. <source src="koyal.mp3" type="audio/mpeg"></audio>
MIME Types for HTML Audio format
The available MIME type HTML audio tag is given below.
Audio Format MIME Type
mp3 audio/mpeg
ogg audio/ogg
wav audio/wav
2/3
HTML bdi tag
HTML <bdi> tag
HTML <bdi> tag stands for Bidirectional Isolate Element. It is used to inform the
browser to isolate the span of text which may be formatted in opposite directions than
the surrounding text.
This tag is new in HTML5 and useful for languages such as Arabic or Hebrew, or if the
browser dynamically inserts some text without knowing the directionality of text.
Note: The directionality of content inside <bdi> does not influence by the
directionality of surrounding content.
Syntax
1. <bdi>Content</bdi>
Following are some specifications about the <bdi> tag
Display Inline
Start tag/End tag Both start and End tag
Usage Semantic/textual
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Bdi tag</title>
5. <style>
6. bdi{
7. font-size: 25px;
8. color: red; }
9. </style>
10. </head>
11. <body>
12. <h2>Example of HTML bdi tag</h2>
13. <p>
14. This <bdi> ???? ????? </bdi> Content is written in Arabic language
15. </p>
16. </body>
17. </html>
Output:
1/3
Attributes
Tag-specific attribute:
The <bdi> tag does not include any specific attribute
Global attribute:
The <bdi> tag supports all Global attribute
Event Attributes:
The <bdi> tag supports all Event Attributes
Difference between <bdi> and <bdo>
HTML <bdi> tag is new element of HTML5 and it is very similar to HTML <bdo>
element. But the main difference in both the elements is that <bdi> tag isolates the
content from its surrounding content but <bdo> tag reveres the direction. Sometimes
<bdo> tag may cause some unexpected rendering errors so try to use <bdi> if
required.
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<bdi> Yes No Yes Yes Yes
2/3
HTML Canvas
HTML Canvas Tag
The HTML canvas element provides HTML a bitmapped surface to work with. It is used to draw
graphics on the web page.
The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.
The <canvas> element is only a container for graphics, you must need a scripting language to
draw the graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D
shapes and bitmap images.
It is a low level, procedural model that updates a bitmap and does not have a built-in scene. There
are several methods in canvas to draw paths, boxes, circles, text and add images.
How to create a HTML canvas?
A canvas is a rectangle like area on an HTML page. It is specified with canvas element. By default,
the <canvas> element has no border and no content, it is like a container.
1. <canvas id = "mycanvas" width ="200" height ="100"> </canvas>
HTML 5 Canvas Tag Example
1. <canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">
2. Your browser does not support the HTML5 canvas tag.
3. </canvas>
Note: It is always necessary to specify the id attribute and the height & width attribute to
define the size of the canvas. You can have multiple canvas elements on one HTML page.
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<canvas> Yes Yes Yes Yes Yes
HTML Canvas Tag with JavaScript
A canvas is a two dimensional grid.
Coordinates (0,0) defines the upper left corner of the canvas. The parameters (0,0,200,100) is
used for fillRect() method. This parameter will fill the rectangle start with the upper-left corner (0,0)
and draw a 200 * 100 rectangle.
1. <canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;">
2. Your browser does not support the HTML5 canvas tag.
3. </canvas>
4. <script>
5. var c = document.getElementById("myCanvas");
6. var cctx = c.getContext("2d");
7. ctx.fillStyle = "#FF0000";
1/4
8. ctx.fillRect(0,0,200,100);
9. </script>
Drawing Line on Canvas
If you want to draw a straight line on the canvas, you can use the following two methods.
moveTo(x,y): It is used to define the starting point of the line.
lineTo(x,y): It is used to define the ending point of the line.
If you draw a line which starting point is (0,0) and the end point is (200,100), use the stroke method
to draw the line.
1. <canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3;">
2. Your browser does not support the HTML5 canvas tag.</canvas>
3. <script>
4. var c = document.getElementById("myCanvasLine");
5. var cctx = c.getContext("2d");
6. ctx.moveTo(0,0);
7. ctx.lineTo(200,100);
8. ctx.stroke();
9. </script>
Drawing Circle on Canvas
If you want to draw a circle on the canvas, you can use the arc() method:
1. arc(x, y, r, start, stop)
To sketch circle on HTML canvas, use one of the ink() methods, like stroke() or fill().
1. <canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3;">
2. Your browser does not support the HTML5 canvas tag.</canvas>
3. <script>
4. var c = document.getElementById("myCanvasCircle");
5. var cctx = c.getContext("2d");
6. ctx.beginPath();
7. ctx.arc(95,50,40,0,2*Math.PI);
8. ctx.stroke();
9. </script>
Drawing text on canvas
There are property and methods used for drawing text on the canvas.
font property: It is used to define the font property for the text.
fillText(text,x,y) method: It is used to draw filled text on the canvas. It looks like bold font.
strokeText(text,x,y) method: It is also used to draw text on the canvas, but the text is unfilled.
Let's see fillText() method example.
1. <canvas id="myCanvasText1" width="300" height="100" style="border:1px solid #d3d3d3;">
2. Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
3. <script>
4. var c = document.getElementById("myCanvasText1");
5. var cctx = c.getContext("2d");
6. ctx.font = "30px Arial";
2/4
7. ctx.fillText("Hello JavaTpoint",10,50);
8. </script>
Let's see strokeText() method example.
1. <canvas id="myCanvasText2" width="300" height="100" style="border:1px solid #d3d3d3;">
2. Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas>
3. <script>
4. var c = document.getElementById("myCanvasText2");
5. var cctx = c.getContext("2d");
6. ctx.font = "30px Arial";
7. ctx.strokeText("Hello JavaTpoint",10,50);
8. </script>
3/4
HTML datalist tag
HTML Datalist Tag
The HTML <datalist> tag is is used to provide an auto complete feature on form
element. It provides a list of predefined options to the users to select data.
The datalist tag is introduced in HTML5.
The <datalist> tag should be used with an <input< element that contains a "list"
attribute. The value of "list" attribute is linked with the datalist id.
The HTML datalist tag supports global and event attributes also.
HTML datalist tag example
Let's see the simple example of HTML5 datalist tag. If you press A, it will show a list of
cricketers starting with A letter.
1. <label>
2. Enter your favorite cricket player: Press any character<br />
3. <input type="text" id="favCktPlayer" list="CktPlayers">
4. <datalist id="CktPlayers">
5. <option value="Sachin Tendulkar">
6. <option value="Brian Lara">
7. <option value="Jacques Kallis">
8. <option value="Ricky Ponting">
9. <option value="Rahul Dravid">
10. <option value="Shane Warne">
11. <option value="Rohit Sharma">
12. <option value="Donald Bradman">
13. <option value="Saurav Ganguly ">
14. <option value="AB diVilliers">
15. <option value="Mahendra Singh Dhoni">
16. <option value="Adam Gilchrist">
17. </datalist>
18. </label>
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<datalist> Yes Yes Yes Yes Yes
1/2
HTML Details Tag
HTML <details> tag is used to specify the additional details on the web page that the user can view or hide
on demand.
According to W3C HTML specification, it is used as a disclosure widget from which user can retrieve
additional information or control.
It is used together with a relevant tag known as <summary>. Technically, there is no need of summary tag,
but if you ignore this then the browser will use some default text.
The <details> tag wraps all the content which you want to show or hide and the <summary> tag contains
the summary and the title of the section.
HTML details is a new tag introduced in HTML5.
Let's take an example to understand this clearly.
HTML details tag attribute
HTML details tag also supports global and event attributes in HTML.
The details tag provides one specific attribute open.
Attribute Description
open It specifies that the details will be displayed (open) to the user.
HTML details tag example
1. <details>
2. <summary>Copyright 2011-2014.</summary>
3. <p> - by JavaTpoint. All Rights Reserved.</p>
4. <p>All content and graphics on this web site are the property of the javatpoint.com</p>
5. </details>
6. <p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>
Test it Now
Copyright 2011-2014.
- by JavaTpoint. All Rights Reserved.
All content and graphics on this web site are the property of the javatpoint.com
Note: The details tag is currently only supported in Opera, Chrome, and in Safari 6.
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<details> Yes No No Yes Yes
2/3
HTML dialog tag
HTML Dialog Tag
HTML <dialog> tag is used to create a new popup dialog on a web page. This tag represents a
dialog box or other interactive component like window.
The <dialog> element uses a boolean attribute called open that activate element and facilitate user
to interact with it.
HTML dialog is a new tag introduced in HTML5.
HTML dialog tag example
1. <div>
2. <dialog id="myFirstDialog" style="width:50%;background-
color:#F4FFEF;border:1px dotted black;">
3. <p><q>I am so clever that sometimes I don't understand a single word of what I am saying.
4. </q> - <cite>Oscar Wilde</cite></p>
5. <button id="hide">Close</button>
6. </dialog>
7. <button id="show">Show Dialog</button>
8. </div>
9. <!-- JavaScript to provide the "Show/Close" functionality -->
10. <script type="text/JavaScript">
11. (function() {
12. var dialog = document.getElementById('myFirstDialog');
13. document.getElementById('show').onclick = function() {
14. dialog.show();
15. };
16. document.getElementById('hide').onclick = function() {
17. dialog.close();
18. };
19. })();
20. </script>
HTML dialog tag also supports global and event attributes in HTML.
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<dialog> Yes Yes Yes Yes Yes
1/2
HTML figcaption tag
The <figcaption> element is used to provide a caption to an image.
It is an optional tag and can appear before or after the content within the <figure> tag.
Only one <figcaption> element can be nested within a <figure> tag although the <figure>
element itself may contain multiple other elements like <img> or <code>.
The <figcaption> element is used with <figure> element and it can be placed as the first or last
child of the <figure> element.
HTML figure tag example
1. <figure>
2. <img src="https://static.javatpoint.com/htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
3. <figcaption>Fig.1.1 - A front view of the great Taj Mahal in Agra.</figcaption>
4. </figure>
Output:
Fig.1.1 - A front view of
the great Taj Mahal in
Agra.
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<figcaption> Yes Yes Yes Yes Yes
Note: HTML figcaption tag also supports the global and event attribute in HTML.
1/2
HTML script tag
HTML Script Tag
HTML script tag is used to specify client-side script such as JavaScript. It facilitate you
to place a script within your HTML document.
JavaScript is used for image manipulation, form validation, and dynamic content.
The syntax of script tag is given below:
1. <script>
2. //code to be executed
3. </script>
Attributes of HTML script tag
Attribute Description Compatibility
src It specifies the URL of an external script file. HTML 4.01,
HTML5
type It specifies the media type of the script. HTML 4.01
async It is a boolean value which specifies that the script is HTML5
executed asynchronously.
defer It is a boolean value which is used to indicate that script HTML 4.01,
is executed after document has been parsed. HTML5
Usage of script tag
There can be two usage of HTML script tag:
1. to embed script code
2. to link script file
Embed script code
The script tag can be used within <body> or <head> tag to embed the scripting code.
Let's see the example to have script tag within HTML body.
1. <script type="text/javascript">
2. document.write("JavaScript is a simple language for javatpoint learners")
3. </script>
JavaScript is a simple language for javatpoint learners
1/2
Let's see the example to have script tag within HTML head tag.
1. <script type="text/javascript">
2. function msg(){
3. alert("Hello Javatpoint");
4. }
5. </script>
Link script file
The script tag can be used to link external script file by src attribute. It must be used
within the <head> tag only.
1. <script type="text/javascript" src="message.js" />
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<script> Yes Yes Yes Yes Yes
2/2
HTML Quotes
HTML Quotes
HTML quotes are used to put a short quotation on your website. To do so, you need to use HTML q tag and
HTML blockquote tag.
HTML q tag
HTML q tag is used to put small quotation. To do so, write your text within <q>. .............. </q> tag.
1. <p> Great quote on love and life.</p>
2. <p> Dr. Seuss once said : <q>Reality is finally better than your dreams.</q></p>
Output:
Great quote on love and life.
Dr. Seuss once said : “Reality is finally better than your dreams.”
HTML blockquote tag
HTML blockquote tag is used to define a large quoted section. If you have a large quotation then put the
entire text within <blockquote>.............. </blockquote> tag.
1. <p> Read this inspirational story.</p>
2. <blockquote> According to scientists, the bumblebee's body is too heavy and its wing span too
3. small. Aerodynamically, the bumblebee cannot fly. But the bumblebee doesn't know that and it
4. keeps flying. When you don't know your limitations, you go out and surprise yourself. In hindsight, you
5. wonder if you had any limitations. The only limitations a person has are those that are self-
6. imposed. Don't let education put limitations on you.</blockquote>
Output:
Read this inspirational story.
According to scientists, the bumblebee's body is too heavy and its wing span too small.
Aerodynamically, the bumblebee cannot fly. But the bumblebee doesn't know that and it keeps flying.
When you don't know your limitations, you go out and surprise yourself. In hindsight, you wonder if you
had any limitations. The only limitations a person has are those that are self- imposed. Don't let
education put limitations on you.
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<q> and <blockquote> Yes Yes Yes Yes Yes
HTML Tags which are used in Quotations and Citation
Tag Description
<abbr> It defines the abbreviation or an acronym.
<address> It is used to define the contact information of the document writer.
<bdo> It defines the direction of the text.
1/2
<blockquote> It is used to define a section that is quoted from another source.
<q> It is used to put the small quotations.
<cite> It defines the title of source from where quotation or work is taken.
<define> It is used to define a definition term.
2/2
HTML Video
HTML Video Tag
HTML 5 supports <video> tag also. The HTML video tag is used for streaming video
files such as a movie clip, song clip on the web page.
Currently, there are three video formats supported for HTML video tag:
1. mp4
2. webM
3. ogg
Let's see the table that defines which web browser supports video file format.
Browser mp4 webM ogg
Internet Explorer yes no no
Google Chrome yes yes yes
Mozilla Firefox yes yes yes
Opera no yes yes
Apple Safari yes no no
Android also supports mp4 format.
HTML Video Tag Example
Let's see the code to play mp4 file using HTML video tag.
1. <video controls>
2. <source src="movie.mp4" type="video/mp4">
3. Your browser does not support the html video tag.
4. </video>
Let's see the example to play ogg file using HTML video tag.
1. <video controls>
2. <source src="movie.ogg" type="video/ogg">
3. Your browser does not support the html video tag.
4. </video>
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<video> Yes Yes Yes Yes Yes
1/3
Attributes of HTML Video Tag
Let's see the list of HTML 5 video tag attributes.
Attribute Description
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is
not played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is
completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file when the page loads.
src It specifies the source URL of the video file.
HTML Video Tag Attribute Example
Let's see the example of video tag in HTML where are using height, width, autoplay,
controls and loop attributes.
1. <video width="320" height="240" controls autoplay loop>
2. <source src="movie.mp4" type="video/mp4">
3. Your browser does not support the html video tag.
4. </video>
MIME Types for HTML Video format
The available MIME type HTML video tag is given below.
Video Format MIME Type
mp4 video/mp4
ogg video/ogg
webM video/webM
2/3
HTML User Manual
HTML5 User Manual
You should follow some convention while using HTML:
Use a Consistent CSS
A user must use consistent style while writing HTML. It makes the code simpler and
more understandable for people.
Your code must be small, clean and well-formed.
Use Correct Document Type
You should declare document type at the starting of your code.
For example:
1. <!DOCTYPE html>
You can also use <!DOCTYPE html> to maintain your lower case practice.
Use Lower Case Element Names
HTML5 facilitates you to use upper case and lower case letters in element name. But it
is good practice to use only lower case. Because:
Mixing lower case and upper case letters in elements is not a good idea.
Lowercase looks neat and clean.
Lower case is easy to write.
Developers mainly use lower case letters.
Example:
Bad practice:
1. <SECTION>
2. <p>This is javatpoint.com</p>
3. </SECTION>
Note: This example will run but it is not a good practice to write elements in
uppercase letters.
Very Bad practice:
1. <Section>
2. <p>This is a javatpoint.com</p>
3. </SECTION>
Good practice:
1. <section>
1/3
2. <p>This is javatpoint.com.</p>
3. </section>
Close all HTML Elements
In HTML5, it is not required to close all HTML tags. But, it is recommended to close
tags.
Bad practice:
1. <section>
2. <p>This is javatpoint.com
3. </section>
Good practice:
1. <section>
2. <p>This is javatpoint.com</p>
3. </section>
Close empty HTML Elements
In HTML5, it is not mandatory to close empty HTML tags. You can close it or let it be
unclosed.
Good practice:
1. <meta charset="utf-8">
Don't Omit <html> and <body>
HTML5 facilitates you to omit and tag. You can exclude both tags and the program will
work well enough.
Example:
1. <!DOCTYPE html>
2. <head>
3. <title>Page Title</title>
4. </head>
5. <h1>This is javatpoint.com</h1>
6. <p>Welcome to javatpoint.com</p>
Test it Now
We recommend you to not to omit and tag because is a root element and specifies the
page language.
Syntax:
1. <!DOCTYPE html>
2. <html lang="en-US">
Example:
1. <!DOCTYPE html>
2. <html lang="en-US">
3. <head>
4. <title>Page Title</title>
2/3
5. </head>
6. <body>
7. <h1>This is a heading</h1>
8. <p>This is a paragraph.</p>
9. </body>
10. </html>
3/3
HTML Google Maps
HTML Google Map is used to display maps on your webpage. You can simply add a map
on your basic HTML page.
Step 1: Get a Google Maps API Key
To use Google Maps on your website, you'll need an API key. Follow these steps to
obtain one:
1. Visit the Google Cloud Platform Console (https://console.cloud.google.com/).
2. Create a new project or select an existing one.
3. Enable the Google Maps JavaScript API for your project.
4. Generate an API key for your project.
Step 2: Create an HTML File
Create an HTML file on your local machine and open it in a text editor.
Step 3: Set up the HTML Structure
Add the basic HTML structure to your file:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Tutorial</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>Google Maps Tutorial</h1>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<script>
function initMap() {
// Code to initialize the map will go here
}
</script>
</body>
</html>
Replace YOUR_API_KEY in the script tag's src attribute with the API key you obtained in
Step 1.
Step 4: Initialize the Map
Inside the initMap function, add code to initialize the map and display it on the page:
function initMap() {
// Create a new map object
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.7749, lng: -122.4194}, // San Francisco coordinates
zoom: 12
});
// You can customize the map further with markers, overlays, etc.
}
This code creates a new map object centered on San Francisco with a zoom level of 12.
Feel free to adjust the coordinates and zoom level as needed.
Step 5: View the Map Save the HTML file and open it in a web browser. You should see a
map displayed on the page centered on the specified coordinates.
Congratulations! You've successfully integrated Google Maps into your HTML5 web page.
From here, you can explore the Google Maps JavaScript API documentation.
HTML Migration
HTML5 Migration
HTML5 migration specifies that how to migrate from HTML4 to HTML5. Let?s see how to convert HTML4 page into
HTML5 page without any problem in content or structure.
Table:
In HTML4 In HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>
Let's see a typical HTML4 page.
Example:
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html lang="en">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5. <title>HTML4</title>
6. <style>
7. body {
8. font-family: Verdana,sans-serif;
9. font-size: 0.9em;
10. }
11. div#header, div#footer {
12. padding: 10px;
13. color: white;
14. background-color: black;
15. }
16. div#content {
17. margin: 5px;
18. padding: 10px;
19. background-color: lightgrey;
20. }
21. div.article {
22. margin: 5px;
23. padding: 10px;
24. background-color: white;
25. }
26. div#menu ul {
27. padding: 0;
28. }
29. div#menu ul li {
30. display: inline;
31. margin: 5px;
32. }
33. </style>
34. </head>
35. <body>
36. <div id="header">
37. <h1>JavaTpoint Times</h1>
38. </div>
39. <div id="menu">
40. <ul>
41. <li>Tutorials</li>
42. <li>Technology</li>
43. <li>Blog</li>
1/3
44. </ul>
45. </div>
46. <div id="content">
47. <h2>Tutorials Section</h2>
48. <div class="article">
49. <h2>Tutorial1</h2>
50. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
51. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
52. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
53. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
54. </div>
55. <div class="article">
56. <h2>Tutorial2</h2>
57. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
58. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
59. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
60. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
61. </div>
62. </div>
63. <div id="footer">
64. <p>© 2018 JavaTpoint Times. All rights reserved.</p>
65. </div>
66. </body>
67. </html>
Change HTML4 Doctype to HTML5 Doctype
HTML4 Doctype Syntax:
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5 Doctype Syntax:
1. <!DOCTYPE html>
Example:
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5. <title>HTML5</title>
6. <style>
7. body {
8. font-family: Verdana,sans-serif;
9. font-size: 0.9em;
10. }
11. div#header, div#footer {
12. padding: 10px;
13. color: white;
14. background-color: black;
15. }
16. div#content {
17. margin: 5px;
18. padding: 10px;
19. background-color: lightgrey;
20. }
21. div.article {
22. margin: 5px;
23. padding: 10px;
24. background-color: white;
25. }
26. div#menu ul {
27. padding: 0;
28. }
29. div#menu ul li {
30. display: inline;
31. margin: 5px;
32. }
33. </style>
34. </head>
35. <body>
36. <div id="header">
2/3
37. <h1>JavaTpoint Times</h1>
38. </div>
39. <div id="menu">
40. <ul>
41. <li>Tutorials</li>
42. <li>Technology</li>
43. <li>Blog</li>
44. </ul>
45. </div>
46. <div id="content">
47. <h2>Tutorials Section</h2>
48. <div class="article">
49. <h2>Tutorial1</h2>
50. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
51. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
52. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
53. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
54. </div>
55. <div class="article">
56. <h2>Tutorial2</h2>
57. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
58. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
59. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
60. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
61. </div>
62. </div>
63. <div id="footer">
64. <p>© 2018 JavaTpoint Times. All rights reserved.</p>
65. </div>
66. </body>
67. </html>
3/3
What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation
SVG integrates with other W3C standards such as the DOM and XSL
SVG is a W3C Recommendation
SVG 1.0 became a W3C Recommendation on 4 September 2001.
SVG 1.1 became a W3C Recommendation on 14 January 2003.
SVG 1.1 (Second Edition) became a W3C Recommendation on 16 August 2011.
SVG Advantages
Advantages of using SVG over other image formats (like JPEG and GIF) are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable
SVG graphics do NOT lose any quality if they are zoomed or resized
SVG is an open standard
SVG files are pure XML
Creating SVG Images
SVG images can be created with any text editor, but it is often more convenient to create
SVG images with a drawing program, like Inkscape.
1/1
SVG in HTML
Embed SVG Directly Into HTML Pages
Here is an example of a simple SVG graphic:
and here is the HTML code:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Try it Yourself »
SVG Code explanation:
An SVG image begins with an <svg> element
The width and height attributes of the <svg> element define the width and height of
the SVG image
The <circle> element is used to draw a circle
The cx and cy attributes define the x and y coordinates of the center of the circle. If
cx and cy are not set, the circle's center is set to (0, 0)
The r attribute defines the radius of the circle
The stroke and stroke-width attributes control how the outline of a shape appears.
We set the outline of the circle to a 4px green "border"
The fill attribute refers to the color inside the circle. We set the fill color to yellow
The closing </svg> tag closes the SVG image
Note: Since SVG is written in XML, all elements must be properly closed!
2/1
SVG Rectangle
SVG Shapes
SVG has some predefined shape elements that can be used by developers:
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
The following chapters will explain each element, starting with the rect element.
SVG Rectangle - <rect>
Example 1
The <rect> element is used to create a rectangle and variations of a rectangle shape:
Here is the SVG code:
Example
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"
/>
</svg>
Try it Yourself »
Code explanation:
The width and height attributes of the <rect> element define the height and the
width of the rectangle
The style attribute is used to define CSS properties for the rectangle
The CSS fill property defines the fill color of the rectangle
1/4
The CSS stroke-width property defines the width of the border of the rectangle
The CSS stroke property defines the color of the border of the rectangle
Example 2
Let's look at another example that contains some new attributes:
Here is the SVG code:
Example
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
Try it Yourself »
Code explanation:
The x attribute defines the left position of the rectangle (e.g. x="50" places the
rectangle 50 px from the left margin)
The y attribute defines the top position of the rectangle (e.g. y="20" places the
rectangle 20 px from the top margin)
The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
The CSS stroke-opacity property defines the opacity of the stroke color (legal range:
0 to 1)
Example 3
Define the opacity for the whole element:
2/4
Here is the SVG code:
Example
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
Try it Yourself »
Code explanation:
The CSS opacity property defines the opacity value for the whole element (legal
range: 0 to 1)
Example 4
Last example, create a rectangle with rounded corners:
Here is the SVG code:
Example
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Try it Yourself »
Code explanation:
3/4
SVG Circle
SVG Circle - <circle>
The <circle> element is used to create a circle:
Here is the SVG code:
Example
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Try it Yourself »
Code explanation:
The cx and cy attributes define the x and y coordinates of the center of the circle. If
cx and cy are omitted, the circle's center is set to (0,0)
The r attribute defines the radius of the circle
1/1
SVG Ellipse
SVG Ellipse - <ellipse>
The <ellipse> element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y
radius that differs from each other, while a circle has equal x and y radius:
Example 1
The following example creates an ellipse:
Here is the SVG code:
Example
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
Try it Yourself »
Code explanation:
The cx attribute defines the x coordinate of the center of the ellipse
The cy attribute defines the y coordinate of the center of the ellipse
The rx attribute defines the horizontal radius
The ry attribute defines the vertical radius
Example 2
The following example creates three ellipses on top of each other:
2/1
Here is the SVG code:
Example
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
Try it Yourself »
Example 3
The following example combines two ellipses (one yellow and one white):
Here is the SVG code:
Example
<svg height="100" width="500">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /> </
svg>
2/2
SVG Text
SVG Text - <text>
The <text> element is used to define a text.
Example 1
Write a text:
I love SVG!
Here is the SVG code:
Example
<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
Try it Yourself »
Example 2
Rotate the text:
Here is the SVG code:
Example
<svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
Try it Yourself »
Example 3
The <text> element can be arranged in any number of sub-groups with the <tspan>
element. Each <tspan> element can contain different formatting and position.
1/2
Text on several lines (with the <tspan> element):
Several lines:
First line.
Second line.
Here is the SVG code:
Example
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line.</tspan>
<tspan x="10" y="70">Second line.</tspan>
</text>
</svg>
Try it Yourself »
Example 4
Text as a link (with the <a> element):
I love SVG!
Here is the SVG code:
Example
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="https://www.w3schools.com/graphics/" target="_blank">
<text x="0" y="15" fill="red">I love SVG!</text>
</a>
</svg>
2/2
SVG Stroke Properties
SVG offers a wide range of stroke properties. In this chapter we will look at the following:
stroke
stroke-width
stroke-linecap
stroke-dasharray
All the stroke properties can be applied to any kind of lines, text and outlines of elements
like a circle.
SVG stroke Property
The stroke property defines the color of a line, text or outline of an element:
Here is the SVG code:
Example
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
Try it Yourself »
SVG stroke-width Property
The stroke-width property defines the thickness of a line, text or outline of an element:
1/3
Here is the SVG code:
Example
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
Try it Yourself »
SVG stroke-linecap Property
The stroke-linecap property defines different types of endings to an open path:
Here is the SVG code:
Example
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
Try it Yourself »
SVG stroke-dasharray Property
The stroke-dasharray property is used to create dashed lines:
2/3
Here is the SVG code:
Example
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
3/3
You might also like
- Web Design and Development (HTML, CSS and JavaScript)100% (7)Web Design and Development (HTML, CSS and JavaScript)68 pages
- Complete Practical Exercises HTML, CSS & JS80% (5)Complete Practical Exercises HTML, CSS & JS12 pages
- Complete HTML Tags List With Examples Free Pdf1100% (3)Complete HTML Tags List With Examples Free Pdf17 pages
- CSS, HTML, JavaScript LAB (Good Practical Programs)83% (6)CSS, HTML, JavaScript LAB (Good Practical Programs)82 pages
- Chapter 1 - Introduction To Web Design and Development100% (1)Chapter 1 - Introduction To Web Design and Development64 pages
- Introduction To Web Technology: Unit 3 HTMLNo ratings yetIntroduction To Web Technology: Unit 3 HTML49 pages
- Java Web Development Course: Writing CSS Codes100% (1)Java Web Development Course: Writing CSS Codes50 pages
- SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021No ratings yetSVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-20218 pages
- ANU UG 5th Sem B.SC Computers Web Interface Designing Technologies Material PDF (WWW - Anuupdates.org)No ratings yetANU UG 5th Sem B.SC Computers Web Interface Designing Technologies Material PDF (WWW - Anuupdates.org)170 pages
- HTML Tutorials - I-Tech Software Education100% (1)HTML Tutorials - I-Tech Software Education50 pages
- Hyper Text Markup Language (HTML) : Unit 5No ratings yetHyper Text Markup Language (HTML) : Unit 512 pages
- University of Al-Fateh Faculty of EngineeringNo ratings yetUniversity of Al-Fateh Faculty of Engineering14 pages
- Comm 120 S20 UPDATED ONLINE Syllabus PUBLICNo ratings yetComm 120 S20 UPDATED ONLINE Syllabus PUBLIC13 pages
- University of Tennessee Extension Cord Safety GuidelinesNo ratings yetUniversity of Tennessee Extension Cord Safety Guidelines4 pages
- Powerha Systemmirror 7 Advanced ConfigurationsNo ratings yetPowerha Systemmirror 7 Advanced Configurations3 pages
- Design of UML Diagrams For WEBMED - Healthcare Ser PDFNo ratings yetDesign of UML Diagrams For WEBMED - Healthcare Ser PDF17 pages
- Deadline 04 June, 2021: Any Other Formats Like Scan Images, PDF, Zip, Rar, PPT, and BMP, Etc Will Not Be AcceptedNo ratings yetDeadline 04 June, 2021: Any Other Formats Like Scan Images, PDF, Zip, Rar, PPT, and BMP, Etc Will Not Be Accepted3 pages
- WordPress Support Specialist - WPMU DEV Support Task Sheet #1No ratings yetWordPress Support Specialist - WPMU DEV Support Task Sheet #17 pages
- Chapter 2: IMS Fileshare Databases: 2.1 OverviewNo ratings yetChapter 2: IMS Fileshare Databases: 2.1 Overview6 pages
- Laboratory Activity 5 - Getting Familiar With LabView Part 1No ratings yetLaboratory Activity 5 - Getting Familiar With LabView Part 121 pages
- SanDisk Lightning Read-Intensive SAS SSDs Datasheet - 01102014 - FINALNo ratings yetSanDisk Lightning Read-Intensive SAS SSDs Datasheet - 01102014 - FINAL2 pages
