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:

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>

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

Headings¶§

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.

Headings - 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!