How to add sub heading using HTML ?
Last Updated :
17 Feb, 2022
HyperText Markup Language(HTML), is the basic building block of web pages that defines a structure to them. This markup language is used by browsers to manipulate data like text, images, and other content so that they can be displayed in the required format. HyperText refers to the links that connect web pages and markup defines the text document within the tags.
Add sub-heading using HTML: The most often way we add sub-headings in HTML is either by using only HTML Headings or using HTML Headings and HTML div. Let’s explore both ways of adding sub-heading.
Adding Sub Heading using HTML Headings: The HTML heading tag (<h1> , <h2> . . . .<h6>) defines the heading of a page . There are six levels of heading defined which are h1, h2, h3, h4, h5 and h6. In these h1 is the highest level and h6 is the least level heading.
Headings are used by the Search engines to index the structure and content of your web page.
The level of the heading is defined based on the importance of a heading. So take any two-level heading tags, let’s say h1 and h2. The more important is our main heading, so will be inside our h1 tag and the lesser important heading which is our subheading here will be inside the <h2> tag.
Example: This example shows the first way how to add sub-heading in HTML by only using HTML headings. Write heading inside a higher level heading tag whereas sub-heading is to be written to a lower level heading tag as compared to the heading.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Adding Sub Heading</title>
<style>
.container {
height: 200px;
width: 600px;
background-color: green;
color: black;
border-radius: 10px;
border: 2px solid gray;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks - Main Heading</h1>
<div>
<h2>About GeeksforGeeks - Sub Heading</h2>
<p>
A Computer Science portal for geeks.
It contains well written,well thought
and well explained computer science
and programming articles, quizzes
</p>
</div>
</div>
</body>
</html>
|
Output :
Note: HTML headings have a default size and styling. Users can alter them according to their needs.
Adding Heading through a combination of HTML Headings and HTML div Tags: The <div> tag, most often known as division tag defines some division of content on the web page or a section in an HTML document. This can be header, footer, navigation bar, etc.
Let’s say the division is a sub-heading, so how can we use a <div> tag for sub heading in HTML?
How can <div> tag be used for subheading: As <div> tag is a generic container tag and is used to create some specific section in our webpage, we use it for subheading here. It is a block-level tag (same as a heading tag). Now, this specific section or container that contains our subheading can be easily styled through CSS and we can provide styling just like any level heading tag.
Example: This example shows another way of adding sub-headings in HTML by using a heading tag and div tag in combination. <div> tag is a generic container tag, also a block-level tag and can be custom styled and thus used to add subheading in place of a low-level heading tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Adding Sub Heading 2</title>
<style>
.container {
height: 200px;
width: 600px;
background-color: green;
color: white;
border-radius: 10px;
border: 2px solid gray;
}
.subHeading {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks - Main Heading</h1>
<div>
<div class="subHeading">
About GeeksforGeeks - Sub Heading
</div>
<p>
A Computer Science portal for geeks.
It contains well written,well thought
and well explained computer science and
programming articles, quizzes
</p>
</div>
</div>
</body>
</html>
|
Output :
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...