Scribd
Upload
3 views

Basic of HTML Heading (1)

The document provides an overview of HTML headings and formatting tags, detailing their usage and importance in web development. It explains the six levels of HTML headings from <h1> to <h6>, as well as various formatting tags like <b>, <i>, <u>, and <mark> for text styling. Additionally, it covers the <q> and <abbr> tags for quotations and abbreviations, respectively, emphasizing their semantic roles in HTML.

Uploaded by

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

Basic of HTML Heading (1)

The document provides an overview of HTML headings and formatting tags, detailing their usage and importance in web development. It explains the six levels of HTML headings from <h1> to <h6>, as well as various formatting tags like <b>, <i>, <u>, and <mark> for text styling. Additionally, it covers the <q> and <abbr> tags for quotations and abbreviations, respectively, emphasizing their semantic roles in HTML.

Uploaded by

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

1

basic of HTML heading


HTML headings, also known as header tags, are titles or
subheadings that appear on a webpage.
They are used to differentiate the headings and subheadings from
the rest of the content on a page. HTML defines six levels of
headings, from H1 to H6,
with H1 being the most important and H6 being the least
important

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.
Output:
See this example:

1. <h1>Heading no. 1</h1> Heading no. 1


2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3> Heading no. 2
4. <h4>Heading no. 4</h4>
Heading no. 3
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6> 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.
2

HTML headings can also be used with nested elements. Following

Example:

<!DOCTYPE html>

<html>

<head>

<title>Heading elements</title>

</head>

<body>

<h1>This is main heading of page. </h1>

<p>h1 is the most important heading, which is used to display the


keyword of page </p>

<h2>This is first sub-heading</h2>

<p>h2 describes the first sub heading of page. </p>

<h3>This is Second sub-heading</h3>

<p>h3 describes the second sub heading of page.</p>

<p>We can use h1 to h6 tag to use the different sub-heading with their
paragraphs if

required.

</p>

</body>

</html>

Output:
3

 Attributes
There are no specific attributes applied to the h1 tag in html, Only global
attributes are applied to the h1 tag in html.

Note: In HTML5 the align attribute is not supported, for this, we have to use
CSS instead of align attribute.

Example of CSS syntax:


<h1 style="text-align:right">
<h1 style="text-align:center">Heading 1</h1>
<h2 style="text-align:right">Heading 2</h2>
<h3 style="text-align:left">Heading 3</h3>
<h4 style="text-align:justify">Heading 4</h4>
<h1 style="background-color:Green;">Scaler Topics</h1>
<h2 style="color:Tomato;">Welcome to Scaler Topics</h2>
<h3 style="background-color:pink; color:Brown;">Happy
Learning!</h3>

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

example:

<p>This is first paragraph.</p>


<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
4

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
Attribute
going to provide HTML p tag
supports Global and Event attributes of HTML.
you a tutorial on HTML
<p align="center">
and hope that it will
Paragraph alignment attribute
be very beneficial for you.
</p>
</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.


5

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.

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

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


<p> An HTML hr tag draw a horizontal line and separate two paragra
phs with that line.<hr> it will start a new paragraph.
</p>
</body>
</html>
6

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:


ADVERTISEMENT

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

<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


7

display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written


between it.

<tt> This tag is used to appear a text in


teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on


a section of text. (Not supported in
HTML5)

<sup> It displays the content slightly above the


normal line.

<sub> It displays the content slightly below the


normal line.

<del> This tag is used to display the deleted


content.

<ins> This tag displays the content which is


added

<big> This tag is used to increase the font size by


one conventional unit.

<small> This tag is used to decrease the font size


by one unit from base font size.

1) Bold Text
HTML<b> and <strong> formatting elements
Backward Skip 10sPlay VideoForward Skip 10s
8

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

Output:

This is an important content, and this is normal content

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

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 displaye


d in italic font.</p>
Test it Now

Output:

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

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


10

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


trike>.</p>
Test it Now

Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
11

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


up></p>
Test it Now

Output:

Hello Write Your First Paragraph in superscript.


12

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

See this example:

1. <p> <del>Delete your first paragraph.</del><ins>Write ano


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


14

1. <p>Hello <small>Write the paragraph in smaller font.</small


></p>
Test it Now

Output:

Hello Write the paragraph in smaller font.

HTML <q> Tag



The <q> tag is a standard quotation tag and is used for short quotations. The
browser normally inserts a quotation mark around the quotation. For longer
quotations, the <blockquote> tag must be used since it is a block-level element.
The <q> tag requires a starting as well as an end tag.
Syntax:
<q> Contents... </q>
Attributes:
cite: It contains the value i.e URL which specifies the source URL of the Quote.
Example 1: The below example illustrates the <q> tag in HTML:

<html>
<body>
<p>
<!-- html q tag is used here -->
<q>GeeksforGeeks</q>
A computer science portal for geeks
</p>
</body>
</html>
Output:
15

HTML <abbr> tag


HTML <abbr> tag is used to represent an acronym or abbreviation
of a longer word or phrase, such as www, HTML, HTTP, etc. The
content written between <abbr> tags renders with dotted
underline in some browser.

This tag can be used with "title" attribute (optional), and the value
of title attribute will be pop-up when the mouse hovers over the
content written between <abbr> tag.

Syntax
1. <abbr title="HyperText Markup language">HTML</abbr>
2. specifications about the HTML <abbr> tag

Display Inline

Start tag/End tag Both Start tag and End tag

Usage Semantic/Textual

<body>
<h2>Abbreviation tag example</h2>
<p><b>Hover mouse over the content and see the abbreviation</
b></p>
<abbr title="Hyper Text Transfer protocol">HTTP</abbr>
</body>
 HTML <address> tag
HTML <address> tag is used to specify the authorship information of the
article or webpage. It can contain any type of information which is needed
such as, URL, physical address, phone number, email, other links, etc.

The <address> tag is useful for various contexts such as business contact
information in the header of the page, or author related contact
information, etc.

The contact information written between <address> tags mostly renders in


the italic form on the browser.
16

Note: To represent a random address use <p> tag instead of <address> tag, as it should
contain the main contact information.

Syntax
1. <address>Contact Author at:<br>
2. <a href="mailto:[email protected]">[email protected]</a></addres
s>

If you want to specify the information of the author for an article, you must
place the <address> tag inside the <article> element.

Following are the specifications of <address> tag:

Display Block

Usage Semantic

Tags Start and end tag

Example
<body>
<h2>Example of Address tag</h2>
<address>The article is written by:<b>Harshita</b> <br>Contact Au
thor at:
<a href="mailto:[email protected]">[email protected]</a><br>Yo
u can also visit our blog:
<a href="http://javatpoint.blogspot.com/">javaTpoint blog</a>
</address>
</body>
Attributes
The <address> tag does not contain any specific attribute for it.

Global Attribute:
The <address> tag supports the global attributes.

Event attribute:
Element Chrome IE Firefox Opera Safari
The <address> tag
supports all Events attributes.

Supporting Browsers
17

You might also like