HTML Tutorial - Complete basic guide for

beginners
HTML is a markup language that creates webpage layout. There are at least 1.2
billion websites online today and all are designed by using HTML. Take our HTMl tutorial
and get a complete basic guide for beginners.
If you are interested in developing websites, then, gaining an in-depth knowledge of HTML
is the first step. Only after that you can start CSS and JavaScript coding.
We have created this HTML Tutorial for beginners with practical examples for every topic.
So, go through this complete HTML tutorial and start climbing the ladder of a beautiful Web
Designing journey.
In our previous article we gave a brief introduction to What is HTML?. We also talked about
some prerequisites and popular HTML Editors. We suggest you to first read that article and
then continue with this tutorial.
Useful Read: Full Stack Development – Steps to Become a Full Stack Developer .
Contents
 1: Is HTML a programming language?
 2: Short HTML History
 3: Features of HTML
 4: Advantages of Learning HTML
 5: Your first HTML webpage
 6: Microsoft Word as HTML Editor?
 7: HTML Versions Timeline
Is HTML a programming language?
HTML is called as a markup language that is different from a programming language. Its full
form is Hypertext Markup Language. Now, What is a markup language?, What is Hypertext?
How is it different from programming language? Let's explain each term and start our HTML
tutorial:
 Hypertext: Hypertext means, text with a link embedded in it. If you click on that link,
it will open a new webpage. Apart from text, hypertext may contain HTML
tables, HTML lists, HTML forms, HTML images, etc.
 Markup language: Markup language uses tags to define elements within a document.
It contains familiar words that are human-readable like forms, tables, links, titles, etc.
Every tag in a markup language has a special meaning of its own and performs a
particular operation.
In conclusion, HTML is not a programming language. A programming language uses logic to
produce a result, it use conditional statements, variables, functions, etc. Whereas HTML is a
markup language, that create structures using tags for the data presentation. There is no logic
or algorithm involved.

Short HTML History

Let's quickly see the historical facts about HTML-
 Sir Tim Berners-Lee developed HTML in late 1989, and he is considered as the
Father of HTML.
 In 1996, the World Wide Web Consortium (W3C) became the authority to maintain
the HTML specifications.
 It became an international standard (ISO) in 2000.
Features of HTML
Before diving deep into this complete HTML tutorial, it is necessary to get some
fundamentals right. As a beginner, you should be aware of features and functionalities of
HTML. Only then you will be able to take interest in HTML coding. Let's discuss the most
important features of HTML:
 It develops the structure of a webpage. All the blocks and elements present in a
website, exist because of HTML.
 Simple human-readable tags represent elements in a webpage. Hence, they are easy to
remember.
 It is universally supported by all browsers. It is a standard markup language for
website development.
 HTML 5 can give support in enhancing the experience in gaming arena.
 It is easy to learn and implement.
 It is platform independent, i.e., it works on all the operating systems.

Advantages of Learning HTML

Originally, HTML was developed to define the structure of webpages. It had some basic tags
just for structural changes like heading tag, paragraph tag, list tag. However, continuous
research and advancement in technology helped it develop over the years. Let us see some
Advantages of HTML:
 It has tags that optimize the website for search engine and boost performance. These
tags are <meta> tags, <heading> tags, <title> tag, etc.
 It is the base of designing and developing web pages. Once you get its basics right,
other related technologies like Javascript, CSS, etc become easier to understand.
A beginner's first HTML code example with
explanation
This is the first basic example in this HTML tutorial. Even for a beginner it is pretty easy to
understand. Have a look at the structure of the HTML code, but don't stress too much about
the unfamilar tags. This is your first example with very basic HTML tags:
ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<title> Page Title </title>
</head>
<body>
<h1> This is a Heading </h1>
<p> This is a Paragraph </p>
</body>
</html>
Output
This is a Heading
This is a Paragraph
Explanation of HTML tags used in the Example
 <!DOCTYPE>- The doctype declaration indicates the document type and version of
HTML used on the webpage. Each version has a different doctype declaration.
HTML5 Doctype is used in this example.
 <html>- It is the root tag that describes the whole webpage. It is a paired tag, i.e., it
has a closing tag also, </html>. Everything will be written inside these tags.
 <head>- Head tag contains information about the document like its title, author
information, description of the webpage, and so on. It has different tags to perform
these functions. It is also a paired tag.
 <title>- Title tag is used inside <head>, and it specifies the title of the document.
 <body>- The body tag contains all the information which will be displayed on the
webpage. If you want anything to be displayed on the webpage, you have to write it
within these tags.
 <h1>- Heading tag is used to define headings. <h1> is the largest heading, followed
by <h2>, <h3>, to <h6>.
You can try our online HTML editor and can make changes accordingly.

Microsoft Word as HTML Editor for this HTML

tutorial?
Can you use word processors like MS Word for HTML editing? The answer is yes you can,
but you shouldn't. You can write your HTML code on any application that gives you facility
to write, but you should only use dedicated HTML editors or Notepad.
MS Word is not appropriate for coding because it won't be able to format code like a
dedicated Editor. Formatting of code, like indentation, color scheme, etc. is very important, it
results in less errors and the code looks appealing to the eyes. MS Word is not able to
understand the HTML code and it will show grammatical errors.
So, during the complete HTML tutorial, don't even think of using MS Word as a code editor.
Use Notepad, Brackets, Sublime, VSCode, etc. for website development and designing.

HTML Versions Timeline

HTML has evolved continuously with time. Each new version was better than the previous
one with enhanced features. The current version is HTML5, equipped with various advanced
tags. Lets have a look at the timeline of HTML Version's evolution:
HTML Versions Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML 5 2014
Frequently Asked Questions
Do all website use HTML?
Yes, all the websites present on the internet use HTML for their layout. Even different CMS,
like wordpress, magento, etc, where coding knowledge is not necessary, also use it to design
websites.

Is there any alternative for HTML?

No, there is no alternative to HTML. It is a standard for creating webpages on the internet. It
creates a base of the website. This base is then modified by using CSS, JavaScript, JQuery,
Bootstrap, etc to beautify the website and to make it dynamic.

Is HTML hard to understand?

It is an easy language to learn. Anyone with some technical or non-technical background can
opt to learn It. Being a markup language, it is easy to understand as it uses human-readable
standard words for tags.

What are tags in HTML?

HTML use HTML tags to assign properties to the content. HTML with it's tags play a
important role in web development. Learn full HHtml tutorial from the scratch. An HTML
tag is a keyword surrounded by the sign '<>'. All these tags has a special meaning to web
browser. Each tag's work is predefined and the content we write or insert between these tags
will be displayed on the web page as per the definition of that tag. For example: <p>This is a
paragraph</P>, this line will display a paragraph because the content we write between <p>
tags get displayed as a paragraph in the browser.

What is the meaning of Markup Language?

A Markup language uses tags that can be predefined (in HTML), or user-defined (in XML).
Any markup language is very easy to learn as it uses human-readable tags that are easy to
remember.

What is the full form of HTML?

HTML Full Form is HyperText Markup Language.

What is Hypertext?
A HyperText is a text that contain a link to some other text or webpage. Hypertext document
is a the one the contain Hyperlinks. HyperText is also sometimes used to define tables,
images, etc with integrated Hyperlinks.

HTML Tags list: Paired and unpaired tags

