HTML Heading - Alien Programmer

Spread the love

HTML headings are used to define the titles or subtitles of sections of a web page. They range from <h1> to <h6>, with <h1> being the most important and <h6> being the least important. In this article, we’ll discuss HTML headings in detail, along with examples.

HTML Headings

Here are the HTML headings, listed in order of importance:

css

<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>

When creating a web page, it’s important to use headings to break up the content into sections. This makes it easier for users to read and understand the content. It’s also important to use the headings in the correct order, with <h1> being used for the main title of the page and <h2> being used for the section titles.

HTML Headings Examples

Let’s take a look at some examples of HTML headings in action:

php

<!DOCTYPE html>
<html>
<head>
	<title>HTML Headings Example</title>
</head>
<body>
	<h1>Welcome to My Website</h1>
	<h2>About Me</h2>
	<p>My name is John and I'm a web developer.</p>
	<h2>My Skills</h2>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<h2>Contact Me</h2>
	<p>You can contact me at john@example.com.</p>
</body>
</html>

In this example, we’ve used HTML headings to break up the content into sections. The main title of the page is <h1>Welcome to My Website</h1>, followed by <h2> headings for the section titles. We’ve also used <ul> and <li> elements to create a bulleted list of our skills.

Using CSS with HTML Headings

You can also use CSS to style HTML headings. For example:

php

<!DOCTYPE html>
<html>
<head>
	<title>HTML Headings Example</title>
	<style>
		h1 {
			color: blue;
		}
		h2 {
			color: green;
		}
	</style>
</head>
<body>
	<h1>Welcome to My Website</h1>
	<h2>About Me</h2>
	<p>My name is John and I'm a web developer.</p>
	<h2>My Skills</h2>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<h2>Contact Me</h2>
	<p>You can contact me at john@example.com.</p>
</body>
</html>

In this example, we’ve used CSS to change the color of the <h1> and <h2> headings. The <h1> heading is blue, while the <h2> headings are green.

In conclusion, HTML headings are an important part of creating a well-organized and easy-to-read web page. By using headings in the correct order and styling them with CSS, you can create a professional-looking website that is easy for users to navigate.

Html attribute with css