- HTML Text Formatting
- Paragraphs and Headings
- Lists
- Quoting a Block of Text
- Formatting Text Inline
- Marking Up Code
- Wrapping Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
Paragraphs and Headings
You were introduced to paragraphs in the last chapter. They are blocks of text that generally contain one idea, in one or more sentences.
To create paragraphs:
Open the boilerplate.html file and save it as chapter4.html.
On a new line after the opening <body> tag, type <p>.
Type This is a paragraph!.
Type </p>.
On a new line, type <p>This is another paragraph.</p>.
On a new line, type <p>This is a third paragraph.</p>.
Save the file, then open it in your browser.
You’ll end up with what you see in FIGURE 4.1.
){kind=link}
FIGURE 4.1 Three blocks of text, formatted as paragraphs in HTML
VIDEO 4.1: HTML with No Elements
To see how much of an impact elements have on a webpage, let’s look at an HTML page that has no markup.
VIDEO 4.2: Creating Paragraphs
As an exercise, create a few paragraphs on a page and then see what they look like in the browser.
VIDEO 4.3: How to Order Headings
Because of the strong semantic meaning associated with headings, they need to be ordered properly.
Headings are slightly different. HTML allows for six levels of headings, with Heading 1 (<h1>) being the most important and Heading 6 (<h6>) the least important (FIGURE 4.2).
)
FIGURE 4.2 All the headings available in HTML, from <h1> to <h6>
The principal role of headings is to create a visual hierarchy on a page. Paragraphs should be organized into sections, with headings at the top of those sections.
Headings also add meaning to the text—meaning that’s important to search engines.
Semantically, there should only be one Heading 1 on a page. As we move down the page, we should make sure to keep our headings in the right hierarchical order.
The smaller the heading number, the bigger the idea it should represent. So <h2> tags should represent only the big ideas on a page.