02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
CoursesArchiveBooks
Get Free Access
Previous VideoNext Video

Creating Headlines: Tags H1 Through H6

In this video, we dive into HTML headline tags (<h1> to <h6>), used to organize content on a webpage. Learn how to create meaningful, structured titles that help both users and search engines understand your content. From the main headline (<h1>) to subheadings (<h2> to <h6>), discover best practices for using these tags effectively.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!

Getting Started with HTML Training

Join my mom as I teach her the basics of HTML. In this ground breaking course.

02:16

Starting to do HTML

In this first video we will start talking about file formats, browsers and even see a few file types in HTML.

04:27

How to pick an HTML Editor

There are a lot of HTML editors out there so how will you pick the right on for you?

04:52

Creating Our First Tag

The most basic building block in HTML is the Tags. we will create one tag of our own. In this video we will create our first simple tag.

02:41

HTML, HEAD and BODY Tags

Every HTML page has a few tags you got to have that without them its not an HTML page. In this video we will learn about the HTML tag, the Head and the Body Tags.

02:43

Putting Content In Our Body

Now that we have a legal HTML structure its time for us to add our first content into our legal built HTML file.

01:24

Creating a Page Title

Adding a TITLE to the page. In this video we will add a title into the HEAD area of the page. We will then talk about what the TITLE is and where we can see it.

03:21

Creating Headlines: Tags H1 Through H6

It's time for us to explore and learn a few more tags. The tags we will be creating next are the headline tags. By the end of this video you will know 6 new tags!

02:08

Integrating the P tag (paragraph tag)

It's time for us to add the P tag into our skill set of tags. In this video we continue to learn HTML and add in the basic information we need to know about the P tag.

00:41

RECAP

That's it we are done with our first HTML session. We would love to make many more but that is 100% up to you if you love it support us drop a nice word for my mom and me.

01:06

Creating Headlines: Tags H1 Through H6 detailed:

In this tutorial, we’ll explore HTML headline tags, ranging from <h1> to <h6>. These tags help structure your webpage content, improving readability for users and discoverability for search engines.

1. What Are HTML Headline Tags?

Headline tags define the importance of titles on a webpage, with <h1> being the most important and <h6> the least.

  • <h1>: Typically used for the main title or headline of the page.
  • <h2> to <h6>: Used for subheadings to break down content into smaller sections.

Example:

<h1>What to Buy Mom for Mother's Day</h1>
<h2>Top Gift Ideas</h2>
<h3>Personalized Gifts</h3>

2. Why Use Headline Tags?

  1. Improve Readability:

    • Headline tags make it easier for users to scan and understand content.
    • Similar to book chapters and subheadings, these tags guide readers.

  2. Enhance SEO:

    • Search engines use headlines to understand the structure of your content.
    • Meaningful, descriptive headlines improve your page's search ranking.

  3. Content Hierarchy:

    • Headlines help organize content visually and semantically.
    • Use them to indicate relationships between sections (e.g., <h2> for subsections of <h1>).

3. How to Use Headline Tags

Follow these steps to add headlines to your HTML page:

  1. Open Your HTML File:

    • Use any plain text editor, such as Sublime Text or Notepad.

  2. Add a Headline to the BODY Section:
    Type the following code inside the <body> tag:

    <h1>What to Buy Mom for Mother's Day</h1>
<h2>Top Gift Ideas</h2>
<h3>Personalized Gifts</h3>
<h4>Handmade Jewelry</h4>
<h5>Gift Cards</h5>
<h6>Budget-Friendly Options</h6>

  3. Save and View in a Browser:

    • Save the file as headlines.html.
    • Open it in your browser to see the headlines displayed with different font sizes.

4. Best Practices for Headline Tags

  1. Start with <h1>:

    • Every page should have one <h1> tag.
    • Use it for the main title of the page.

  2. Use Subheadings as Needed:

    • Use <h2> to <h6> for organizing content under <h1>.

  3. Avoid Skipping Levels:

    • Maintain a logical hierarchy. For example, don’t jump from <h1> to <h4>.

  4. Use Descriptive Text:

    • Make headlines meaningful and relevant to the content they introduce.

5. Example Page with Headlines

Here’s a complete HTML page using headline tags:

<html>
  <head>
    <title>What to Buy Mom for Mother's Day</title>
  </head>
  <body>
    <h1>What to Buy Mom for Mother's Day</h1>
    <h2>Top Gift Ideas</h2>
    <h3>Personalized Gifts</h3>
    <p>Consider custom photo frames, engraved jewelry, or monogrammed items.</p>
    <h3>Handmade Jewelry</h3>
    <p>Explore unique and heartfelt gifts from local artisans.</p>
    <h4>Affordable Options</h4>
    <p>Even on a budget, you can find thoughtful gifts that make an impact.</p>
  </body>
</html>

Summary

By the end of this tutorial, you’ve learned:

  1. How to use headline tags (<h1> to <h6>) to structure your content.
  2. Why headlines are important for readability and SEO.
  3. Best practices for using headline tags effectively.

What’s Next?

In the next lesson, we’ll look at how to create and style paragraphs to complement your headlines.

Learn more at HTML Training with Mom.