Page content

The main page content appears inside the body tag. HTML contains several elements that allow you to properly structure and format your content which we'll cover later.

Page content

The main page content appears inside the body tag. HTML contains several elements that allow you to properly s structure and format your contentm which we'll cover later.

What am I?

HTML Essential Training

Formatting page content

In this series of exercises, we'll explore how to use HTML elements to format basic page content.

Adding headings

Headings help define the structure of the page and control the hierarchy of the content. You can use heading values ranging from a top-level heading of h1 all the way down to an h6. While there are several competing theories on the exact strategy to use when choosing headings, what really matters is that you are using them in an intelligent manner, to accurately reflect the importance of your content. It's also important to be consistent in how you use headings across your site, so deciding on when and how to use headings is an important part of planning your site.

Using paragraphs

The paragraph tag (⟨p⟩) is one of the most basic formatting tags, and one that you'll use often. It indicates a paragraph of text, and should be used for each individual paragraph.

Line breaks

Occasionally you'll need to perform a "soft return," that is, create a new line without using a new paragraph. To do that in HTML, you use the line break tag (⟨br⟩). Line break tags are inline, meaning you can use them within headers and paragraphs, and don't require a closing tag. Let's say you were formatting an address, for example. You could use line breaks to make sure each line of the address appeared on a separate line, but still remained within the same paragraph. lynda.com 6410 Via Real Carpinteria, CA 93103.

HTML Essential Training

Formatting page content

In this series of exercises, we'll explore how to use HTML elements to format basic page content.

Adding headings

Using paragraphs

The paragraph tag (⟨p⟩) is one of the most basic formatting tags, and one that you'll use often. It indicates a paragraph of text, and should be used for each individual paragraph.

Line breaks

Let's say you were formatting an address, for example. You could use line breaks to make sure each line of the address appeared on a separate line, but still remained within the same paragraph.

lynda.com
6410 Via Real
Carpinteria, CA 93103.

HTML Essential Training

Formatting page content

In this series of exercises, we'll explore how to use HTML elements to format basic page content.

Emphasizing text

Often you will want to emphasize a particular phrase or word within your text. HTML gives you several different tags to do this with. In this exercise we'll explore the four most common formatting tags you'll use to emphasize content.

The Bold Tag: The bold tag (⟨b⟩) is mean to represent a span of text that you wish to set apart stylistically from the rest of the text without inferring any type of special relevance or meaning. It was removed in XHTML as being solely presentational, but added back to HTML5. As you would expect, browsers typically bold this text.
The Strong Tag: By using the strong tag (⟨strong⟩) you are representing a string of text as having strong importance. The text should be considered to be more important than the text surrounding it. It is typically displayed as bold.
The Italic Tag: Like the bold tag, the italic tag (⟨i⟩) represents a string of text that is set apart stylistically from the text around it. No particular meaning is attached to the text, rather it is rendered in italics. Helpful for phrases, terms, or any text that is normally displayed in italics.
The Emphasis Tag: The emphasis tag (⟨em⟩), or "em" tag, denotes text that is emphasized more than the text around it. Although this tag is usually rendered in italics, it shouldn't be used in place of the italics tag, rather it should be used for text that needs to emphasized for some reason.

Wait.... what?

You're probably wondering why there are multiple tags for bolding and italicizing text. If you are, don't worry, you're not alone! This is one of the most confusing aspects of learning HTML. The easiest way for me to explain it is this: One set of tags is presentational, while the other is logical. What that means is that presentational text doesn't convey explicit meaning, it merely serves to change the styling of the text. Logical elements however do convey a specific meaning. Text that is either bold or italic are just that, bold or italic. Text that is represented with a strong or em tag can represent multiple states. Using styles, for example, you could change it so that the text is underlined or highlighted. By contrast, it wouldn't make much sense to change the styling of a bold or italic element, since hey are represented exactly as intended.

There are other elements you'll need to research when learning about emphasizing text as well. The cite tag (⟨cite⟩), for example, is used for citing a work such as a book title, or an author, and is usually displayed as italicized text.

HTML Essential Training

Formatting page content

In this series of exercises, we'll explore how to use HTML elements to format basic page content.

Displaying special characters

Certain characters are reserved for HTML, meaning that you aren't allowed to use them in regular content. Using a left angle bracket like this "⟨" in your code can cause rendering issues in certain situations. Other characters are special characters or symbols that might not be available through the keyboard, or are used by other languages. To represent those characters in normal text, you can use what are known as named character entities.

These are special codes that the browser or user agent will then replace with the requested character. The syntax for them is relatively straightforward. You start with an ampersand (&) followed by the named entity that is then followed by a semicolon. To display an ampersand, for example, you would type in &. This can be extremely helpful when displaying © and ™ symbols, or writing mathematical formulas.

You can find a very thorough list of named character entities on Wikipedia.

HTML Essential Training

Formatting page content

In this series of exercises, we'll explore how to use HTML elements to format basic page content.

Controlling white space

By default, browsers will ignore any white space after the first space. To add additional white space, you must use the   entity.

Try it here. Add as much white space as you want here.

Keep in mind that the primary purpose of the non-breaking space is to inform browsers when a line break shouldn't occur during a string of text. For example, adding a non-breaking space between Formula One would ensure that a line break never occurs that would split up the words Formula and One. To that end, never use the non-breaking space character to control paragraph indentations or fake a tab character. CSS should control that type of visual formatting.

HTML Essential Training

Formatting page content

In this series of exercises, we'll explore how to use HTML elements to format basic page content.

Inserting images

Images are placed on the page through the use of the img tag. Images are considered replaced content, that is the element is replaced with the asset it references. The image element has several important attributes. The src attribute is used to tell the browser where to find the image. The alt attribute allows you to pass along descriptive text representing the image. This can be used by screen readers, or displayed in the event the image fails to load.The width and height are optional and can be used to pass the dimensions of the image to the browser. If omitted, the browser will still display the image at its native width and height. These values can be changed to force the browser to size the image differently from it's native size.

Most browser support a wide range of image types. For the most part, you're safe using jpg, png, gif, bmp, and svg image formats.

Insert a new image beside this text.