The whole HTML functions on HTML Tags. These tags are the basic building block of a
website. No web technologies like CSS, PHP, Python, WordPress, etc. will exist without
HTML Tags. Today, you will get a complete HTML tags list; paired and unpaired. You can
also download a PDF of HTML tags list. Let's start with HTML tag definition.
What is an HTML Tag?
HTML Tags are pre-defined elements in HTML, enclosed within these brackets < > signs.
For example: <html>, <table>, etc. All HTML tags has a particular function associated with
them.
Each tag has a special function and a combination of various tags developes a website. For
example, a <p> tag defines a paragraph in the website and a <table> tag displays a table.
All HTML Tags are predefined, i.e., you cannot create new tags. Look at the example below,
this is an example of a paired tag. Observe that there are two tags of same name, but the latter
one has a slash / before it, it is a closing tag. Now, what is a closing tag? Let's start with
different types of tags!
Syntax:
<p> Content </p>

Types of tags in HTML- HTML tags list download

The types of tags in HTML are categorized on the basis of their appearance. Some tags
comes in pairs and others are single. You can also download HTML tags list pdf or can look at
the table at the page end.
There are two types of tags in HTML that are used by the Website Designers:
1. Paired Tags (Opening and Closing Tags)
2. Unpaired Tags (Singular Tag)
Paired Tags - Opening and Closing Tags
Paired tags are a set of two tags with the same name. In each Paired tag set, one is an opening
tag, and the other one is the closing tag. The closing tag has a / slash, it means that the tag is
closed now.
It is necessary to close a paired tag; otherwise, it can result in the malfunctioning of the
website. When the content is written within paired tags, then it ensures that the effect of those
tags would be limited to only the content between them.
Look at the list of some paired tags in HTML below. Notice that each tag has a closing tag
with a slash(/) before the name of the tag.
Syntax: <tag> Content </tag>

Example: HTML Code TagTry this code »

<code> text... </code>

List of some paired tags in HTML:

Open Tag Close Tag

<html> </html>

<table> </table>

<form> </form>

<span> </span>

<ul> </ul>

<p> </p>

<head> </head>
 Open Tag Close Tag

<div> </div>

Unpaired Tags - Singular Tags

Unpaired tags are single tags with no closing tag. These tags are also called Singular Tags.
These are also called non-container tags because they do not contain any content.
It is recommended to close the unpaired/singular tags also. But unfortunately, we do not have
the closing tag for those. So, an unpaired tag is closed after adding a slash(/) just before the
greater than > sign. For example: <br />.
Look below the list of some Unpaired Tags in HTML. Notice the use of slash(/) in the tags, to
close them.
Some Unpaired Tags are:
Open Tag

<br>

<hr>

<meta>

<input>

HTML Heading Tags - H1 tag to H6 tag

Heading tag is used to give headings of different sizes in a document. There are six different
HTML heading tags, which gives different heading sizes and are defined by <h1> to <h6>
tags. <h1> gives the largest heading and <h6> gives the smallest one. So <h1> can be used for
most important headings and <h6> can be used for a least important one.
ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Heading Tag </title>
</head>
<body>
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
</body>
</html>

Output
This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6

HTML p tag - Paragraph tag

The <p> tag is used to define a paragraph in a document. HTML paragraph or HTML <p> tag
gives the text inside it, a paragraph like finishing. It is a notable point that a browser itself add
a line break before and after a paragraph.
Let's take a simple example to see how it works.
ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>

Output
This is First Paragraph
This is Second Paragraph
This is Third Paragraph

HTML a tag - Anchor Tag

HTML Hyperlink is defined with the <a> tag (Anchor tag). It is used to give a link to any file,
webpage, image etc.
This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag
becomes part of the link, and a user can click that part to reach to the linked document.
Following is the simple syntax to use <a> tag.
ExampleTry this code »

<!DOCTYPE html>
<HTML lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag </title>
</head>
<body>
<a target="_blank" href="https://www.coderepublics.com"> This is a link </a>
</body>
</html>

Output
This is a link

Note : Use 'target = _blank' as an attribute in <a> tag to open the link in a new tab.

HTML img tag - Image Tag

The Image Tag is used to add Images in HTML documents. The HTML img tag is used to add
image in a document. The 'src' attribute is used to give source(address) of the image. The
height and width of the image can be controlled by the attributes
- height="px" and width="px".
The alt attribute is used as an alternative in a case if the image is not shown. Anything
written as a value of this attribute will be displayed. It will give information about the image.
ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
</body>
</html>

Output

Tag name Description

<!-- --> Apply comment in an HTML document.

<!DOCTYPE> Specify the HTML version

A
<a> Creates hyperlink.

<abbr> It defines abbreviation.

<acronym> It defines acronym for a word. (Not supported in HTML5)

<address> It is used to define author's contact information.

<applet> It embeds Java applet. (Not supported in HTML5)

<area> It defines the area of an image map.

<article> It specifies an article space in the website.

<aside> It defines aside content from main content.

<audio> It adds audio content in HTML document.

B
<b> It makes text bold.

<base> It defines a base URL for all relative URL within the document.

<blockquote> It defines the content taken from another source.

<body> It defines the body section of an HTML document.

<br> It creates a single line break.

<button> It creates a clickable button.

C
<canvas> It creates a graphics space.

<caption> It defines a caption for table.

<cite> It defines the title of the book, website, etc.

<code> It displays programming code within an HTML document.

<col> It defines column within a table.

D
<datalist> It defines a predefined list for input option.

<dd> It is used to provide definition/description of a term in description list.

<del> It defines a deleted text.

<details> It defines additional details.

<dialog> It defines a dialog box.

<div> It defines a division within HTML document.

 <dl> It defines a description list.

E
<em> It emphasizes text content.

<embed> It embeds external files and media in the website.

F
<fieldset> It groups related elements/labels within a web form.

<figcaption> It adds a caption for <figure> element.

<figure> It defined self-contained content.

<footer> It defines footer of a webpage.

<form> It defines a form.

H
<h1> to <h6> It defines headings' sizes from level 1 to 6.

<head> It defines the head section of an HTML document.

<header> It specifies header section of a webpage.

<hr> It applies thematic break between elements.

<html> It is the root element of HTML document.

Hope this tutorial will help you to understand the fundamentals of HTML tags. There is one
more concept of elements vs Tags in HTML. To learn more about HTML Element vs HTML
tags we suggest you to go WikiPedia page.

HTML Attributes
HTML attribute defines the characterstics of any HTML element. These attributes provide
additional information to the browser about the element like, its size, color, behaviour, etc.

Some important points regarding HTML

Attributes:
 Attributes provide additional information about an element.
  Attributes are always specified in the start tag.
 Attributes usually come in name/value pairs like: name="value".
 Ex.- 'src' in <img> tag OR 'href' in <a> tag,etc..

HTML Lang Attribute

The 'lang' attribute is declared in the opening <HTML> tag. It gives information to the browser
about the main language used in the html document. Although it is not necessary to use but
using it is a good practice.

You can check all the values of lang attribute for different languages from here.
ExampleTry this code »

<!DOCTYPE html>
<HTML lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Lang Attribute </title>
</head>
<body>
<p> This page is using English Language. </p>
</body>
</html>

Output
This page is using English Language.

HTML Title Attribute

The Title attribute is used to specify a tooltip. That tooltip could be some important piece of
information in text form. It is often displayed when cursor comes over the element or while
the element is loading.

Adding tooltips using Title attribute, is a smart way to give brief explanations about some
element on the webpage. Look at the example below, to see how you can use it with
any HTML tag.

ExampleTry this code »

<!DOCTYPE html>
<HTML lang="en">
<head>
<meta charset="UTF-8">
<title> The Title Attribute </title>
</head>
<body>
<h3 title= "Hello HTML"> The Example of Title Attribute </h3>
</body>
</html>

Output
WHO was founded in 1948.

CodeRepublics.com

