Mastering HTML Headings: A Structured Approach to Web Content

Introduction

HTML headings are essential when it comes to creating a well-structured web page. They provide a hierarchy and help readers to quickly navigate through a website. In this lab, you will learn how to create the different levels of HTML headings using the <h1> to <h6> tags.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") subgraph Lab Skills html/basic_elems -.-> lab-70769{{"`HTML Headings of Various Levels`"}} html/head_elems -.-> lab-70769{{"`HTML Headings of Various Levels`"}} html/text_head -.-> lab-70769{{"`HTML Headings of Various Levels`"}} end

Adding the HTML Boilerplate

The first step is to create an HTML file named index.html. You can use any text editor such as Notepad, TextEdit, or Sublime Text.

Add the basic HTML structure to your index.html file by typing <!DOCTYPE html> on the first line and <html></html> tags on the second and last lines respectively.

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Adding the Head Section

Within the <html> tags, create the head section using the <head> tag. Inside the head section, add the title of your web page using the <title> tag.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
</html>

Creating the Body Section

Create the body section using the <body></body> tags. Inside the body section, add the different levels of headings using the <h1> to <h6> tags.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <h5>Fourth Sub-Heading</h5>
    <h6>Fifth Sub-Heading</h6>
  </body>
</html>

Make sure to replace "Main Heading" and the sub-headings with your own relevant titles.

Grouping Headings using `<hgroup>`

You can group together multiple headings using the <hgroup> tag. In the example below, we are grouping the last three headings using <hgroup>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <hgroup>
      <h4>Fourth Sub-Heading Part 1</h4>
      <h5>Fourth Sub-Heading Part 2</h5>
      <h6>Fourth Sub-Heading Part 3</h6>
    </hgroup>
  </body>
</html>

Save your index.html file and open it in a web browser to see the headings you created.

Summary

In this lab, you have learned how to create HTML headings using the <h1> to <h6> tags. Headings are essential for creating a well-structured web page and they also help with search engine optimization. Remember that each HTML file should contain only one <h1> tag, for the main heading of the page.

HTML Headings of Various Levels