Introduction to HTML: Headings and Tags

Table of Contents

In our introduction of HTML as a part of front-end web development, we likened it to the framework of a website. When we think of HTML, we think of the content and structure of a website. Whatever your choice of browser may be; be it Firefox, Safari, or Chrome, all of them work toward the same goal, which is to translate your files—such as your JavaScript, CSS, or HTML files—into a website that can be seen. For instance, the HTML code we have here specifies that the title of our website should be “Hello” and that the body should contain a heading that reads “Hello world.”. To write this simple HTML code, we begin by opening the Atom editor and typing the following codes below.

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>
    <h1> Hello World</>
  </body>
</html>

Since we have already installed the HTML preview plugin, the result of this is simple code can be shown to us when we click on the preview HTML.

Introduction to HTML: A hello world code

Fun Fact!

The “Hello, World!” program is a traditional introduction to programming, and its origin story is fascinating. The first known use of “Hello, World!” as a test message was in 1972 by Brian Kernighan, a Canadian computer scientist. At the time, Kernighan was working on the Bell Labs Unix team, and he was tasked with writing a tutorial on the C programming language. In his book “The C Programming Language,” co-authored with Dennis Ritchie, Kernighan included a simple program that printed “Hello, World!” to the screen. This example program was meant to demonstrate the basic syntax of C and has since become a ubiquitous greeting in the world of programming.

Unfortunately, the legend himself can’t definitely pinpoint when or why he chose the words “Hello, World.” When asked what sparked the idea for the name “Hello, World” in interview with Forbes India, he said his memory’s dim.

“What I do remember is that I had seen a cartoon that showed an egg and a chick and the chick was saying, “Hello, World.”

copying the html file path in Atom editor

So if we pass that code into our browser, by right-clicking on the file name on the left hand side (LHS) and selecting “copy full path”. We paste this in our browser. Hit the “Enter” key on your keyboard. It will open it and display it like as shown below; with the title of the website usually on the Tab bar and that H1 which is the big heading showing up in the body of our website. So before we dive deep into this, it’s really important to remember that HTML is the Foundation of or websites. So for example, you won’t see website that are created using just a CSS file. Or just a JavaScript file, but you can create websites using just in HTML file.

A Hello World Code in HTML is saod to bring goodluck when coding

When designing a website with just HTML code it is good to note that: yes, the website doesn’t compare with the full fledged websites built in 2024 but it does enable your website to display text or various elements, which is images or forms or tables depending on how you code up the HTML file. So html stands for Hypertext Markup Language

The really important part here is the word “Markup” because there’s many markup languages. For example, you might have heard of things that just XML which stands for extensible markup language or GML, generalized markup language.

It is said that these languages share a common history, which is based off the markup that used to be put into many scripts where editors would mark up the manuscript and either specify changes to be made. Either the structure and layout to the publishers. So, for example, you might have the squiggly line that shows the publishers that this part should be printed in bold or this part should be printed in italics.

HTML also works in much the same way; you can specify the layout and structure of your website by using HTML tags. Using our preview plugin, we can play around with real life HTML code. So this will allow us to interact with the live version of our website.

Let us pick a website content we can replicate. Head over to this website here and open the ebook there.

Since we’re only working with HTML at the moment, we want to regenerate this book, “The Fighting Scrub by Ralph Henry Barbour” (or an excerpt of it), using only HTML code. On scrolling through the content of the website, and looking carefully, you can see that you have the option to view the ebook in plain text UTF-8 format, that means you can view the book as plain text. Also, you can read this book online in HTML format.

Introduction to HTML: viewing text content in plain text

So this is what the plane text looks like, as shown above. The viewing format has all of the text in the book, but absolutely no structure. And it has a dark background, and it is this font style that is just a bit off.

But when we have a look at the HTML file by clicking on the read online (web) option: you can see that it has laid up the book where the structure that is more human readable.

Introduction to HTML: the fighting scrub by Ralph

And this is what we’re going to replicate using HTML. So if you go ahead and just copy this part where it says “THE FIGHTING SCRUB”, copy off these texts and put it in your editor.

Introduction to HTML: Headings

When our editor opens, we get to put in the HTML 5 boilerplate. This is very easy to do just type in “html” and since we already installed the packages for autocomplete, this will autocomplete the HTML 5 boilerplate.

Since we are recreating the book by Ralph Henry Barbour called The Fighting Scrub. We go ahead and put this title in the head part of the code. And we proceed to the body side of the HTML code. In the body we put the title of the book in h1 headings and also the name of the writer in h1 headings too.

