Learning HTML
- Part 1: Headings and Paragraphs
- Part 2: HTML Anatomy and Nesting Elements
- Part 3: Attributes
- Part 4: Layout
- Part 5: Links and Document Structures
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
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.
CodePen Example:
See the Pen Learning HTML: HTML Anatomy and Nesting Elements by Dan Cox (@videlais) on CodePen.
Digital Ephemera 