Scribd
Upload
4 views

HTML

HTML, or HyperText Markup Language, is a markup language used for creating web pages and applications, allowing for the structuring of content with various tags. It has evolved through several versions, with HTML5 being the latest, and offers features like easy formatting, multimedia support, and platform independence. HTML documents consist of elements such as headings, paragraphs, and links, which are defined by specific tags.

Uploaded by

praksan003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML

HTML, or HyperText Markup Language, is a markup language used for creating web pages and applications, allowing for the structuring of content with various tags. It has evolved through several versions, with HTML5 being the latest, and offers features like easy formatting, multimedia support, and platform independence. HTML documents consist of elements such as headings, paragraphs, and links, which are defined by specific tags.

Uploaded by

praksan003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 52

HTML

The major points of HTML are given below:

o HTML stands for HyperText Markup Language.

o HTML is used to create web pages and web applications.

o HTML is widely used language on the web.

o We can create a static website by HTML only.

o Technically, HTML is a Markup language rather than a programming language.

<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

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.

<html>

<head>

<title>Web page title</title>

</head>

<body>

<h1>Write Your First Heading</h1>

<p>Write Your First Paragraph.</p>

</body>

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

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.

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

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.

o HTML headings can also be used with nested elements. Following are different
codes to display the way to use heading elements.

Example:

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:

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.

o All HTML tags must enclosed within <> these brackets.

o Every tag in HTML perform different tasks.

o 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>


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

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

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

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

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

<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)

<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)

<kbd> It is used to define keyboard input.

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

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

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

<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> It defines short inline quotation.

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

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

<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> It is used to render enclosed text with an underline.

<ul> It defines unordered list of items.

<var> It defines variable name used in mathematical or programming context.

<video> It is used to embed a video content with an HTML document

<wbr> It defines a position within text where break line is possible.


HTML Attribute
o HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element.
o Each element or tag can have attributes, which defines the behaviour of that element.

o Attributes should always be applied with start tag.

o The Attribute should always be applied with its name and value pair.

o The Attributes name and values are case sensitive, and it is recommended by W3C that it
should be written in Lowercase only.
o 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>
Test it Now
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>


Test it Now

With <p> tag:

1. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will s
ee a description as a tooltip</p>
Test it Now

Code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <h1 title="This is heading tag">Example of title attribute</h1>
8. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will
see a description as a tooltip</p>
9.
10. </body>
11. </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">

Note: The above example also have height and width attribute, which define the height and width
of image on web page.
Output:

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)

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.

<ul>

<li>Aries</li>

<li>Bingo</li>

<li>Leo</li>

<li>Oracle</li>

</ul>

Output:

 Aries
 Bingo
 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:

<dl> tag defines the start of the list.

<dt> tag defines a term.

<dd> tag defines the term definition (description).

<dl>

<dt>Aries</dt>

<dd>-One of the 12 horoscope sign.</dd>

<dt>Bingo</dt>

<dd>-One of my evening snacks</dd>

<dt>Leo</dt>

<dd>-It is also an one of the 12 horoscope sign.</dd>

<dt>Oracle</dt>

<dd>-It is a multinational technology corporation.</dd>

</dl>

Test it Now

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.

Click here for full details of HTML description list. HTML Description List

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:

<!DOCTYPE html>

<html>

<head>

<title>Nested list</title>

</head>

<body>

<p>List of Indian States with thier capital</p>

<ol>

<li>Delhi

<ul>

<li>NewDelhi</li>

</ul>

</li>

<li>Haryana

<ul>
<li>Chandigarh</li>

</ul>

</li>

<li>Gujarat

<ul>

<li>Gandhinagar</li>

</ul>

</li>

<li>Rajasthan

<ul>

<li>Jaipur</li>

</ul>

</li>

<li>Maharashtra

<ul>

<li>Mumbai</li>

</ul>

</li>

<li>Uttarpradesh

<ul>

<li>Lucknow</li></ul>

</li>

</ol>

</body>

</html>
Output:

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"/>
Test it Now

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.

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">


Test it Now

Output:

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 ho
me page of JavaTpoint.</p>
8. </body>
9. </html>

