Lesson 08

Adding Section Titles in HTML using Heading Tags Level One through Six

A book usually is divided into sections that are usually called chapters. Those chapters could also be part of greater subsection of the book. Usually there is a title text for each of those sections and subsections.

In HTML you can accomplish that with heading tags. The top-level section marker is heading level one. Then you can have subsections of sections using headings of a level higher than one. Those headings can go up to six. You can think of them like title that marks a subsection of a subsection of a subsection and so on.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

Summary of Heading Tags in HTML

In this discussion about heading tags in HTML, the concept of organizing content using headings is explained, drawing parallels to chapters in a book. Here’s a breakdown of the key points:

Overview of Heading Tags

Headings are used to structure a document, indicating sections and subsections.
The primary heading tag is H1, which represents the top-level section of content.

Example of Heading Tags

H1 Tag:
- Created using <h1> and </h1> tags.
- Displays as large and bold text, denoting the main section.
- Example:
```
<h1>This is Heading Level One</h1>
```

Subsequent Heading Levels:

H2, H3, H4, H5, and H6 are used for subsections, with each subsequent tag representing a smaller header.

Example:

<h2>This is Heading Level Two</h2>
<h3>This is Heading Level Three</h3>
<h4>This is Heading Level Four</h4>
<h5>This is Heading Level Five</h5>
<h6>This is Heading Level Six</h6>

Visual Representation

Each level of heading gets progressively smaller:
- H1: Largest
- H2: Smaller than H1
- Continues down to H6, which is the smallest.

Flexibility in Usage

It’s noted that while these tags have standard meanings, not all users adhere to these conventions in their web pages.
Styles can be altered using CSS, allowing for customization beyond the default appearance.

Takeaway

Heading tags are essential for organizing content hierarchically in HTML documents, but they can be styled and utilized creatively as per the designer's intent.

Video Transcript

Let's talk about heading tags. Typically in a document, we have a title. It's called heading. That indicates it's a section or a subsection and so on. Think about a book. There's always chapter one in big letters, chapter two and so on. So the way we do that is with the heading tag. So what I'm going to do here is break a line and go to the first line. I'm going to say less than. I'm going to call it H1 and then greater than. Notice I already have my closing tag here written for me because this environment is kind of smart. Then I'm going to type the heading level one here. Now click run. So this is the way it manifests visually. It's really big letters in bold. This is called the heading level one in short H1. And you can use this to indicate a, OK, this is the top level section of something. And then you write some tags like we wrote a paragraph and so on. And then if you want to have more levels like nested, subtitles and so on, that's when we use what's called H2, H3, and so on all the way up to H6. So let's try H2. So I'm going to say less than, H2, greater than. And then type this is heading level two. And then don't forget the closing tag less than, slash H2, greater than. And then let's add some paragraphs here. Some paragraph with this subsection. And then click run. Now we can see we added this heading level two. You can notice visually, heading level two by the default style is a literal smaller than level one, because it's meant to be a subsection of level one. Think of level one as the top most. And then as you go increase the number, it gets smaller and smaller because you're going to a subsection of a subsection of a subsection and so on. OK, and then we add some paragraph there. So proceeding this manner, we can try H3, H4, H5, and H6. It's kind of tedious. I'll just write really fast. So let's write H3. This is heading level three. And then H4. This is heading level four. H5. This is heading level five. Finally, open tag. H6. Close there. This is heading level six. Click in the top left run. Scroll down here. You can see this is heading level three. It's a little smaller. And then level four, even smaller. Level five, even smaller. Level six, really small. So if you want, if you like to organize your document into subsections of a subsection, you can leverage these kind of things. Mind you, what you're going to see in the web, not everybody's going to follow what the element is meant to be. So keep that in mind, even though these are meant originally to be for this kind of purpose. Some people might use it different ways. So any HTML element can be changed to be whatever people want. So keep that in mind as well. And you can change their style as well, CSS. It doesn't have to be a single element. You can change their style as well, CSS. It doesn't have to be like this, but this is just the default.