Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

Working with Text in HTML

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book
This chapter from HTML and CSS: Visual QuickStart Guide, 8th Edition explains which HTML semantics are appropriate for different types of text, especially (but not solely) for text within a sentence or phrase.

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 (red-a.jpg and red-b.jpg).

red-a.jpg 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.)

088figb.jpg

Click to view larger image

red-b.jpg 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

  1. Type <p>.
  2. Type the contents of the new paragraph.
  3. Type </p> to end the paragraph.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus