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

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

Working with Text in HTML5

  • Print
  • + Share This
  • 💬 Discuss
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.

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

red_circle-a.jpg 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>
04_01.jpg

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

  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