Headings 1 – 6 in HTML/CSS

When it comes to text content on your web page, it is important to break up that content with headings. You’ve probably seen headings in your grade school science textbooks, they helped to tell you what you did and didn’t have to read to get info what each section was about! What’s cool about HTML is that there are default headings: heading 1 – heading 6(h1-h6). Heading 1(h1) is by default the largest heading, and signals to both readers and search engines that anything under that heading is the main/most important content.

To create headings you will use the opening and closing tags <h1>, <h2>…<h6> depending on the size and importance of the content.

Le Example:

Headings in HTML

 

And when you preview this in your browser, it will look like this:

Headings in HTML

Note: I did not do anything to style these headings…yet!

By default, each heading element has a specific size. If you notice in the example above, the largest size font heading is h1 and the smallest font heading is h6.

Here’s a brief overview of headings and what they’re used for:

Heading 1

This heading is your main heading, it helps to break up the content of your web page text. They indicate to the reader that whatever is under this type of heading is main content! Using a heading 1 is important to make your page SEO friendly because it helps search engines determine what your post is about!

Heading 2

This heading indicates to search engines and readers that this material is more specific and/or less important than the content in heading 1. These are essentially subheadings, headings that break up the main content within your web page!

Heading 3

And this heading is used to get even more specific!

Heading 4

And so on…

Heading 5

And so forth…

Heading 6

Tbh I’ve never used a heading this small!

Let’s take a look at how I would use headings 1-3 in a web page!

 

Which when viewed in my browser will look like this:

As the headings get smaller, my content gets more specific! I go from talking about animals to dogs to a specific dog breeds – Maltese!

Styling Headings 1-6

Although headings 1-6 have standard default sizes/styling, it is super easy to style them in your CSS Stylesheet! Head over to your .css file, and indicate you are styling a heading with the selector h1-h6.

Le Example:

Heading Mod in CSS

I’ve styled each heading individually, so when I preview my web page in my browser, the headings will look like this!

Modifying Headings

If you’re curious about how to style web-safe fonts, check out my tutorial on Styling Web Safe Fonts!

TL;DR: Using headings is super important for making your site SEO friendly! It allows search engines to easily crawl through your content to determine what it’s about!

Do you use each heading 1-6? I’d love to hear about the content you’re using them for! Comment below!

Subscribe to Tech Talk Code for new post updates!

Leave a Comment!