Working with Text in HTML5
- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- 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 Web pages 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 just a bonus. If not, just override the default formatting with your own CSS.
Starting a New Paragraph
HTML does not recognize the returns or other extra white space that you enter in your text editor. To start a new paragraph in your Web page, you use the p element (
and 
).
Not surprisingly, p is one of the most frequently used HTML elements.
...
<body>
<article>
<h1>Antoni Gaudí</h1>
<p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p>
<p>Barcelona celebrated the 150th anniversary of Gaudí's birth in 2002.</p>
<h2>La Casa Milà</h2>
<p>Gaudí's work was essentially useful. <span lang="es">La
Casa Milà</span> is an apartment building and real people live there.</p>
<h2>La Sagrada Família</h2>
<p>The complicatedly named and curiously unfinished Expiatory
Temple of the Sacred Family is the most visited building in Barcelona.</p>
</article>
</body>
</html>
Here you see the typical default rendering of paragraphs. As with all content elements, you have full control over the formatting with CSS.
To begin a new paragraph
- Type <p>.
- Type the contents of the new paragraph.
- Type </p> to end the paragraph.