HTML Partie4

HTML Elements
An HTML file is made of elements. These elements are responsible for creating web pages
and define content in that webpage. An element in HTML usually consist of a start tag
<tag name>, close tag </tag name> and content inserted between them. Technically,
an element is a collection of start tag, attributes, end tag, content between
them.
Note: Some elements does not have end tag and content, these elements are termed as
empty elements or self-closing element or void elements.
Such as:
1. <p> Hello world!!! </p>
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10. </body>
11. </html>
Test it
Now
o All the content written between body elements are visible on web page.
Void element: All the elements in HTML do not require to have start tag and end tag,
some elements does not have content and end tag such elements are known as Void
elements or empty elements. These elements are also called as unpaired tag.
Some Void elements are <br> (represents a line break) , <hr>(represents a

horizontal line), etc.
Nested HTML Elements: HTML can be nested, which means an element can contain
another element.
Block-level and Inline HTML elements

For the default display and styling purpose in HTML, all the elements are divided into two
categories:
o Block-level element
o Inline element
Block-level element:
o These are the elements, which structure main part of web page, by dividing a
page into coherent blocks.
o A block-level element always start with new line and takes the full width of web
page, from left to right.
o These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,

<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>,
<li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul> and <video>.
Note: All these elements are described in later chapters.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <div style="background-color: lightblue">This is first div</div>
7. <div style="background-color: lightgreen">This is second div</div>
8. <p style="background-color: pink">This is a block level element</p>
9. </body>
10. </html>
Test it Now
Output:
In the above example we have used
tag, which defines a section in a web page, and takes full width of page.
We have used style attribute which is used to styling the HTML content, and the
background color are showing that it's a block level element.
Inline elements:
o Inline elements are those elements, which differentiate the part of a given text
and provide it a particular function.
o These elements does not start with new line and take width as per requirement.
o The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>,
<samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>,
<time>, <tt>, <var>.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
7. <span style="background-color: lightblue">this is inline element</span>
8. <p>This will take width of text only</p>
9. </body>
10. </html>
Test it Now
Output:
Following is the list of the some main elements used in HTML:
Start tag Content End tag Description

<h1> These are headings </h1>??..</h6> These elements are used to provide the headings
...... of HTML
<h6>
<p> This is the paragraph </p> This element is used to display a content in form o
paragraph.
<div> This is div section </div> This element is used to provide a section in web p
<br> This element is used to provide a line break. ( void

element)
<hr> This element is used to provide a horizontal line. (

element)
HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML provides
us ability to format text without using CSS. There are many formatting tags in HTML.
These tags are used to make text bold, italicized, or underlined. There are almost 14
options available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the
text.
NOTE: There are some physical and logical tags which may give same visual
appearance, but they will be different in semantics.
Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML
formatting text.
Element name Description
<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.
1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font, without any
logical importance. If you write anything within <b>............</b> element, is shown in
bold letters.
See this example:
1. <p> <b>Write Your First Paragraph in bold text.</b></p>

Test it Now
Output:
Write Your First Paragraph in bold text.
The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance. If you write anything between
<strong>???????. </strong>, is shown important text.
See this example:
1. <p><strong>This is an important content</strong>, and this is normal conten

t</p>
Test it Now
Output:
This is an important content, and this is normal content
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal conten
t</p>
9. </body>
10. </html>
Test it Now
2) Italic Text
HTML <i> and <em> formatting elements
The HTML <i> element is physical element, which display the enclosed content in italic
font, without any added importance. If you write anything within <i>............</i>
element, is shown in italic letters.
See this example:
1. <p> <i>Write Your First Paragraph in italic text.</i></p>

Test it Now
Output:
Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed content in italic
font, with added semantics importance.
See this example:
1. <p><em>This is an important content</em>, which displayed in italic font.</

p>
Test it Now
Output:
This is an important content, which displayed in italic font.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font.</
p>
9. </body>
10. </html>
Test it Now
3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
See this example:
1. <h2> I want to put a <mark> Mark</mark> on your face</h2>

Test it Now
Output:
I want to put a Mark on your face
4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
See this example:
1. <p> <u>Write Your First Paragraph in underlined text.</u></p>

Test it Now
Output:
Write Your First Paragraph in underlined text.
5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
See this example:
1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Test it Now
Output:
Write Your First Paragraph with strikethrough.
6) Monospaced Font
If you want that each letter has the same width then you should write the content within
<tt>.............</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because
different letters have different width. (for example: 'w' is wider than 'i'). Monospaced
Font provides similar space among every letter.
See this example:
1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Test it Now
Output:
Hello Write Your First Paragraph in monospaced font.
7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript;
means it is displayed half a character's height above the other characters.
See this example:
1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>

