5. HTML Tags – Part 2

How To Make a HTML List

In web development, there are 3 different types of lists which you may wish to add to your website.

Ordered List

The first is an <ol>, or Ordered List of contents. For example:

1. First item
2. Second item
3. Third item

Inside the <ol> tag, we list each ordered item inside the <li> and </li> tags.

Here is the complete code for constructing an Ordered List:

Try to run this code in Repl.it:

Unordered List

The second type of list that you may wish to include is an <ul>, or Unordered List of contents. This is better known as a bullet point list and contains no numbers. An example of this is:

• An item
• Another item
• Yet Another item

Similar to an Ordered List, inside the <ul> tag, we list each unordered item inside the <li> and </li> tags.

Here is the complete code for constructing an Unordered List:

Try to run this code in Repl.it:

Description List

Finally, you may wish to include a <dl>, or Description List of contents, on your page. An example of a <dl> is the following:

Gryffindor

Courage, Bravery, Nerve, and Chivalry

Hufflepuff

Hard Work, Patience, Justice, and Loyalty

Ravenclaw

Intelligence, Creativity, Learning, and Wit

Slytherin

Ambition, Cunning, Leadership, and Resourcefulness

Unlike an Ordered List, <ol>, or Unordered List, <ul>, instead of List Items, <li>, a Description List, <dl>, has Description Terms, or <dt>, which specifies a term in the description or definition list; as well as Description Definition, or <dd>, which provides the description, definition, or value for the preceding term <dt> in a description list <dl>. A common way of picturing a Description List is that of a Vocabulary List with new vocabularies and their corresponding definitions listed under each new term.

Here is the complete code for constructing a Description List:

Try to run this code in Repl.it:

How To Add Tables In HTML

What Does a HTML Table Consist of?

When constructing a HTML table, we must open the table element with the <table> opening tag. Inside this element, we structure the table using the Table Header tags, <th>, Table Row tags, <tr>, and Table Data cell tags, <td>. At the end, we wrap up the table element with the </table> closing tag.

Here is an example of a HTML table:

We describe the HTML table above as a 3-row table with 3 cells in each row.

Here is the complete code to how this table is constructed:

Try to run this code in Repl.it:

A List of Other Important Table Tags:

In addition to the table tags listed above, there are a few more important ones to keep in mind as your skills develop.

The table below lists all the other important table tags – pun totally intended. 🙂

Adding Comments within HTML

<!-- <h1>This is a HTML comment</h1> -->

The code snippet above includes an exclamation point and dashes within the HTML, the entire <h1> element, in this case, is treated as a comment and not as an element. It simply means that this element is not shown in the browser.

HTML (and CSS which we will discuss in next chapter’s checkpoint and beyond) gives us the ability to leave comments within our code. Since any content wrapped within a comment will not be displayed on the web page, comments keep our files organized, set reminders for ourselves and others, and more effectively manage our code. Comments are especially useful when there are multiple team members working in the same files. It is also a good way to leave hints for other team members in the event that your code is complex and difficult to understand.

HTML comments start with <!-- and end with -->.

Here is a HTML Comment example in action:

Try to run this code in Repl.it:

Paragraphs

Headings are often followed by supporting paragraphs. Paragraphs are defined using the <p> block-level tag. Paragraphs can appear one after the other, adding information to a page as desired. Here is an example of how to set up paragraphs using the paragraph tag <p>.

Try to run this code in Repl.it:

Bold Text with Strong

To make text bold and/or place a strong importance on it, we’ll use the <strong> inline-level tag. There are two elements that can make the text appear bold for us: the <strong> tag and the <b> tag. Let’s take a look at the semantic difference between the two.

The <strong> tag is semantically used to give strong importance to text. It is therefore the most popular option for bolding text. The <b> tag, on the other hand, semantically means to stylistically offset text. This isn’t always the best choice for text that deserves prominent attention. We have to gauge the significance of the text we wish to set as bold and to choose a tag accordingly.

Here are the two HTML options for creating bold text in action:

Try to run this code in Repl.it:

Italicize Text with Emphasis

To italicize text, thereby placing emphasis on it, we’ll use the <em> inline-level tag. As with the tags for bold text, there are two different tags that can italicize text, each with a slightly different semantic meaning.

The <em> tag is used semantically to place a stressed emphasis on text; it is thus the most popular option for italicizing text. The other option, the <i> tag, is used semantically to convey text in an alternative voice or tone, almost as if it were placed in quotation marks. Again, we need to gauge the significance of the text we want to italicize and choose a tag accordingly.

Here’s the HTML code for italicizing in the two ways described above:

Try to run this code in Repl.it:

Header Tag

The <header> tag, just like how it sounds, is used to identify the top of a page, article, section, or other segment on a webpage. In general, the <header> tag may include a heading, introductory text, or even navigation.

In practice, it looks like the following:

<header>...</header>

<head> vs. <header> vs. <h1> through <h6> Tags

Often times, many confuse the <header> tag with the <head> tag, or with the heading tags (<h1> through <h6>). They all have different semantic purposes and should be used as such. To summarize:

The <head> tag is not displayed on a webpage and is instead used to outline metadata (<meta>), including the document title (<title>) and links (<link>) to external files. It falls directly within the <html> tags.

The <header> tag is a structural tag that outlines the heading of a segment on a webpage. It falls within the <body> tags.

Heading tags, <h1> through <h6>, are used to designate multiple levels of text headings throughout a webpage.

For a complete illustration, take a look at the following example:

Try to run this code in Repl.it: