Adding Text

Adding text to a page is very easy. Simply place the text anywhere inside of the <body> element, and the text will show up on the page!

Result:

While this works, there are better options that apply additional formatting.

Paragraphs

The paragraph <p> element is used for paragraphs. Place the text you want to display in between the open and close tags.

Result:

Line Breaks

In <p> blocks, pressing enter to add new lines won't show up visually when displaying the HTML. To add a line break, use a line break <br> element.

Result:

Horizontal Rule

To add a horizontal line between two paragraphs, the horizontal rule <hr> element can be used.

Result:

Headers

To add headers to your page, the header elements can be used. These will be displayed as large text.

There are 6 header elements, <h1>-<h6>. <h1> is the largest header, progressively getting smaller as the number increases.

Result:

Caution

When using headers, there are a number of accessibility concerns! They are used for navigation and by screen readers, so care should be used to ensure that you use headers correctly. Here are a quick few things to keep in mind.

Only have one <h1> header per page.
Don't skip header levels! If you have an <h3>, you need an <h2> and an <h1>.

For more detailed information, please view the MDN web docs page on headers

Inline Elements

Elements that can be placed inside of other elements without disrupting their flow are called inline elements. There are many inline elements that can be used to style text, such as underlining a section, or making a word bold.

Note

While these elements can be used for stylizing text, these elements should be used based on their semantic meaning instead.

HTML is purely the content of the page. It can contain styling information, but for a variety of reasons, how things should be displayed should be done in CSS as much as possible. Separating the content from the style means that it is easier to go back and change how things look without modifying HTML. It also makes things more clear to screen readers.

All of the elements included below are fairly safe to use for stylization, but it's important to keep this in mind for the future.

Strong (Bold)

For text that is significant, the strong <strong> element can be used. Most browsers will display this text as bold.

Result:

Italics

To italicize text, the idiomatic text <i> element can be used.

Result:

Strikethrough

To put a line through text, use the strikethrough <s> element. This should be used for text that is no longer accurate.

Result:

Warning

The strikethrough element is often ignored by screen readers! To keep things accessible, add additional context outside of the strikethrough element.

For more information, please view the mdn web docs page for the strikethrough element

Span

Sometimes it is useful to have an inline element without any default styling. For this, the span <span> element can be used.

Result:

This element becomes very useful later when we learn styling.

Container Elements

Aside from paragraph elements, there are many other semantic containers you can use!

These containers are used for marking which parts of the page are what, and typically lack any default formatting. These are useful for screen readers to determine which parts of the page are important, and the purpose behind sections. They also make it easier for you to read your HTML!

Some of the containers you can use are:

<main>: The main content of the page
<section>: A generic section of the page
<article>: An important section of the page
<aside>: A section of the page unrelated to its contents
<header>: The heading of the section
<footer>: The footer of the section

Divs

Often it is useful to have a container without any default special styling. The content division <div> element can be used for this!

Caution

Using CSS, you could use <div> elements for nearly everything. However, this has serious accessibility concerns!

Different container elements have different semantic meanings. These meanings are used by screen readers to detect and process information. The different elements also make HTML much easier to read for developers. By using <div> elements for everything, you make your page less accessible, and you make your HTML much harder to read.