Of course, this is no where the original structure of the book itself. Laying the original ebook from the website side by side with ours, we can see theirs has the sleek look. And there are 3 horizontal lines separating them. We can of course, work on this by adding more HTML tags to our codes to our already existing HTML code.

The Anatomy of HTML Tags

Using inspect to see the HTML code of a website

When we right click and choose inspect, we can see the code behind the rendered structure of the website contents. And under the HTML element, we can see what the codes are.

We can see that they used a <br> tag, also called the line break tag. You can read more about the properties of the line break HTML tag at MDN web docs page. Likewise, there are is the horizontal rule or <hr> tag that was coined used to make the lines. Although, theirs aren’t as our. We can replicate the same effect just using our own lines of HTML code.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>The Fighting Scrub</title>
</head>

<body>
  <center>
    <hr>
    <h1>THE <br>FIGHTING SCRUB</h1>
    <hr>
    <h1>By RALPH HENRY BARBOUR</h1>
    <hr>
    <p><i>Yardley Hall Series</i></p>
  </center>
<p>FOURTH DOWN</p>
<p>FORWARD PASS</p>
<p>DOUBLE PLAY</p>
<p>WINNING HIS Y</p>
<p>GUARDING THE GOAL</p>
<p>FOR YARDLEY</p>
<p>AROUND THE END</p>
<p>CHANGE SIGNALS</p>
<center>
  <p><i>Purple Pennant Series</i></p>
  </center>
  
</body>

</html>

Again, to solve the width of the <hr> tag, we go back to the documentation on MDN or W3schools. Any of these two you prefer would do the trick. We are looking for the attributes of the <hr> tag.

From the attributes in MDN docs, we can see that we can manipulate the width of the <hr> tag. And this can be specified in percentage or in pixel. Also, note that this feature has been deprecated, this is shown by the dustbin sign next to the attribute. However, since we want to achieve the same structure using only HTML codes. We had to employ this method.

The result would be something like the one shown above. And it was almost the exact same replica of the ebook on the webpage itself.

Self-Closing and Non-Self-Closing Tags in HTML

Since we are dealing with the introduction to HTML, now would be a good time to discuss the two types of tags in HTML. In HTML, tags are used to define the structure and content of a web page. Some tags, known as self-closing tags, do not require a closing tag because they do not contain any content or require any additional information. These tags are closed with a forward slash (/) before the closing angle bracket (>). For example, the tag is a self-closing tag used to insert images into a web page. It is written the <img> tag is a self-closing tag used to insert images into a web page.

It is written as <img src="image.jpg" alt="Description of image"/> where the src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image.

On the other hand, non-self-closing tags require a closing tag to indicate the end of the element’s content. These tags surround content that should be displayed on the web page. For example, the <p> tag is a non-self-closing tag used to define paragraphs of text. It is written as <p>This is a paragraph of text.</p>, where the opening <p> tag indicates the start of the paragraph and the closing </p> tag indicates the end of the paragraph.

Self-closing tags are also used for elements that do not have any content, such as line breaks or horizontal rules. For example, the <br> tag is a self-closing tag used to insert a line break in the text. It is written as <br/>, and it does not require a closing tag because it does not contain any content.

In contrast, non-self-closing tags are used for elements that contain content, such as text, images, or other elements. These tags require a closing tag to indicate where the content of the element ends. Using the correct type of tag, whether self-closing or non-self-closing, is important for ensuring that the HTML document is well-formed and displays correctly in web browsers.

Introduction to HTML: Other examples of Headings

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>This is a Heading Level 1</h1>
    <p>This is some content under the heading.</p>

    <h2>This is a Heading Level 2</h2>
    <p>This is some more content under the second heading.</p>

    <h3>This is a Heading Level 3</h3>
    <p>And more content under the third heading.</p>

    <h4>This is a Heading Level 4</h4>
    <p>Even more content under the fourth heading.</p>

    <h5>This is a Heading Level 5</h5>
    <p>Content under the fifth heading.</p>

    <h6>This is a Heading Level 6</h6>
    <p>Content under the sixth and lowest level heading.</p>
</body>
</html>

The headings are defined using the <h1> to <h6> tags, where <h1> represents the highest level of heading (most important) and <h6> represents the lowest level of heading (least important). Here are examples of how headings can be used in HTML. In this example above, each heading tag <h1> to <h6> is followed by a paragraph <p> tag to demonstrate how headings are used to structure content hierarchically in HTML.