HTML Src Attribute

The src or (source) attribute is used with <img> tag. This attribute allows us to provide the
path for the image to be included on the webpage. it is also used
with <audio> tag, <video> tag, <embed> tag, etc. to add the source path of the file to be
included.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

HTML alt Attribute

The alt attribute specifies an alternative text for an image. If somehow the browser is not
able to display an image, then the alternate text will be displayed, which will give the
information about the image. Also, value of alt attribute can be read by screen readers,
which helps visually impaired person to "hear" information about the image.

If a browser cannot find an image, it will display the value of the alt attribute :

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

Output

HTML style Attribute

The style attribute is used to specify the inline style of an element, i.e., it defines the CSS
styling of element like color, font, size, shadow etc.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Inline Styles </title>
</head>
<body>
<h4 style="color:green"> This is Green Color </h4>
<h4 style="color:blue"> This is Blue Color </h4>
</body>
</html>
Output
This is Green Color
This is Blue Color

HTML Formatting Tags

HTML Formatting Tags are used to change appearance of text for better look and feel than
the default text. The formatting tags can make text bold, italic, underlined, etc.

All the formatting tags are paired tags. Anything written between any formatting tag will be
displayed according to the tag in the browser. For example, anything written
between <i> and </i> will display as italic text in the browser.

There are different tags for various formatting tags. Each Tag has its own type of formatting
associated with it.

Some HTML Formatting tags are:

o Bold Tag <b>
o Italic Tag <i>
o Underline Tag <u>
o Strong Tag <strong>
o Small Tag <small>
o Big Tag <big>
o Mark Tag <mark>
o Emphasized Tag <em>
o Deleted Tag <del>
o Inserted Tag <ins>
o Subscripted Tag <sub>
o Superscripted Tag <sup>

HTML Bold Tag

The HTML <b> Tag defines bold text. Bold text is wider and darker text than the default text,
without any extra importance to the browser. Look at the example below.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Bold Text </title>
</head>
<body>
<p> This is Normal text. </p>
<b> This is Bold Text. </b>
</body>
</html>

Output
This is normal text.

This is Bold Text.

HTML Strong Text

The HTML <strong> Tag displays same formatting like a <b> tag. But the Strong text has
some importance to the browser and search engines. It is always recommended to write
keywords within <strong> Tag to give them extra importance.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Strong Text </title>
</head>
<body>
<p> This is Normal text </p>
<strong> This Text is Strong </strong>
</body>
</html>

Output
This is Normal text

This Text is Strong

HTML Italic Text

The HTML <i> Tag defines italic text. This type of formatting displays cursive font based
text that slant slightly to the right.
ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Italic Text </title>
</head>
<body>
<p> This is normal text </p>
<i> This is italic Text </i>
</body>
</html>

Output
This is normal text

This is italic Text

HTML Underlined Text

The HTML <u> Tag defines Underlined text. All the text within the <u> and </u> tags will
have an underline throughout.

Underlined Text is used to draw attention of the user and is a default formatting for a
hyperlinked text.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Underlined Text </title>
</head>
<body>
<p> This is Normal text </p>
<u> This is Underlined Text </u>
</body>
</html>

Output
This is Normal text

This is Underlined Text

HTML Small Text
The HTML <small> Tag defines small text. This text is used for some side commenting or to
write some copyright information.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Small Text </title>
</head>
<body>
This text is <small> small </small>.
</body>
</html>

Output
This text is small .

HTML Big Text

The HTML <big> element defines BIG text.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Big Tag </title>
</head>
<body>
This text is <big> BIG </big>
</body>
</html>

Output
This text is BIG
HTML Marked Text
The HTML <mark> Tag defines Highlighted text. The text will have a background color and
represent relevancy in an HTML document.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Mark Tag </title>
</head>
<body>
This text is <mark> Marked. </mark>
</body>
</html>

Output
This text is Marked.

HTML Emphasized Text

The HTML <em> element defines Emphasized text. It will give the text the same Italic
formatting. This tag is important for screen readers. The screen readers give extra emphasize
on this type of text and read it with verbal stress.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Emphasize Text </title>
</head>
<body>
This text is Normal.
This text is <em> Emphasized. </em>
</body>
</html>

Output
This text is Normal.
This text is Emphasized.
HTML Deleted Text
The HTML <del> element defines Deleted text. This displays Text with a line strike.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Delete Text </title>
</head>
<body>
<p> This text is Normal. </p>
This text is <del> Deleted. </del>
</body>
</html>

Output
This text is Normal.

This text is Deleted.

HTML Inserted Text

The HTML <ins> element defines inserted (added) text. It gives the underlined formatting to
the text. It is used in combination with deleted text.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Insert Text </title>
</head>
<body>
This text is <ins> inserted. </ins>
</body>
</html>

Output
This text is inserted.
HTML Subscripted Text
The HTML <sub> element defines subscripted text. This type of text is small in size and is placed
slightly below the normal line of text.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Subscript Text </title>
</head>
<body>
This text is <b> bold. </b>
This text is <i> italic. </i>
This text is ^Subscripted.
</body>
</html>

Output
This text is bold.
This text is italic.
This text is Subscripted.

HTML Superscripted Text

The HTML <sup> element defines superscripted text. It also dispalys very small text like subscript,
but here, the text is placed slightly above the normal line of text.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Superscript Tag </title>
</head>
<body>
This text is <b> bold. </b>
This text is <i> italic. </i>
This text is <sup> Superscripted.
</body>
</html>
Output
This text is bold.
This text is italic.
This text is Superscripted.

HTML Heading Tag

Heading tag is used to give headings of particular sizes in a document. There are six
different HTML heading tags, which gives different heading sizes and are defined by <h1> to
<h6> tags.

<h1> gives the largest heading and <h6> gives the smallest one. So <h1> can be used for most
important headings and <h6> can be used for least important one.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Heading Tag </title>
</head>
<body>
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
</body>
</html>

Output

This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6

Heading Size
You can change the size of Heading by using font-size property.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Heading Tag </title>
</head>
<body>
<h1 style="font-size:50px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size
property.</p>
</body>
</html>

Output

Heading 1
You can change the size of a heading with the style attribute, using the font-size property.

HTML Head Element

The HTML Head used to contain metadata. HTML metadata is all about html document and
this data is not displayed anymore. The <Head> element placed between the <HTML> tag
nad <body> Tag.

You can add Style or JavaScript between head tags and make you web page more
interactive.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML HEAD </title>
<meta charset="UTF-8">
</head>
<body>
.....
.....
</body>
</html>

HTML P Tag - Paragraph element

HTML p tag defines a paragraph in a webpage. It is a Paired Tag, i.e., it comes with an
opening <p> and a closing </p> tag.

A <p> tag is very important, as all the content written on a website needs to get formatted in
the form of paragraphs. Browsers automatically add blank lines above and below a
paragraph. It separates a paragaph from other content or other paragraphs on the page.

HTML Paragraphs are block level elements, i.e., a new paragraph will always start from a
new line. Also, p tags gets automatically closed if another block-element gets inserted before
the </p> tag.

Look at the example below, to know how to use <p> tag.

Example of HTML p tagTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>

Output
This is First Paragraph
This is Second Paragraph

This is Third Paragraph

How html treats whitespace in a paragraph

If you put a lot of spaces inside the HTML p tag, browser removes those unnecessary spaces
while displaying the page. The browser counts multiple consecutive spaces and lines as a
single one.

You can add spaces and new lines on a paragraph by using <pre> tag but don't practice it
immaturely. The spaces will look poor on the website. In the example below, as you can see
in the results, all the space is ignored by the browser.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph. </p>
<p> This is Second Paragraph. </p>
<p> This is Third Paragraph.</p>
</body>
</html>

