Headings and Lists

Headings

The HTML standard has h1 element as well as five additional text heading elements, appropriately named h2 through h6.

It should be noted that heading elements should not be used to manipulate the font size of a heading. Rather, the levels represent semantically the difference between a main header, sub-header, etc. To practice good style, you shouldn’t skip heading levels when structuring your HTML pages. In other words, an h2 element should be used for a header one level below an h1 element, an h3 element should be used a level below h2, and so on.

Lists

Often times we will want to include a bulleted or numbered list in web page content. This can be accomplished with HTML lists.

Unordered lists

We could create an unordered list to represent things like a list of to-do items or a list of grocery items. To do this, we must use the <ul> tag, with nested <li> tags for the list items.

Ordered lists

An ordered list should be used when the items in the list go in a particular order, like turn-by-turn instructions on a navigation system, or steps in a recipe. An ordered list is fairly similar to an unordered list, except we will want to use the <ol> tag to declare the list. List items are still wrapped in an <li> tag. The list items will be numbered, rather than the bulleted items we saw previously.

List element attributes: type and start

The type attribute allows us to change the style of either the bullets for unordered lists or the numbering scheme for ordered lists. Unordered list type values include circle, disc, and square.

Ordered list type values can be used to change the numbering scheme, and include the following:

• 1: Default numeric scheme
• I: Upper-case roman numerals
• i: Lower-case roman numerals
• A: Upper-case alphabet
• a: Lower-case alphabet

Ordered lists have an additional start attribute, that can be used to start the numbering at a value other than the default of 1.

Exercise

Create a page that describes a recipe for making omelets.

• Use a main-level header for the recipe name.
• Use two sub-headers:
  1. One named Ingredients
  2. One named Instructions
• Create an unordered list with square bullets containing the ingredients.
• Create an ordered list with lowercase Roman numerals with the instructions for cooking the omelet.

Note: The output will be dynamically generated in the space below once you start typing the code.