HTML Anatomy and Nesting Elements
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
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
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.
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.
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.
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.
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.
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.
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.
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 Links to an external site.!