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.

---

Introduction

Entries in HTML are called tags. These enclose text or otherwise provide information about the elements to which they are associated.

Using HTML can be thought of, in one way, as “marking up” (adding code) to an existing text document to change its layout, presentation, and general formatting for a web browser to understand.

Terminology

Document: A collection of HTML tags, text, and/or other media in one file.

Tags: the code that “goes around” some selection or which describes some type of media.

Elements: Both the selection and the tags themselves.

Headings

One of most ubiquitous sets of tags in HTML are the headings.

Headings start with <h1> and increase up to <h6>. By default, and as influenced by other things like web browser accessibility settings, they scale down by 33% in size per level of heading.

Headings, like other tags, go around and “mark up” the text. By putting an opening tag, <h1>, the text, and a closing tag, </h1>, on a line, it will become that heading.

Using Headings

Consider the following text:

Headings

One of most ubiquitous sets of tags in HTML are the headings.

Without some way to “mark up” the text to show which part is the heading and which is content within that selection, the text is visually confusing.

Paragraphs

Like headings, there is also a paragraph tag, <p>.

The paragraph tag, like as its name implies, “goes around” paragraphs. When used with headings, it can mark which selections are headings and which should be considered paragraphs.

CodePen Example:

See the Pen Learning HTML: Headings and Paragraphs by Dan Cox (@videlais) on CodePen.

Mozilla Thimble Example:

Remix on Mozilla Thimble!