Learning Objectives:

In this section, students will:

Learn about the differences between tags and elements
Review the ways in which elements can be nested
Begin to use nested elements to write ordered and unordered lists in HTML

HTML Anatomy

HTMl Anatomy

Generally, HTML tags follow a simple structure: there is an opening tag, the content of the element, and a closing tag. The opening tag identifies the type of element and the closing tag has a slash, /, that signals the tag is now closed.

Most tags in HTML follow this pattern. However, like all languages, there are some exceptions to the rules.

HTML Tag

HTML Tag

On a larger scale, HTML documents follow this same rule. They start with a HTML tag and, at the end of the document, this tag is closed.

In fact, HTML documents are constructed like a human body. They have a head and body.

HTML Body

When learning HTML, it is often helpful to think of a document in this metaphor. The “guts” of a document go in the “body”. Most of the time, when writing tags in HTML document, these will go in the BODY.

Information about the document itself go in the HEAD.

HTMl Head

Nesting Elements

Looking at the examples, some tags are inside others. This is called nesting.

In HTML, nesting elements is an important concept and central to how much of the language works. Elements can be inside other elements.

In fact, as shown in the section HTML Anatomy, most of the tags written in a document will be inside the BODY element.

Nested Elements with White Space

Nesting is also important because spaces and empty lines are ignored between tags in HTML. Elements are only understood in relation to themselves and others around them.

Nested Styling

Beyond the use of the headings and paragraph tag introduced in Part 1, there are also two other common tags: STRONG and EM.

Originally, in earlier versions of HTML, there were two tags called B (for Bold) and I (for Italics). However, in the most recent versions of HTML, these have been replaced with the more generic STRONG and EM.

By default, using the STRONG tag makes text Bold and using the EM tag gives text an emphasis, often represented as italics.

Nested Style Tags

These two tags, STRONG and EM, are examples of nested elements. They are two of many that can go inside an element, in this example the paragraph tag, to style text within that element.

Lists

Some tags depend on the concept of nested elements. Creating different types of lists in HTML, for example, use the concept of nested elements to show the start of the list and then for each item in the list.

Ordered Lists

In HTML, an ordered list is one which uses numbers to show its order. As with many HTML tags, it uses an abbreviation for its tag name: OL.

Ordered Lists

The tags within an ordered list are line items (li). They have their own tags and are nested within the greater ordered list.

Unordered Lists

The sister to ordered lists are the unordered lists. Written like ordered lists, their tag name is UL.

Unordered Lists

They also use line item (li) and are nested like ordered lists.

Play with the Code:

Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.

See the Pen <a href="https://codepen.io/videlais/pen/OozPgV/">Learning HTML: HTML Anatomy and Nesting Elements</a> by Dan Cox (<a href="https://codepen.io/videlais">@videlais</a>) on <a href="https://codepen.io">CodePen</a>.

Try it Yourself:

Based on the example created in Module 1, create or re-write your CV using STRONG, EM, and UNORDERED LIST tags.

Under the subheading of “Skills”, change the skills from paragraphs into a unordered list
For each skill, use STRONG or EM around its name.

Test your response on Mozilla Thimble!

Video: