Learning HTML: Part 2: HTML Anatomy and Nesting Elements

Learning HTML

HyperText Markup Language (HTML) is the de facto language of web documents. Created in part from existing languages and tools in 1991, it first became standardized in 1995 and has grown in popularity and usage over the last decades. Nearly all webpages are now written in HTML, and it is understood by all major web browsers.


HTML Anatomy

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.

Screenshot 2018-09-08 14.47.59

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

Screenshot 2018-09-08 14.50.11

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.

Screenshot 2018-09-08 14.54.43

 

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.

Screenshot 2018-09-08 14.54.43

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

Screenshot 2018-09-08 15.27.16

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.

Screenshot 2018-09-09 12.20.46

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.

Screenshot 2018-09-09 13.05.19

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.

Screenshot 2018-09-09 13.09.44

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

CodePen Example:

See the Pen Learning HTML: HTML Anatomy and Nesting Elements by Dan Cox (@videlais) on CodePen.

Mozilla Thimble Example:

Remix on Mozilla Thimble!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s