Conclusion

This tutorial is a brief introduction to HTML, it highlights the importance of HTML heading, tags and their attributes. We can proceed to take some questions based on these teachings.

FAQs on Headings and Tags in HTML

What is the difference between headings <h1> to <h6> in HTML?
- Each heading tag represents a different level of importance and hierarchy. <h1> is the highest level, typically used for the main heading of a page, while <h6> is the lowest level, used for subheadings or less important content.
Can I skip heading levels in HTML?
- While it is technically possible to skip heading levels (e.g., using <h1> followed directly by <h3>), it is generally recommended to use heading levels sequentially to maintain a logical and consistent structure for accessibility and SEO purposes.
What is the purpose of semantic HTML tags?
- Semantic HTML tags, such as <header>, <footer>, <nav>, and <article>, provide meaning to the content they enclose. They help browsers, search engines, and screen readers understand the structure of the page, improving accessibility and SEO.
How do I create a hyperlink in HTML?
- To create a hyperlink in HTML, use the <a> tag followed by the href attribute, which specifies the URL of the link. For example, <a href="https://www.example.com">Visit Example</a> will create a link that says “Visit Example” and directs users to the specified URL when clicked.
What is the purpose of the <div> tag in HTML?
- The <div> tag is a generic container used to group and style content in HTML. It does not have any specific meaning or semantic value on its own but is often used with CSS to create layouts and organize content within a webpage.

Quiz and Practice Questions

What is the purpose of headings in HTML?
How many levels of headings are available in HTML?
Which tag is used to define the most important heading?
Which tag is used to define the least important heading?
What is the correct tag to use for paragraphs in HTML?
Which tag is used to create a hyperlink in HTML?
How do you create a line break in HTML?
Which tag is used to insert an image in HTML?
What is the purpose of the <div> tag in HTML?
How do you create a horizontal rule in HTML?
Which tag is used to define a list of items?
What is the difference between ordered and unordered lists in HTML?
How do you create a numbered list in HTML?
How do you create a bulleted list in HTML?
What is the purpose of the <span> tag in HTML?
How do you create a table in HTML?
Which tag is used to define the structure of a table in HTML?
How do you create a cell within a table in HTML?
What is the purpose of the <thead>, <tbody>, and <tfoot> tags in HTML tables?
How do you create a link to an email address in HTML?

What HTML tag is used to define the most important heading on a webpage?
- a) <heading>
- b) <h1>
- c) <title>
- d) <header>
How many heading levels (H tags) are there in HTML by default?
- a) 3
- b) 6
- c) Unlimited
- d) 10
Which of the following tags is NOT a heading tag?
- a) <h2>
- b) <b>
- c) <h3>
- d) <h6>
What is the semantic purpose of heading tags?
- a) To change the font size
- b) To define the document structure and hierarchy
- c) To bold important text
- d) To create a visual separation
How can you style the appearance of headings in HTML?
- a) With inline styles directly within the heading tag (e.g., <h1 style="color: red">)
- b) Using a separate CSS stylesheet
- c) Both a) and b) are possible
- d) Neither a) nor b) are possible

True or False

Headings should be used in a logical order (H1 being the most important, followed by H2, and so on).
- True
- False
It’s okay to use multiple H1 tags on a single webpage.
- True
- False
Search engines consider heading tags when ranking websites.
- True
- False

Matching

Match the following HTML tags with their corresponding meaning:
- a) <p>
- b) <h1>
- c) <span>
- d) <b>
- i) Most important heading
- ii) Inline element for styling
- iii) Paragraph
- iv) Bold text (deprecated in modern HTML)

Fill in the Blank

The closing tag for an H2 heading would be written as: _______
You can nest heading tags within each other (e.g., an H3 heading inside an H2). True or False?

Short Answer

Briefly explain the difference between semantic tags and presentational tags in HTML.
Describe two benefits of using proper heading tags in your HTML code.
What are some accessibility considerations when using heading tags?

Code Examples

Write a short HTML code snippet that includes an H1 heading, an H2 heading, and a paragraph.
How would you style the H1 heading in your code from question 15 to have a red color and a larger font size using inline styles?
How would you achieve the same styling effect as question 16 using an external CSS stylesheet? (Provide both the CSS code and the HTML code with a reference to the stylesheet)

Challenge Questions

Explain how screen readers interpret heading tags for visually impaired users.
Discuss best practices for using heading tags for SEO (Search Engine Optimization).
How can you validate your HTML code to ensure proper use of heading tags?