Output
This is First Paragraph.

This is Second Paragraph.

This is Third Paragraph.

HTML pre tag

HTML pre tag defines preformatted text. The text inside a <pre> tag is displayed in a fixed-
width font, and it preserves both spaces and line breaks.

The pre tag is a paired tag; it displays text as it was written within the tag. Browser won't
omit consecutive spaces or line breaks. It is used to display a block of code of a programming
language or to display a poem with proper line breaks.

In the example below, you can see that the text is displayed as it is, in the browser, as it was
written inside the pre tag.

Example of pre tagTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Pre Tag </title>
</head>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
</pre>
</body>
</html>

Output
This is a Paragraph Tag.

This is a Paragraph Tag.

This is a Paragraph Tag.

This is a Paragraph Tag.

Note: If you want to add some extra space outside the paragraph, then don't use <br> tag.
Instead, use CSS Margins to change the space above/below the paragraph.

HTML a tag - What is href in HTML

HTML a tag is also known as anchor tag. It defines a hyperlink that links one page to
another. The href HTML attribute is used to give the reference(Path) of the page or
document to be linked.

The <a> tag is a paired tag with </a> tag as a closing tag. Whatever is written between these
two tags will feature as a hyperlink on the webpage.

The href attribute in HTML is used in a tag to give the reference(location URL) of other
webpage. The full form of href is Hypertext REFerence. In simple words you just have to
paste the url of the webpage in href, that you want to link.

Syntax of using href HTML

<a href="url">link text</a>

Example: <a href="https://www.coderepublics.com">Visit our Website CodeRepublics</a>

In the example below, the text "Visit our HTML tutorial" will work as a hyperlink and will
take the user to our html tutorial page. We have given the address(Path) of that page as a
reference in thehref attribute.

Example of a tagTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag </title>
</head>
<body>
<a href="https://www.coderepublics.com"> Welcome to CodeRepublics </a>
</body>
</html>

Output
Visit our HTML tutorial

HTML Target Attribute

HTML target attribute is used to specify the place in the browser where the linked document
should be opened. For example, whether the user wants to open the link in a new tab, new
window, or in the same tag. The target attribute has different values for all these different
locations.
The target attribute can have one of the following values:

Value Description

target="_blank" Opens the linked document in a new window or tab.

target="_self" Opens the linked document in the same window/tab. This is the default value

target="_parent" Opens the linked document in the parent frame.

target="_top" Opens the linked document in the full body of the window.

target="_framename" Opens the linked document in a named frame.

Note: HTML Frames are deprecated in HTML 5 and it is recommended not to use them.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag Example </title>
</head>
<body>
<p><a href="https://www.coderepublics.com" target="_blank">Welcome to
CodeRepublics</a></p>
<p><a href="https://www.coderepublics.com" target="_top">Welcome to
CodeRepublics</a></p>
<p><a href="https://www.coderepublics.com" target="_parent">Welcome to
CodeRepublics</a></p>
<p><a href="https://www.coderepublics.com" target="_top">Welcome to
CodeRepublics</a></p>
</body>
</html>

Output
Welcome to CodeRepublics

Welcome to CodeRepublics
Welcome to CodeRepublics

Welcome to CodeRepublics

HTML Image Link - use HTML href with img tag

Images can also work as a Hyperlink. It means you can add an image with a link attached to
it. It is done by adding img tag within a tag. The href attribute will have the location of the
linked webpage. When the user clicks on the image, he gets redirected to the attached link. It
is different from the conventional linking of text with a url.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Link </title>
</head>
<body>
<p>The image is a link. You can click on it.</p>
<a href="https://www.coderepublics.com">
<img src="PUBG.png" alt="HTML Image" style="width:300px;height:200px;">
</a>
</body>
</html>

Output
As you can see, in the example above, The <img> tag is used within the <a> tag. This nested
structure created the whole image as a hyperlink.

HTML Base Path - add with href

When you link HTML documents related to the same website, it is not required to give a
complete URL in href for every link, if you use Base Path link. This Base path is defined
within <base> tag in your HTML document header.

You can create a base path of your Base Domain. Whenever you give reference to any link,
you can skip the base domain and can directly write latter part. Browser will automatically
concatenate the link with the base path you have given and will make a complete URL.

Look at the example below to understand it completely.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Base Path Link Example</title>
<base href="https://www.Coderepublics.com" target="_blank">
</head>
<body>
<p> Click following link </p>
<a href="https://www.coderepublics.com/HTML/html-tutorial.php"> Learn HTML </a>
</body>

Output
Welcome to GeekRepublics

HTML Link Color

You can set colors of your links, active links and visited links using link, alink and
vlink attributes of <body> tag. However, these colors can also be given by the help of CSS
classes. We will learn about it later in CSS Tutorial.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Change Link Color </title>
</head>
<body alink="green" vlink="red">
<p> Click following link </p>
<a href="https://geekrepublics.com/"> Welcome to GeekRepublics </a>
</body>

Output
Welcome to GeekRepublics
Note : The alink attribute is not supported in HTML5. Use CSS instead.

Image tag in HTML

The <img> tag is the image tag in HTML. It inserts images in web pages. It is a single tag, i.e.,
it has no closing tag.

Images are a necessary part of writing rich content on the internet. They help in easy reading.
They are the face of content on internet, especially on social media.
You can add thumbnail images for social media using meta tags, which we will discuss in
meta tag tutorial. Today we will discuss about inserting images within the body of a web
page.

The <img> tag has a specified syntax with different attributes to control image behaviour.
Look at the syntax below:

Syntax

<img src="location of image" alt="info. about image" height="px" width="px">

Example:

<img src="images/flower.jpg" alt="Image of marigold" height="50px" width="60px">

Example of img tagTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
</body>
</html>

Output
The img src attribute
The src attribute in img tag specify the location of the image. You have to provide a complete
path of the image to insert it into the web page.

If your image and your web page are in the same folder, then you can insert it using only its
name with extension, like, src="flower.jpg".

Example of img src attributeTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

The img alt Attribute

In "alt" attribute of <img> tag, you will give brief information about the image. The info can
be about the content present in the image.

The information written in alt attribute is useful for search engines. It helps them to
understand the content present in the image. So, images can rank in google image search and
drive traffic.

alt attribute
is also helpful for screen readers. When they encounter an image within
webpage they describe the image through text written in alt attribute.

One more important feature is that if the image fails to load, then the browser displays alt text
in place of it.

Example of img alt attributeTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

Output

Image width and height attributes

The width and height attributes controls the dimensions of image in the web page. It will not
change the actual size of the image but only the displayed size.

It is advised to alter the actual image size according to website requirements. If you resize an
image using width and height attributes, then it can stretch the image, which will look
unpleasant.

Example of width and height attributesTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Size Attribute </title>
<body>
<img src="HTML5-Image.png" alt="HTML5 Image" width=600px height=250px>
</body>
</html>
Output

HTML Table Tag

We all are familiar with the concept of tables with rows and columns. But how would you
create a table in a website? HTML table tag family displays a table in a webpage. It’s similar
like the structure of a matrix with proper rows and columns. This type of structure with rows
and columns is very helpful in representing data in an organized manner. The tabular form of
data creates a good impression on user.

Today we will learn about all HTML table tags that will help you to create a table for your
data.

Example of HTML table tag:

Lets see the first example of how to use HTML table tags. Just observe the example for now;
we have explained each tag one by one after the example.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr> <td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table> </body>
</html>

Output
Name Salary   Age
  Rs.
