Working with Text in HTML
- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Unless a site is heavy on videos or photo galleries, most content on webpages is text. This chapter explains which HTML semantics are appropriate for different types of text, especially (but not solely) for text within a sentence or phrase.
For example, the em element is specifically designed for indicating emphasized text, and the cite element’s purpose is to cite works of art, movies, books, and more.
Browsers typically style many text elements differently than normal text. For instance, both the em and cite elements are italicized. Another element, code, which is specifically designed for formatting lines of code from a script or program, displays in a monospace font by default.
How content will look is irrelevant when deciding how to mark it up. So, you shouldn’t use em or cite just because you want to italicize text. That’s the job of CSS.
Instead, focus on choosing HTML elements that describe the content. If by default a browser styles it as you would yourself with CSS, that’s a bonus. If not, just override the default formatting with your own CSS.
Adding a Paragraph
HTML does not recognize the returns or other extra whitespace that you enter in your text editor. To start a new paragraph in your webpage, you use the p element (
and 
).
Unsurprisingly, p is one of the most frequently used HTML elements. (Note: In practice, I would wrap an article around this particular content. I omitted it to make the example generic and to avoid giving the impression that p elements must always be nested in an article.)
)
Here you see the typical default rendering of paragraphs. By default, browsers provide vertical space between headings and paragraphs, and between paragraphs themselves. As with all content elements, you have full control over the formatting with CSS.
To create a new paragraph
- Type <p>.
- Type the contents of the new paragraph.
- Type </p> to end the paragraph.