Test it Now
Output:
Hello Write Your First Paragraph in superscript.
8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ;
means it is displayed half a character's height below the other characters.
See this example:
1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>

Test it Now
Output:
Hello Write Your First Paragraph in subscript.
9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.
See this example:
1. <p>Hello <del>Delete your first paragraph.</del></p>

Test it Now
Output:
Hello
10) Inserted Text

Anything that puts within <ins>..........</ins> is displayed as inserted text.
See this example:

1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.<
/ins></p>
Test it Now
Output:
Delete your first paragraph.Write another paragraph.
11) Larger Text

If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.
See this example:
1. <p>Hello <big>Write the paragraph in larger font.</big></p>

Test it Now
Output:
Hello Write the paragraph in larger font.
12) Smaller Text

If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.
See this example:
1. <p>Hello <small>Write the paragraph in smaller font.</small></p>

Test it Now
Output:
Hello Write the paragraph in smaller font.
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the text
depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags,
from highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most
important heading and h6 is used for least important.
Headings in HTML helps the search engine to understand and index the
structure of web page.
Note: The main keyword of the whole content of a webpage should be display by h1
heading tag.
See this example:
1. <h1>Heading no. 1</h1>

Test it Now
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 o
f page </p>
9. <h2>This is first sub-heading</h2>
10. <p>h2 describes the first sub heading of page. </p>
11. <h3>This is Second sub-heading</h3>
12. <p>h3 describes the second sub heading of page.</p>
13. <p>We can use h1 to h6 tag to use the different sub-
heading with their paragraphs if
14. required.
15. </p>
16. </body>
17. </html>
Output:
Supporting Browsers
Element Chrome IE Firefox Opera Sa
<h1> to <h6> Yes Yes Yes Yes Yes
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>
Test it Now
Output:
This is first paragraph.
This is second paragraph.
This is third paragraph.
Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra
line while displaying the page. The browser counts number of spaces and lines as a single
one.
1. <p>
2. I am
3. going to provide
4. you a tutorial on HTML
5. and hope that it will
6. be very beneficial for you.
7. </p>
8. <p>
9. Look, I put here a lot
10. of spaces but I know, Browser will ignore it.
11. </p>
12. <p>
13. You cannot determine the display of HTML</p>
14. <p>because resized windows may create different result.
15. </p>
Test it Now
Output:
I am going to provide you a tutorial on HTML and hope that it will be very beneficial for
you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
You cannot determine the display of HTML
because resized windows may create different result.
As you can see, all the extra lines and unnecessary spaces are removed by the browser.
How to Use <br> and <hr> tag with paragraph?

An HTML <br> tag is used for line break and it can be used with paragraph elements.
Following is the example to show how to use <br> with <p> element.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Use of line break with pragraph tag</h2>
7. <p><br>Papa and mama, and baby and Dot,
8. <br>Willie and me?the whole of the lot
9. <br>Of us all went over in Bimberlie's sleigh,
10. <br>To grandmama's house on Christmas day.
11. </p>
12. </body>
13.
14. 
15. </html>
Test it Now
Output:
An HTML <hr> tag is used to apply a horizontal line between two statements or two
paragraphs. Following is the example which is showing use of <hr> tag with paragraph.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Example to show a horizontal line with paragraphs</h2>
7. <p> An HTML hr tag draw a horizontal line and separate two paragraphs with
that line.<hr> it will start a new paragraph.
8. </p>
9. </body>
10. </html>
Test it Now
Output:
HTML Phrase tag
The HTML phrase tags are special purpose tags, which defines the structural meaning of
a block of text or semantics of text. Following is the list of phrase tags, some of which we
have already discussed in HTML formatting.
o Abbreviation tag : <abbr>

o Acronym tag: <acronym> (not supported in HTML5)
o Marked tag: <mark>
o Strong tag: <strong>
o Emphasized tag : <em>
o Definition tag: <dfn>
o Quoting tag: <blockquote>
o Short quote tag : <q>
o Code tag: <code>
o Keyboard tag: <kbd>
o Address tag: <address>
1. Text Abbreviation tag