Anshuman   25
2,00,000
  Rs.
Kuldeep   22
5,00,000

HTML Table Row tag <tr>

HTML table row is defined by <tr> tag. It is a paired tag with </tr> as a closing tag.
Whatever written between these tags will be displayed in a single row of the table.

To create a new row, add another <tr> tag after closing the previous one.

HTML Table header tag <th>

HTML table header is a special case of a table row. It starts with <th> tag and ends
with </th> tag. The difference between a row and a heading is that text written
inside <th> tags is displayed in bold font, and centered aligned by the browser. Because of its
properties this tag is used only for writing headings in the table.

HTML Table cell tag <td>

HTML table cell is defined by <td> tag. It is a paired tag with </td> as a closing tag. Each
pair of these tags represents a cell in a row.

It can only be used inside &glt;tr> or <td> tags. After declaring rows, the <td> tags are used
to enter data in the table. Whatever is written inside the <td> and </td> tags will be displayed
by the browser in the tables as it is.
HTML Table Attributes
The <table> Tag in HTML has many attributes that define the structure of the table. These
attributes can make a table look a bit more attractive. Let’s see one by one the different
attributes of the table tag and then we will use them in an example and will see the changes in
the table.

HTML table border Attribute

HTML table border attribute is used to specify borders in a table. It means that, by default the
borders in the table are hidden and if you don’t specify borders then your table will only
display data but there would be no border.

The table border attribute has two values 0 and 1. 0 means no border and 1 means visible
borders. You can also increase the values to 2, 3, 4, etc. it will increase the width of the
border.

There are two ways to specify border for HTML tables:

 By border attribute of table in HTML.

 By CSS borders property.

Look at the example below to define an HTML border with border attribute:

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Attribute </title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>

Output
Name Salary Age
Anshuman Rs. 2,00,000 25
Kuldeep Rs. 5,00,000 22

Note: The width and height attributes are used to resize the table.

HTMl Table border using CSS

You can use CSS stylesheet to make table borders more attractive. Try changing border
colors in the try-it editor.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>

Output
Name Salary Age
Anshuman Rs. 2,00,000 25
Kuldeep Rs. 5,00,000 22

HTML Table Cellpadding and Cellspacing

attributes
HTML table "cellpadding" and "Cellspacing" attributes are used to adjust the padding and
margins in within table cells.

HTML Table Cellpadding attribute

The Cellpadding attribute is used to specify the space between the content of the cell and its
borders. It provides padding to the content in the cell.

As you increase the value, the space between the cell’s content and its border also increases.
The default value of cellpadding is taken in pixels by browsers. The cellpadding is applied to
all the four sides of the content. The value can also be defined in percentages.

Cellspacing attribute
The Cellspacing attribute is used to specify the space between the cells of the table. Its value
can be in pixels or in percentages. It is applied to all the sides of the cells.

Note: These two attributes are no longer a part of HTML 5. So, it is better to use CSS to
color the tables.

Example of cellspacing and cellpaddingTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5" style="width:100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Output
Name Salary
Peter 5000
John 7000

HTML Table Colspan and Rowspan Attribute

HTML table colspan and rowspan attributes are used with the <td> tag. As the name suggests
‘colspan’ is related to columns and ‘rowspan’ is related to rows.

These two attributes are used to merge two or more columns or rows. Table colspan
attribute’s value suggest the amount of column space it will occupy. For example ‘<td
colspan= 2>’ will create a cell taking space of two cells horizontally i.e. it will occupy the
space of a cell of the next column.

Similarly, Table rowspan will create a cell which will occupy the space of two or more (as
specified) cells vertically, i.e. cells of the next rows. Look at the example below to
understand the concept clearly.

Example of HTML table rowspan

HTML table rowspan attribute is used to merge two or more rows together to form a single
row. A single row occupies space of the number of merged rows. Look at the example:

ExampleTry this code »

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9998887776</td>
</tr>
<tr>
<td>9998887776</td>
</tr>
</table>
</body>
</html>

Output
Name: Bill Gates
9998887776
Telephone:
9998887776

Example of HTML table colspan

HTML table colspan attribute is used to merge two or more columns into a single column.
Single column occupies space of the number of merged columns. Look at the example:

ExampleTry this code »

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Colspan Attribute </title>
</head>
<body>
<table border="1" width="80%">
<tr>
<th> Person_Name </th>
<th colspan="2"> Mobile </th>
</tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>

Output
Person_Name Mobile
Bill Gates 9998887776 9998887775

HTML table Caption attribute

HTML table caption attribute defines a caption to the table. It gets displayed with table as its
name. To add a caption to a table, use the <caption> tag.

 A caption can be aligned around the table by using align attribute with values -

left/right/top/bottom.
 The default alignment is top.

Example of HTMl table caption attributeTry this code »

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Caption Attribute </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>

Output
Monthly savings
Month Savings
January $100
February $50

HTML table bgcolor attribute

HTML table bgcolor attribute is used to provide a background color to the table. You can
easily write any color name directly or you can also set a color by providing HEX code. This
attribute can also be used with <td> tag to define the color of that particular cell in the table.

HTML table background attribute

HTML table background attribute is used to add a background image in the table. The image
in the table will work as a background behind the data in the table. It can be used with <td>
tag.

HTML Font Tag

HTML Font Tag plays a significant role in developing more user-friendly websites and
increasing content readability. Font face and color depend entirely on the computer and the
browser used to view the page, but we can use the HTML <font> tag to add style, size, and
color to the text on your website. Let's start with html tags and different attributes like html
font size, color.
HTML Font Tag Attributes
HTML Font Tag has three attributes called size, color, and face to customize the Font. To
change any of the font attributes at any time within your webpage, use the <font> tag. The
text that follows will remain switched until you close with the </font> tag.

How to change the html font size?

 We can set html font size using size attribute.
 The range of accepted values is from 1 to 7.
 The default font size of a font is 3.

HTML Font Size Example:Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Font Size </title>
</head>
<body>
<font size="1">Hello HTML 5!</font>
<font size="2">Hello HTML 5!</font>
<font size="3">Hello HTML 5!</font>
<font size="4">Hello HTML 5!</font>
<font size="5">Hello HTML 5!</font>
<font size="6">Hello HTML 5!</font>
<font size="7">Hello HTML 5!</font>
</body>
</html>

Output
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Explain: As you can see that, as the number increase the html font size will also increase.
The Font Face
You can set font face using 'face' attribute but be aware that if the user viewing the page
doesn't have the Font installed, they will not see it. Instead, the user will see the default font
style.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Font Face Attribute </title>
</head>
<body>
<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>
</body>
</html>

Output
Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

Alternative Font Face

It is possible to specify two or more font face alternatives by listing the font face names,
separated by a comma. If the user doesn't have one Font installed in his system, the other can
display the content.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Font Face Alternative Attribute </title>
</head>
<body>
<font face="Times New Roman,Verdana,Comic sans MS,WildWest" size="5">Times New
Roman</font><br />
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console" size="5">Bedrock</font>
</body>
</html>

Output
Times New Roman
Bedrock

HTML Font Color Tag

HTML html font color tag can be set using the color attribute. You can specify the color you
want by either the color name or by hexadecimal code for that color. The text color makes the
website a more attractive look.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Font Color</title>
</head>
<body>
<font color="#69C">This text is in Blue</font><br />
<font color="green">This text is Green</font>
</body>
</html>

Output
This text is in Blue
This text is Green

