 |
| HTML Heading |
Heading and paragraph play an important role in HTML. Html heading vs paragraph, Heading is greater than a paragraph in size. Html heading and paragraph on the same line can be displayed. Html automatically puts space or margin between heading and paragraph. Html
heading inside a paragraph can be by using CSS.
HTML Heading and Paragraph
HTML heading used for title or subtitle
of page. Html offers six types of heading h1 to h6. H1 is the largest heading while
h6 is the smallest. Customize heading can be made by using CSS. The paragraph is
used to describe the content of the page.
Both are block-level elements. When the user uses multiple heading then heading displays top to bottom while the paragraph
also acts as a heading. Heading defines with h1, h2, h3, h4, h5, and h6 tag and
paragraph p tag.
Heading vs Paragraph
The heading is a block-level element
while the paragraph is also a block-level element. Heading text size different by
default while paragraph has fixed size. Headings in bold while paragraphs are not
bold.
Heading use to define title or
subtitle and get more focus of visitor while paragraph used to describe the content
of heading.
Html heading and paragraph on
same line
By default, both are block-level
element. By apply CSS we can display inline. The following code will be used to
display on the same line.
Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>HTML Heading</title>
<style>
h1,p{
display: inline;
}
</style>
</head>
<body>
<h1>Heading : </h1>
<p>use for title or subtitle.</p>
</body>
</html>
Result:
 |
| HTML Heading 1 |
Html space between heading and paragraph.
By default, HTML places padding or margin for heading or
paragraph. We can remove this by applying CSS.
Let look following code.
Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>HTML Heading</title>
<style>
h1{
background-color: black;
color: white;
}
p{
background-color: blue;
color: white;
}
.RemovePaddingOrMargin{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Heading : </h1>
<p>use for title or subtitle.</p>
<h2>After Removing Margin and Padding.</h2>
<h1 class="RemovePaddingOrMargin">Heading : </h1>
<p class="RemovePaddingOrMargin">use for title or subtitle.</p>
</body>
</html>
Result:
 |
| HTML space between Heading and Paragraph |
.RemovePaddingOrMargin class use to remove padding and margin.
Html heading inside a paragraph.
we can use heading with in paragraph but heading is block level element and break the line.
Lets looks this example,
Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>HTML Heading</title>
</head>
<body>
<h1>Heading : </h1>
<p>Paragraph use for content of <h5>Title</h5> and subtitle. </p>
</body>
</html>
Result:
 |
| HTML Heading and Paragraph on same line example 1 |
Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>HTML Heading</title>
<style>
h5{
display: inline;
}
</style>
</head>
<body>
<h1>Heading : </h1>
<p>Paragraph use for content of <h5>Title</h5> and subtitle.</p>
</body>
</html>
Result:
 |
| HTML Heading and Paragraph on same line example 2 |
Now we will apply CSS on paragraph then see the result.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>HTML Heading</title>
<style>
h5,p{
display: inline;
}
</style>
</head>
<body>
<h1>Heading : </h1>
<p>Paragraph use for content of <h5>Title</h5> and subtitle.</p>
</body>
</html>
Result:
 |
| HTML Heading and Paragraph on same line example 3 |
0 Comments
Thanks