Output:
Note:

o The target attribute can only use with href attribute in anchor tag.

o If we will not use target attribute then link will open in same page.

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.

<p>

I am

going to provide

you a tutorial on HTML

and hope that it will

be very beneficial for you.

</p>

<p>

Look, I put here a lot

of spaces but I know, Browser will ignore it.

</p>

<p>

You cannot determine the display of HTML</p>

<p>because resized windows may create different result.

</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:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2> Use of line break with pragraph tag</h2>

<p><br>Papa and mama, and baby and Dot,

<br>Willie and me?the whole of the lot

<br>Of us all went over in Bimberlie's sleigh,

<br>To grandmama's house on Christmas day.

</p>

</body>

</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:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2> Example to show a horizontal line with paragraphs</h2>

<p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will star
t a new paragraph.

</p>

</body>

</html>

Output:
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>
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.

By border attribute of table in HTML

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.

<table border="1">

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

2) CSS Border property

It is now recommended to use border property of CSS to specify border in table.

<style>

table, th, td {

border: 1px solid black;

</style>

Test it Now

You can collapse all the borders in one border by border-collapse property. It will collapse the border
into one.

<style>

table, th, td {

border: 2px solid black;

border-collapse: collapse;
}

</style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetn
Singh 72
a

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

By cellpadding attribute of table in HTML

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.

<style>

table, th, td {

border: 1px solid pink;

border-collapse: collapse;

th, td {

padding: 10px;

}
</style>

Output:

Last
Name Marks
Name

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.

table{

width: 100%;

Example:

<!DOCTYPE html>

<html>

<head>
<title>table</title>

<style>

table{

border-collapse: collapse;

width: 100%;

th,td{

border: 2px solid green;

padding: 15px;

</style>

</head>

<body>

<table>

<tr>

<th>1 header</th>

<th>1 header</th>

<th>1 header</th>

</tr>

<tr>

<td>1data</td>

<td>1data</td>

<td>1data</td>
</tr>

<tr>

<td>2 data</td>

<td>2 data</td>

<td>2 data</td>

</tr>

<tr>

<td>3 data</td>

<td>3 data</td>

<td>3 data</td>

</tr>

</table>

</body>

</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:

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

</style>
HTML code:

<table style="width:100%">

<tr>

<th>Name</th>

<th colspan="2">Mobile No.</th>

</tr>

<tr>

<td>Ajeet Maurya</td>

<td>7503520801</td>

<td>9555879135</td>

</tr>

</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:

<style>

table, th, td {

border: 1px solid black;


border-collapse: collapse;

th, td {

padding: 10px;

</style>

HTML code:

<table>

<tr><th>Name</th><td>Ajeet Maurya</td></tr>

<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>

<tr><td>9555879135</td></tr>

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

<table>

<caption>Student Records</caption>

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>

<tr><td>Mike</td><td>Warn</td><td>60</td></tr>

<tr><td>Shane</td><td>Warn</td><td>42</td></tr>

<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>

</table>

Styling HTML table even and odd cells

CSS code:

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 10px;

table#alter tr:nth-child(even) {

background-color: #eee;

table#alter tr:nth-child(odd) {

background-color: #fff;

table#alter th {

color: white;

background-color: gray;

}
</style>

Output:

HTML <font> tag

HTML <font> tag is used to define the font style for the text contained within it. It defines the
font size, color, and face or the text in an HTML document.

Syntax

1. <font size=" " color=" " face=" "> Content....</font>

Following are some specifications about the HTML <font> tag

Display Inline

Start tag/End tag Both Start and End tag

Usage Font Style

Example 1

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Font Tag</title>
5. </head>
6. <body>
7. <h2>Example of font tag</h2>
8. <p>This is normal text without any font styling</p>
9. <p>
10. <font color="blue">Text with normal size and default face</font>
11. </p>
12. <p>
13. <font size="5" color="green">Text with Increased size and default face</font>
14. </p>
15. <p>
16. <font color="red" face="cursive">Text with Changed face</font>
17. </p>
18. </body>
19. </html>

Output:

You might also like