Well, as I said before, that html color is no longer used in HTML 5, so if you are working on
an older version of HTML, then you can use the HTML font color tag as needed. Also, you
can choose and add color code from the color picker tool.
rdered List in HTML
This list is created by using <ol> tag. Any series can be used to order the elements, like series
of digits, alphabets, roman numerals, etc. All these series gets increased by one with every
new element entered in the list.

Ex.-For a numbered order list, the numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>. Have a look at the example below to
understand the concept properly.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output
1. Audi
2. Mercedes
3. Lamborghini

Ordered list Type Attribute

The type attribute is used to change the series type.

Value Description

type="1" The list items will be numbered with numbers (default).

type="A" The list items will be numbered with uppercase letters.

 Value Description

type="a" The list items will be numbered with lowercase letters.

type="I" The list items will be numbered with uppercase roman numbers.

type="i" The list items will be numbered with lowercase roman numbers.

List of Numbers
Numbers as type - <ol type="1">. Here the numbers will be used to order the elements. Each
new element will get incremented value from the previous one in the list.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output
1. Audi
2. Mercedes
3. Lamborghini
Uppercase
Uppercase alphabets as type - <ol type="A">. Here, Uppercase alphabets will be used to
order the elements.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase </title>
</head>
<body>
<ol type="A">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output
A. Audi
B. Mercedes
C. Lamborghini

Lowercase
Lowercase alphabets as type - <ol type="a">. Same as above, but the alphabets will be
lowercased.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase </title>
</head>
<body>
<ol type="a">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output
a. Audi
b. Mercedes
c. Lamborghini

Uppercase Roman Numbers

Uppercase roman numbers as type <ol type="I">.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase Roman </title>
</head>
<body>
<ol type="I">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output
I. Audi
II. Mercedes
III. Lamborghini

Lowercase Roman Numbers

Lowercase roman numbers as type <ol type="i">

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase Roman </title>
</head>
<body>
<ol type="i">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output
i. Audi
ii. Mercedes
iii. Lamborghini

The "Start" Attribute

The start attribute is used to control the counting in the list. By default, the counting starts
from '1' or from 'a', but we can change counting to start from a specified number or alphabet.
Look at the example below to see the syntax of using this attribute.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Ordered List Start Attribute </title>
</head>
<body>
<ol start="50">
<li>Samsung</li>
<li>OnePlus</li>
<li>Nokia</li>
</ol>
<ol type="I" start="50">
<li>Oppo</li>
<li>Vivo</li>
<li>Xiaomi</li>
</ol>
</body>
</html>
Output
1. Samsung
2. OnePlus
3. Nokia

I. Oppo
II. Vivo
III. Xiaomi

HTML Unordered List

HTML unordered list is a collection of related items that are listed with no special order or
sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a
bullet. Each item starts with <li> tag.

Look at the example below to understand how to use HTML Unordered List:

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List </title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Output
 Harley-Davidson
 Ducati
 BMW
Unorder List Type Attribute
The type attribute is used to change the series type.

Value Description

type="disc" Sets the list item marker to a bullet (default).

type="circle" Sets the list item marker to a circle.

type="square" Sets the list item marker to a square.

type="none" The list items will not be marked.

The Disc Attribute

The 'Disc' as type - <ul type="disc">. These list items will be marked with small black
circles like bullets. This is the default type in unorder lists.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Disc Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="disc">
<li> Harley-Davidson </li>
<li> Ducati</li >
<li> BMW </li>
</ul>
</body>
</html>

Output
 Harley-Davidson
 Ducati
  BMW

The Circle Attribute

The 'Circle' as type - <ul type="circle">. It will display round hollow circles like bullets
before list items.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Circle Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="circle">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Output
o Harley-Davidson
o Ducati
o BMW

The Square Attribute

The 'square' as type - <ul type="square">. It will display filled squares before the list
items.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Square Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="square">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Output
 Harley-Davidson
 Ducati
 BMW

The none Attribute

The 'none' as type - <ul type="none">. This attribute will list the list items but will not put
any bullets before them.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List None Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="none">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Output
 Harley-Davidson
 Ducati
 BMW
Description List
The HTML and XHTML support another list style which is called definition lists where
entries are listed like in a dictionary. The definition list is the ideal way to present a list of
terms, or other name/value list.

The definition list created using <dl> tag. The Description <dt> — defines the item in the list,
and <dd> describes the items in the list.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Definition List</title>
</head>
<body>
<h1>HTML Definition List</h1>
<dl>
<dt>PUBG</dt>
<dd>PlayerUnknown's Battlegrounds (PUBG) developed by PUBG Corporation.</dd>
<dt>God Of War</dt>
<dd>God of War developed by Santa Monica Studio.</dd>
</dl>
</body>
</html>

Output
PUBG
PlayerUnknown's Battlegrounds (PUBG) developed by PUBG Corporation.

God Of War
God of War developed by Santa Monica Studio.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Definition List </title>
</head>
<body>
<dl>
<dt><b>PUBG</b></dt>
<dd>PlayerUnknown's Battlegrounds (PUBG) developed by PUBG Corporation.</dd>
<dt><b>God Of War</b></dt>
<dd>God of War developed by Santa Monica Studio.</dd>
</dl>
</body>
</html>

Output
PUBG
PlayerUnknown's Battlegrounds (PUBG) developed by PUBG Corporation.

God Of War
God of War developed by Santa Monica Studio.

HTML Forms
An HTML form is a section of a document which contains different fields like
text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

HTML Forms can be used where we want to collect some data from the site visitor. For
example, in case of user registration you would like to collect information such as name,
email address, Phone number, etc.

A form will take input and then store it to a back-end application such as CGI, ASP Script or
PHP script etc. The back-end application will perform required processing on the passed data
like storing it in database.

There are various form elements available like text fields, textarea fields, drop-down

menus, radio buttons, checkboxes, etc.

HTML Form Structure

The HTML <form> tag defines a form that is used to collect user input. All the form elements
should be written inside <form> and </form> tags.

Syntax:
<form>
....
Form Elements..
....
</form>

HTML Forms Elements

Attributes Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<select> It defines a multi-line input control.

<option> It defines an option in a drop-down list.

<textarea> It defines a drop-down list.

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

<optgroup> It defines a group of related options in a drop-down list.

<label> It defines a label for a field.

HTML Forms Element

The 'Input' Element
The most important form element is the <input> element. The <input> element can be
displayed in several ways, depending on the type attribute.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Attribute </title>
</head>
<body>
<h2>Text Input</h2>
<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output
First name:   Last name: 

Note : The default width of a text input field is 20 characters.

The 'Select' Element

The <select> element defines a drop-down list. It mostly used when you have to show
numbers of items.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Select Attribute </title>
</head>
<body>
<form action="action-page.php">
<select name="Cars">
<option value="Audi"> Audi </option>
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
</select>
<input type="submit">
</form>
</body>
</html>

Output
Submit
             

Note : The action attribute defines the action to be performed when the form is submitted.
You should add the destination where the form is submitted.

 The <option> element defines different options that can be selected.

 By default, the first item in the drop-down list is selected.
 To define a pre-selected option, add the selected attribute to the option:<option
value="abc" selected>.

The 'Textarea' Element

The <textarea> element defines a multi-line input field.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Textarea Attribute </title>
</head>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="action-page.php">
<textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea.
</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Output
 Submit

The 'Button' Element

The <button> element defines a clickable button.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Button Attribute </title>
</head>
<body>
<button type="button" onclick="alert('Hello World..!')">Click Me!</button>
</body>
</html>

Output
Click Me!

The 'Method' Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the form data. The GET is the default method when you submitting your form data.

Syntax
<form action="action-page.php" method="get">
<form action="action-page.php" method="post">

Difference between GET and POST

 Points GET METHOD POST METHOD

