More tags

Now with an understanding of the fundamental structure of and HTML page, let's look at a few more common tags and their uses.

Text formatting

We previously looked at the <p> tag and its use for defining paragraphs. sometimes we need to highlight one or just a few words within a paragraph. That's where text formatting tags can be useful.

these formatting elements are designed to highlight special types of text:

• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

Try adding some of the other formatting tags to the paragraphs in the codepen below.

heading tags

Heading tags are as the name suggests used to define headings. Heading tags range from <h1> (most important) to <h6> (least important). The block elements so will start on a new line and use the full width of the viewport.

take a look at the code pen below to their default styling. Try adding a new heading after heading 6, using your name.

Lists

The two most common types of lists used in HTML are ordered (or numbered) lists or unordered lists. unordered lists are displayed with a bullet point by default.

A <ul> tag is used to define an unordered list and an <ol> tag is used to define an ordered list.

items in the list are written within <li> tags.

Try adding some new items to lists in the code pen below.

What happens if you add a step between 2 and 3 of the ordered list?

notice how the list numbering will always be in order.

There is another list type called a description list, which list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term, for examples:

<dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
</dl>

Try copying the code above into the previous codepen to see the results.