If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

This chapter introduces some of the fundamental HTML elements and attributes. Each section shows one or more short web pages, which we will modify multiple times to demonstrate how elements work in practice. Before proceeding, you should be comfortable with saving HTML files, editing them in a plain text editor, and viewing the results in a web browser. If you’re not, please review Chapter 1, Getting Started and work through the examples first.

After completing this chapter, you should be able to:

• Create a document with headings, paragraphs, and line breaks.
• Change text color and background color.
• Apply inline and semantic styles to alter text appearance.
• Display images and create links to other web pages.
• Understand more complex elements that require nesting, such as lists.

This chapter is organized into the following sections:

Paragraphs and Line Breaks

Introduces the paragraph and line break elements, with examples of correct and incorrect usage.

Headings

Explains heading elements and why it’s important to close your tags properly.

Font Styles

Shows how to control font appearance. We’ll cover inline vs. block elements and compare physical styles (e.g., b, i) with logical, semantic styles (e.g., strong, em).

Colors

Explains how to set text and background colors for a page, paragraph, or individual words. Examples include named colors and hex codes, and we’ll discuss best practices.

Links

Breaks down URLs, explains relative vs. absolute links, and shows how to link to specific sections within a page using IDs.

Images

Shows how to embed images, resize them, and control their layout, including floating images relative to surrounding content.

Lists

Introduces ordered, unordered, and definition lists. This is our first example of elements that require proper nesting to display correctly.