Data Pass Limited amount of data can be sent Large amount of data can be sent
because data is sent in header. because data is sent in body.

Security Get request is not secured because Post request is secured because data
data is data sent is part of the URL, is not exposed in URL bar and
and this data saved in browser parameters are not stored in browser
history and server logs in plaintext. history or in web server logs.

Bookmarked Request can be bookmarked and Request can not be bookmarked and
cached. cached.

Usability GET method should not be suitable POST is good for when you are
when you are sending sensitive data sending sensitive data because your
like user id or Passwords. data are sended in encrypted form.

Data Length Data length restricted, usually to No restrictions on the amount of

2048 characters. data that can be sent.

Hacked Easier to hack. More difficult to hack.

The 'Name' Attribute

The name attribute specifies the name of <input> element. It is a good practice to use this
attribute, and also good for SEO purpose.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Name Attribute </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>

Output
John Snow Submit
First name:   Last name:   

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form and the <legend> element
defines a caption for the <fieldset> element.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>

Output
John Snow Submit
Personal information:First name:   Last name:   

HTML Input Types

The HTML input types element is used to create interactive controls for web-based forms to
accept data from the user. Data can be entered by the user in various forms, like in alphabets,
in digits or a combination of both like an email. These different kind of HTML input type
elements in HTML defines the type of data a user would enter in the input field. It makes
easier for the browser to understand what data is valid to be entered in a particular field and
what is not.

The different types of HTML input type are specified by its ‘type’ attribute, each input type
has a different ‘type’ attribute value associated with it. Let’s see the common values of ‘type’
attribute:

HTML Input Type

Here is a list of some common HTML Form input types.

Type Description

text It defines a one-line text input field.

password Defines a one-line password input field.

submit It specifies a submit button to submit the form to server.

reset The reset button reset all values in the form.

radio A Radio button allows select one option.

checkbox Checkboxes allow selecting multiple options form.

button Defines a clickable button, which can perform a task on an event.

file It defines to select the file from device storage.

image It Defines a graphical submit button.

HTML Input Type Text

The <input type="text"> defines a single line text input field. By default a field text can
take 20 Characters.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Text </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>

Output
Submit
First name:   Last name:   

HTML Input Type Password

The <input type="password"> defines a password field. It will show bullets in place of actual
characters during input.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Password </title>
</head>
<body>
<form action="#">
User name:
<input type="text" name="userid">
User password:
<input type="password" name="psw">
</form>
</body>
</html>
Output
User name:   User password: 

HTML Input Type Submit

The <input type="submit"> defines a Submit button that submit form data to a form-
handler. The form-handler is a type of server page with a script for processing form input
data and It is specified in the form's action attribute

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Submit </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>

Output
John Snow Submit
First name:   Last name:   

HTML Input Type Reset

The <input type="reset"> defines a Reset button.
If you want to change the input values then click the "Reset" button, the form data will be
reset to the default values.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Reset </title>
</head>
<body>
<form action="action-page.php">
First name:<br>
<input type="text" name="firstname" value="John">
Last name:<br>
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>

Output
John Snow Submit Reset
First name:   Last name:     

HTML Input Type Radio

The <input type="radio"> defines a Radio button. It is used where only one option out of
many has to be selected. The name attribute in all the buttons should have the same value,
then only a distinct value will get selected. The Radio buttons let a user select ONLY ONE of
a limited number of choices.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Radio Button </title>
</head>
<body>
<form action="action-page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit">
</form>
</body>
</html>
Output
 Male
 Female
 Other

Submit

HTML Input Type Checkbox

The <input type="checkbox"> defines a checkbox. It can be used to select multiple options at
a time.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Checkbox </title>
</head>
<body>
<form action="action-page.php">
<input type="checkbox" name="vehicle1" value="Bike">Samsung
<input type="checkbox" name="vehicle2" value="Car">Google Pixel>
<input type="submit">
</form>
</body>
</html>

Output
Samsung  Google Pixel

Submit

HTML Input Type Button

The <input type="button"> defines a button.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Button </title>
</head>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>

Output

HTML Input Type Number

The <input type="number"> defines a numeric input field. The number attribute set
restrictions on what numbers are accepted. You can set the min or max number.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Number </title>
</head>
<body>
<form action="action-page.php">
Quantity (between 1 and 10):
<input type="number" name="quantity" min="1" max="10">
<input type="submit">
</form>
</body>
</html>

Output
Submit
Quantity (between 1 and 10):  

HTML Form Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5).

Attribute New Description

disabled It specifies to disabled the input field.

max It specifies maximum value for an input field.

maxlength It specifies the maximum number of character for an input field.

min It specifies the minimum value for an input field.

pattern It specifies a regular expression to check the input value against.

readonly It specifies that an input field is read only that cannot be changed.

required It specifies that an input field is require.

size It specifies the width (in characters) of an input field.

step It specifies the legal number intervals for an input field.

value It specifies the default value for an input field.

HTML5 Input Types

The HTML5 introduced 13 diferent "types" attributes. Let’s see the different values of ‘type’
attribute:

Email Fields
The value "email" is used for creating an input field for email address. This HTML input
type is specifically used to validate the email address entered by the user. It uses the standard
email address format and the user violates it then it shows error. Syntax: <input
type=email>
Number Fields
The value "number" will create an input field to enter only numbers, if you enter alphabets or
symbols or anything other than numbers, it will show an error, however decimal points
numbers are allowed. Syntax:<input type=number>

Search Fields
It is used to create a search box. You can even add placeholder in the search box by using the
‘placeholder’ attribute. Syntax: <input type="search">

URL Fields
Specifically used to enter a URL. Syntax: <input type="url">

Number Fields
This HTML input type provides controls to enter numbers. It has small buttons on the right
side to increase or decrease the value of the number. In your smartphones this input type
automatically opens the numeric keyboard during entering the data. Syntax:<input
type="number">

Telephone Number Fields

It is a special HTML input type field to enter phone numbers only. Syntax:<input
type="tel">

Range Fields
It creates a slider to select a value in within a range of two values. Syntax: <input
type="range" min="0" max="10">

Date Fields
This type is used to create an input area to enter date. You can manually enter the date or can
select value from a graphical calendar. Syntax:<input type="date">

Month Fields
It only provide options of Month and year. Syntax:<input type="month">

Week Fields
Allows you to pick the week and year. Syntax:<input type="week">

Time Fields
Allows you to enter time of the day. It can be entered manually or by the help of a digital
clock format. Syntax:<input type="time">
Datetime-local Fields
Enter Date and time together in a single input field. Syntax:<input type="datetime-local">

Color Fields
If you want to enter any RGB color information on the database then use this input
type. Syntax:<input type="color">

Form Input Attribute

The HTML Form Attribute element is used to create interactive controls for web-based forms
in order to accept data from the user. This attributes can be used on the following elements
such as :

The Value Attribute

The value attribute specifies the initial value for an input field.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Value Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output
John
First name:   Last name: 

The Readonly Attribute

The readonly attribute specifies that the input field is read only that means the value of input
field cannot be changed.
ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Readonly Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value ="John" readonly>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output
John
First name:   Last name: 

The Disabled Attribute

The disabled attribute specifies that the input field is disabled. You cannot make any
modification on input field.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Disabled Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value ="John" disabled>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Output
John
First name:   Last name: 

The Size Attribute

The size attribute specifies the size for the input field in character.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Size Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value="John" size="30">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output
John
First name:   Last name: 

The maxlength Attribute

The maxlength attribute specifies the maximum length allowed for the input field.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form maxlength Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" maxlength="10">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output
First name:   Last name: 

