Introduction to HTML Tutorial for Beginners 2024 Part 2

This is part 2 of a beginner’s introduction to HTML. Part 1 explained the very basics of making your first HTML page.

This time we will go over some of the fundamental HTML elements that web developers use to code content onto their web pages: headings, paragraphs, links, images, and lists.

Headings

In order to be interpreted by search engines (and therefore get web traffic), you should have headings in your content. There are 6 levels of headings, and their tags are numbered <h1> through to <h6>.

There should only be one <h1> heading per page. This is your main heading. Sub-headings should be <h2>, sub-headings of those should be <h3>, and so forth.

<h1>This is the page heading.</h1>
<h2>This is a sub-heading.</h2>
<h2>This is another sub-heading.</h2>
<h3>This is a sub-heading of the h2 sub-heading.</h3>
<h3>This is another sub-heading of the same h2 sub-heading.</h3>
<p>This is the content that appears below the last h3 heading.</p>

Paragraphs

The <p> tag is used to enclose paragraphs of text content.

Like the heading element, the paragraph element is a block element. This means that by default it takes up a whole line on a web page (i.e. it starts on a new line, and so does the element that follows it).

<p>This is a paragraph</p>

Comments

Comments are messages that developers can write in the source code that will not be displayed in the web page by the browser. These might include to-do notes, browser compatibility issues, and messages for other developers looking at the code.

<!-- This is a comment. -->

Links and Attributes

Links, or hyperlinks, are used to link to other resources on the Internet. To tell a link where to direct the user, we must give the HTML link (or anchor) tag an attribute.

This is a <a href="https://mozilla.org/">hypertext link</a>.

HTML elements can have attributes, which are given in the opening tag. These can be used to provide additional information about the element and modify its behavior.

In this case the <a> tag has a href element, and we are giving it a value of “https://mozilla.org” by placing that in double quotes after the equals sign. That is where our link will take the user if they click on it.

The content between the opening and closing tag is what will be linked in the user’s browser. It will by default be underlined and colored differently from normal text.

As opposed to heading and paragraph elements (block elements), a link is an inline element. This means that it does not display on its own line. It should not be on its own line or indented in the code either.

Images

The image HTML element requires two attributes.

<img src="./doge.jpg" alt="A smiling dog." />

The two necessary attributes are src and alt.

The src attribute gives the location and filename of the image to display. In this case it’s doge.jpg and the ./ means it’s in the same directory as this web page.

The alt attribute is used for screen-readers or if the image fails to display. It should always be included for accessibility purposes, except for when the image is purely decorative.

Note that the image tag is self-closing. It is a block element.

Lists and List Items

There are two types of lists in HTML.

Unordered Lists

Unordered lists are lists where the order in which the items are presented is not important or numerically quantifiable. The default presentation of an unordered list is a bullet list.

<p>Subjects to learn:</p>
<ul>
  <li>Helicopter flying</li>
  <li>Kung Fu</li>
  <li>Web Design</li>
</ul>

The <ul> tag is used to create the unordered list itself. Nested within are the list items, contained within <li> tags.

Ordered Lists

Ordered lists are typically numbered and can be used to represent a series of steps, top 10 lists, to-do lists, and other ordered items. The default presentation of an ordered list is a numbered list ascending from the number 1.

<p>Order of The Matrix movies:</p>
<ol>
  <li>The Matrix</li>
  <li>The Matrix Reloaded</li>
  <li>The Matrix Revolutions</li>
  <li>The Matrix Resurrection</li>
</ol>

The <ol> tag is used to create the ordered list. Nested within are the list items, contained within <li> tags.

Line Break

You can create a line break in text using the <br /> tag. This is a self-closing inline element.

<p>This is one line.<br />This is another line.</p>

Horizontal Rules

You can place a horizontal rule (i.e. a line) on a page with the <hr /> tag. This is a self-closing block element.

<hr />

Your Assignment: HTML Cookbook

Your assignment, should you choose to accept it, is to make a HTML cookbook.

If you’ve forgotten how to make a HTML file you can refer to part 1 of this series.

It doesn’t need to be a literal cookbook. It just needs to be a menu page and three more pages on related subjects that follow these rules:

Each page should have headings, an image, at least one paragraph for a description, an unordered list (e.g. the ingredients), and a numbered list (e.g. the steps to follow).

This uses many of the elements we’ve covered. It also requires knowledge of one more thing:

Working With Multiple Files in HTML

The simplest way for us to work with multiple pages in HTML is to put all the files in the same folder. Then to call on the source URL we can just use “./” followed by the file name. e.g.

<img src="./doge.jpg" alt="A smiling dog." />
<p>This is a <a href="./biography.html">good boy</a>.</p>

If we want to be more organized, we can have sub-directories within our website directory. For example, we could have an images sub-directory. Then we would display the image like this:

<img src="./images/doge.jpg" alt="A smiling dog." />

Organizing Your Website Files

When you make your HTML cookbook, you can do it this way:

Make a directory for your project. Inside, make a text file and name it “index.html”. This is the default page that is loaded by a web browser if a web address is specified without a specific HTML filename.

Give your menu page a <h1> and possibly a <h2> heading, and an unordered list of links to the three “recipe” pages you will make.

Now make the recipe pages. Create three text files and give them names ending in .html extensions.

As stated above, each page should have headings, an image, at least one paragraph for a description, an unordered list (e.g. the ingredients), and a numbered list (e.g. the steps to follow). It should also have a link back to the menu page.

As an extra challenge, try storing the images in a sub-directory and displaying them from the parent directory, as described above.

Conclusion

By this stage you should have a working recipe book using pure HTML.

If this article improved your understanding of HTML and you want to see similar content then you need to sign up for my newsletter.

I wish you all the best in your journey of learning and discovery.