This tag is used to abbreviate a text. To abbreviate a text, write text between <abbr>
and </abbr> tag.
Example
1. <p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is
used to create web pages. </p>
Test it Now
Output:
2. Marked tag:
The content written between <mark> and </mark> tag will show as yellow mark on
browser. This tag is used to highlight a particular text.
Example
1. <p>This tag will <mark>highlight</mark> the text.</p>
Test it Now
Output:
3. Strong text:
This tag is used to display the important text of the content. The text written between
<strong> and </strong> will be displayed as important text.
Example
1. <p>In HTML it is recommended to use <strong>lower-
case</strong>, while writing a code. </p>
Test it Now
Output:
4. Emphasized text
This tag is used to emphasize the text, and displayed the text in italic form. The text
written between <em> and </em> tag will italicized the text.
Example
1. <p>HTML is an <em>easy </em>to learn language.</p>
Test it Now
Output:
5. Definition tag:
When you use the <dfn> and </dfn> tags, it allow to specify the keyword of the content.
Following is the example to show how to definition element.
Example
1. <p><dfn>HTML </dfn> is a markup language. </p>
Test it Now
Output:
6. Quoting text:
The HTML <blockquote> element shows that the enclosed content is quoted from
another source. The Source URL can be given using the cite attribute, and text
representation of source can display using <cite> ..... </cite>element.
Example
1. <blockquote cite="https://www.keepinspiring.me/famous-
quotes/"><p>?The first step toward success is taken when you refuse to be a ca
ptive of the environment in which you first find yourself.?</p></blockquote>
2. <cite>-Mark Caine</cite>
Test it Now
Output:
7. Short Quotations:
An HTML <q> ....... </q> element defines a short quotation. If you will put any content
between <q> ....... </q>, then it will enclose the text in double quotes.
Example:
1. <p>Steve Jobs said: <q>If You Are Working On Something That You Really Care
About, You Don?t Have To Be Pushed. The Vision Pulls You.</q>?</p>
Test it Now
Output:
8. Code tags
The HTML <code> </code> element is used to display the part of computer code. It will
display the content in monospaced font.
1. <p>First Java program</p>

2. <p><code>class Simple{ public static void main(String args[]){
3. System.out.println("Hello Java"); }} </code>
4. </p>
Test it Now
Output:
9. Keyboard Tag
In HTML the keyboard tag, <kbd>, indicates that a section of content is a user input
from keyboard.
1. <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd>

to restore page on chrome.</p>
Test it Now
Output:
10. Address tag

An HTML <address> tag defines the contact information about the author of the content.
The content written between <address> and </address> tag, then it will be displayed in
italic font.
1. <address> You can ask your queries by contact us on <a href="">example123

@newdomain.com</a>
2. <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
3. </address>
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>

Test it Now
Specify a location for Link using target attribute

If we want to open that link to another page then we can use target attribute of <a> tag.
With the help of this link will be open in next page.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. <p>Click on <a href="https://www.javatpoint.com/" target="_blank"> this-
link </a>to go on home page of JavaTpoint.</p>
8. </body>
9. </html>
Test it Now
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.
Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.
A visited link displayed underlined and purple.
An active link is underlined and red.

HTML Partie4

Uploaded by

Copyright:

Available Formats

HTML Partie4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Partie4

Uploaded by

Copyright:

Available Formats

HTML Elements

1. <p> Hello world!!! </p>

Some Void elements are <br> (represents a line break) , <hr>(represents a

Block-level and Inline HTML elements

Following are the block-level elements in HTML.

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,

Note: All these elements are described in later chapters.

In the above example we have used

Following is the list of the some main elements used in HTML:

Start tag Content End tag Description

<br> This element is used to provide a line break. ( void

<hr> This element is used to provide a horizontal line. (

In HTML the formatting tags are divided into two categories:

Element name Description

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

See this example:

1. <p> <b>Write Your First Paragraph in bold text.</b></p>

See this example:

1. <p><strong>This is an important content</strong>, and this is normal conten

This is an important content, and this is normal content

See this example:

1. <p> <i>Write Your First Paragraph in italic text.</i></p>

Write Your First Paragraph in italic text.

See this example:

1. <p><em>This is an important content</em>, which displayed in italic font.</

This is an important content, which displayed in italic font.

3) HTML Marked formatting

See this example:

1. <h2> I want to put a <mark> Mark</mark> on your face</h2>

I want to put a Mark on your face

1. <p> <u>Write Your First Paragraph in underlined text.</u></p>

Write Your First Paragraph in underlined text.

See this example:

1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Write Your First Paragraph with strikethrough.

See this example:

1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Hello Write Your First Paragraph in monospaced font.

See this example:

1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>

Hello Write Your First Paragraph in superscript.

See this example:

1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>

Hello Write Your First Paragraph in subscript.

See this example:

1. <p>Hello <del>Delete your first paragraph.</del></p>

10) Inserted Text

See this example:

Delete your first paragraph.Write another paragraph.

11) Larger Text

See this example:

1. <p>Hello <big>Write the paragraph in larger font.</big></p>

Hello Write the paragraph in larger font.