# Part 2 - More HTML elements¶§

## Nested elements¶§

HTML elements can be nested (elements can contain other elements).

Example:

<em> This is a <strong>very important</strong> paragraph.</em>


And this is the result:

This is a very important paragraph.

## Nested elements: be careful!¶§

However, be careful when you include an element in another.

For example, this is not correct:

<em> This is a <strong>very important</em> paragraph.</strong>

This is a very important paragraph.

When incorrectly nested, Weird behavior and unexpected errors can occur!

We have already seen the h1 element to define a title (headings).

You can have several levels of headings in your document: use h2 for second level, h3 for third level and so on.

Open page2.html and edit the document to include headings.

• “What will I learn today?” should be a level 1 headings.
• “About the web”, “About HTML”, and “About CSS” should be level 2 headings.

On the slide, you will see the expected result.

## Lists¶§

HTML defines two types of lists: ordered lists (ol), and unordered lists (ul).

In both, a list item is identified by the li element.

Let’s see some examples.

## Ordered list¶§

<ol>
<li>Code</li>
<li>Test</li>
<li>Be proud!</li>
</ol>

1. Code
2. Test
3. Be proud!

## Unordered list¶§

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>

• HTML
• CSS
• JS

## Make your own lists¶§

Open page2.html and use the elements you’ve just discovered to add lists.

The text is already written for you.

The expected result is shown just after.

## Make your own lists - expected result¶§

If you have time, add a link from this page to page2.html, and from page2.html to this page!

## Summary and a piece of advice¶§

• Make sure your elements are correctly nested!
• (Nearly) all elements must be closed (except in some very rare cases such as img).
• Piece of advice: have you tried F12 on your web browser? It is sometimes helpful... especially when you have a bug!