Part 2 - More HTML elements§

1

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.
2

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!

3

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.

On the slide, you will see the expected result.

4

Headings - expected result§

expected result with headings
5

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.

6

Ordered list§

<ol>
  <li>Code</li>
  <li>Test</li>
  <li>Be proud!</li>
</ol>
  1. Code
  2. Test
  3. Be proud!
7

Unordered list§

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

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.

9

Make your own lists - expected result§

expected result with lists

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

10

Summary and a piece of advice§

11