Note : The maxlength attribute, will not accept more than the allowed number of characters in input
field.

HTML 5 Form Attributes

Here is a list of some common Attributes in HTML 5.

Attribute New Description

autocomplete It gives the autocomplete functionality to the form.

autofocus It make sure that the input field automatically get focused when the
page loads.

form It specifies one or more forms, an <input> element belongs to.

formaction It specifies the URL of a file where the form data will get transferred
and processed after submitting.

formenctype It specifies how the form data should be encoded when submitted.

formmethod It defines the HTTP method for sending form-data to the action URL.
 Attribute New Description

formnovalidate It specifies that the <input> element should not be validated.

formtarget It specifies where to display the response that is received after

submitting the form. Ex. - _blank, _self, framename, etc.

height & width It specifies the height and width of an <input> element.

list It's value gives a particular id to a <datalist> element that contains

pre-defined options for an <input> element.

min and max It specifies the minimum and maximum values for an <input>
element.

multiple It allows the user to enter more than one value in the <input>
element.

pattern It defines a regular expression for an <input> element's value.

(regexp)

placeholder It gives a hint about the value to be entered in the <input> element.

required It specifies that an input field must be filled out before submitting the
form.

step It specifies the legal number intervals for an <input> element.

HTML Title
HTML Title Tag
HTML <title> tag is required in all HTML documents and it defines the title of the page.
The title tag is also one of the ranking factor for search engines. When you write search
engine friendly titles, search engines give you better rankings in their search results.
Page titles are meant to be accurate, concise page's content. Your title should be below 60
character because Google search engine displays only first 50–60 characters of a title tag.

The <title> tag is used inside the <head> tag. It is a paired tag and the page title is written
between opening and closing tags.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

HTML Title Attribute

The title attribute is used to give tooltip in an element. Tooltip is a kind of brief information
about a particular element in the webspage. It gets displayed when user hovers the cursor
over the element.

The title attribute can be used with several HTML tags. The syntax is given below in the
example:

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Title Attribute </title>
</head>
<body>
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">CodeRepublics.com</p>
</body>
</html>

Output
WHO was founded in 1948.

CodeRepublics.com

HTML Marquee Tag - Why you should avoid

it?
HTML <marquee> tag is used to automatically scroll an image or text horizontally or
vertically on a webpage. In simple words, it scrolls the image or text up, down, left or right
automatically.

By default, without any specific attribute, content within the <marquee> tag will scroll from
right to left. The marquee tag has been deprecated in HTML5 and should no longer be used.
You should use CSS instead to create a similar scrolling effect. We can now use the
following CSS3 properties like marquee-play-count, marquee-style, overflow-style, marquee-
direction and marquee-speed.

Look at the example below, in which the default scrolling effect is running.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Marquee Tag </title>
</head>
<body>
<marquee> This is an example of HTML marquee. </marquee>
</body>
</html>

Output
Marquee Scroll Property
Marquee Scroll is a default property. During scroll, the text floats from right to left and
restarts from the right side of the marquee when it reaches to the end on the left side of the
screen.

It is used as a value of behavior attribute, like, behavior="scroll". You can also change the

direction of the Scroll by using direction attribute.

As it is a default property, there is no need to specify this within Marquee tag.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Scroll Attribute </title>
</head>
<body>
<marquee width="100%" behavior="scroll" direction="up">
This is an example of a scroll marquee Up Side Direction...
</marquee>
</body>
</html>

Output

Marquee Slide Property

Marquee Slide property scrolls the text from right to left and at the end of the screen, it stops
movement. You can specify the direction attribute to change the direction of the marquee
like, direction=up/down/left/right.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Marquee Slide Attribute </title>
</head>
<body>
<marquee width="100%" behavior="slide">
This is an example of a slide marquee...
</marquee>
</body>
</html>

Output

Marquee Alternate Property

Marquee Alternate Property scrolls the text from right to left and then goes back from left to
right. You can only set direction as left or right on this property.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Marquee Alternate Attribute </title>
</head>
<body>
<marquee width="100%" behavior="alternate">
This is an example of a alternate marquee...
</marquee>
</body>
</html>

Output

Marquee 'Direction' Attribute

The 'Direction' Attribute is used to change the direction of scrolling text inside the marquee
tag. The direction of text or image data inside marquee tag can be left, right, up and down.

ExampleTry this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Marquee Direction Attribute </title>
</head>
<body>
<marquee width="100%" behavior="scroll" direction="up">
This is an example of a Up side direction marquee...
</marquee>
</body>
</html>

Output
     

HTML Marquee tag Attributes

Attribute Description

behavior The behavior of how the text scrolls... It sets the behavior of the marquee to
one of the three different types: scroll, slide, and alternate.

bgcolor Change background color.

direction It defines the direction for scrolling content, like left/right/up/down.

height It defines the height of the marquee in pixels or '%'.

width It defines the width of marquee in pixels or '%'.

hspace It defines horizontal space in pixels around the marquee.

vspace It defines vertical space in pixels around the marquee.

scrolldelay The delay in milliseconds between scrolling. The default value is 85 if the
 Attribute Description

scrolldelay is not specified. If a value lower than 60 is provided, the truespeed

attribute must also be used

scrollamount The amount of scrolling (in pixels) for each interval. The default value is 6 if
the scrollamount is not specified.

truespeed Use this attribute to indicate that a scrolldelay value of 60 is allowed.

Otherwise, the scrolldelay value will be rounded up to 60.

loop It defines the number of times that the text will scroll. The default value is -1
which means that the marquee will loop continuously.

bgcolor It defines background color. It is now depreciated.

HTML Marquee Methods

The marquee tag has the following methods:

Methods Description

start() It starts the text scrolling within the marquee.

stop() It stops the text from scrolling within the marquee.

Marquee Event Handlers

The <marquee> tag has the following event handlers:
 Event
Handler Description

onbounce The onbounce event fires when the behavior attribute is set to alternate and the
text has reached the edge of the marquee.

onfinish The onfinish event fires when the loop attribute is set to a value higher than 0
and the marquee has finished looping the specified number of times.

onstart This event fires when the text starts to scroll.

HTML Code Tag - Learn How to use Code tag

in html
What is the code tag in HTML? - HTML <code> tag is used to represent computer code. It
defines a piece of computer code. By default, HTML Code Tag is displayed in the browser's
default monospace font.

Syntax for the code tag in html is:

<body>
<code>Contents... </code>
</body>

Points about code tag:

 Code tag in html is mainly used to display the code snippet into the web browser.
 Using this html tag you can style its element and match it to the computer’s default
text format.
 By default the web browser use a monospace font family for displaying code tags
content.

HTML Code Tag Example:

ExampleTry this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Code Tag </title>
</head>
<body>
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
</body>
</html>

Output
Emphasized text
Strong text
A piece of computer code
Sample output from a computer program
Keyboard input
Variable

Attributes
Only the Global Attributes can be apply to the <code> tag. There are no such attributes that
are specific to this html code tag.

Things you need to konw about before using code tag in html web page or doument

 The HTML <code> tag is always found within the <body> tag.

 By default the text within the html <code> tag is displayed in the monospace font on
your browser.

The code tag in html supports almost all popular web browsers like Google Chrome,
Android, Edge, Firefox, Opear, Safari and more..

HTML Code Tag

The HTML Code tag is a phrase tag that defines a piece of computer code.
Tags Description

<code> It defines a piece of computer code.

<kbd> It defines keyboard input.

<samp> It specifies a sample output from a computer program.

<pre> Defines preformatted text.

<dfn> It defines a definition term.

<var> It defines a variable.

<strong> It defines a important text.