HTML5 – HTML5 Formatting: Publish Text-Based Content

Next, let’s cover text publishing tags in HTML5, which allow developers to control text-based content with styling, superscript and subscript, line and word breaks, quotations, abbreviations, citations, and the like. These text-related tags allow you to define document content without having to use stylesheets for styling purposes.

In this chapter, I go over the key tags to implement text-based content in HTML. The paragraph <p> tag defines blocks (paragraphs) of text; it was already covered in the book. The other text-related tags in this chapter include those for formatting text, styling text, breaking (separating and spacing) text, sizing text, text direction, quotations, citations, and special types of text circumstances.

Create HTML5 Text Content for Publishing

This chapter covers the text-related tags in HTML5 used for creating text content for publishing in documents, websites, or applications. Most were supported in legacy versions of HTML. A couple of the tags are new in HTML5; I’ll point these out.

These text tags are child tags of the semantic tags

covered in Chapter 10. Your text-based content is encapsulated (wrapped) in standardized semantic containers, so that search engine robots (indexing and ranking algorithms) can optimally implement Web 3.0 and the future of the Internet— semantic
search

.

Table 11-1 shows tags for creating, formatting, styling, and publishing text-based content. They are categorized into seven logical areas: text formatting, text styling, text breaking (separating, spacing), text sizing, text direction, text quotation, text captions (titles), and tags for special circumstances.

Table 11-1. Twenty HTML and HTML5 Text Content Publishing Tags

Text Content Tags

Text Content Tag Standard Usage

p

Specifies a paragraph of text content

pre

Specifies pre-formatted text content

abbr

Specifies an abbreviation

b

Specifies the bold style for the text content

i

Specifies the italics style for the text content

u

Specifies the underline style for the text content

br

Specifies a line break (new line, carriage return)

wbr

Specifies a word break opportunity for long words

small

Specifies a small text style for that text content

sub

Specifies subscript text style for text content

sup

Specifies superscript text style for text content

bdi

Specifies bidirectional isolation for text content

bdo

Specifies bidirectional override on text direction

q

Specifies a short quotation for the document

blockquote

Specifies a long (block) quotation for document

cite

Defines a title (citation) for a published work

data

Specifies human-readable and machine-readable data

s

Specifies text that is no longer accurate/relevant

del

Specifies text content which has been deleted

ins

Specifies text content which has been inserted

Let’s go over each of these content publishing tags—one logical section at a time.

HTML5 Text Formatting: Paragraph, Pre, and Abbr

The first three tags tell the rendering engine how to format the text: as a block or paragraph of text; as a pre-spaced or specially formed arrangement of text; or as abbreviated text with an optional mouse-over definition. These tags are shown in the first section in Table 11-1.

Let’s cover the paragraph <p> tag

first because it’s the most commonly used text-related tag in HTML5 document, website, and application design. Before HTML5, this tag had the align parameter, which supports left, right, center, and justify.

The align parameter

was supported in pre-HTML5 versions, but it is not supported in HTML5. As I’ve mentioned, the trend in HTML5 and later versions is to use CSS3 to provide element (tags) styling, and for HTML5 tags to focus on the definition of the semantic content.

Let’s start a new “publishing text content” example HTML document that uses the semantic and SEO tags you learned to define a header paragraph

showing a text paragraph. This is done in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>            
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a paragraph, containing text sentences. It is
       possible to have more than 1 sentence in a paragraph, of course!</p>            
  </header>
 </main>            
</body>
</html>

For legacy HTML markup, you can use an align parameter, as shown in the following HTML 4.01 (and previous versions) markup:

<p align="left">This is an example of a paragraph containing 2 sentences.
 It is possible to have more than 1 sentence in a paragraph, of course!</p>            

Let’s cover the preformatted <pre> tag next, because it’s the least commonly used text-related tag in an HTML document, website, and applications design. Before HTML5, this tag used the width parameter, which defines a maximum width for each line of preformatted text. This tag maintains the character spacing, so it doesn’t “collapse” multiple space characters into one space.

The width parameter is not supported in HTML5.

Let’s use a <pre> tag

to create fun, text-based character art in the shape of a pine tree, often popular during the holiday season, as shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>            
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a paragraph containing text sentences. It is
       possible to have more than a sentence in a paragraph, of course!</p>
  </header>
  <article>            
   <h2>Pre-format Text: Maintaining Precise Character Spacing</h2>
    <p>You can use a PRE Element to implement character art, like this:</p>
    <pre>            
              88  
             8888  
             8888  
            888888  
           88888888
          8888888888
        8888888888888
      88888888888888888
    888888888888888888888
          8888888888
        88888888888888
    8888888888888888888888
 8888888888888888888888888888
        888888888888888
       88888888888888888
     888888888888888888888
  888888888888888888888888888
88888888888888888888888888888888
       888888888888888888  
      88888888888888888888
    888888888888888888888888
  8888888888888888888888888888
 888888888888888888888888888888
8888888888  8888888  88888888888
             88888
             88888
             88888
          88888888888
   </pre>            
  </article>            
 </main>            
</body>
</html>                                                                                          

Next, let’s take a look at the abbreviation <abbr> tag.

Let’s use the <abbr> tag

to create an abbreviation for the second <article> section in this example. Use the title parameter so that the abbreviation is defined in a mouse-over:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>            
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a paragraph containing text sentences. It is
       possible to have more than a sentence in a paragraph, of course!</p>
  </header>
  <article>            
   <h2>Pre-format Text: Maintaining Precise Character Spacing</h2>
    <p>You can use a PRE Element to implement character art, like this:</p>
    <pre>
              88  
             8888  
             8888  
            888888  
           88888888
          8888888888
        8888888888888
      88888888888888888
    888888888888888888888
          8888888888
        88888888888888
    8888888888888888888888
 8888888888888888888888888888
        888888888888888
       88888888888888888
     888888888888888888888
  888888888888888888888888888
8888888888888888888888888888888
       888888888888888888  
      88888888888888888888
    888888888888888888888888
  8888888888888888888888888888
 888888888888888888888888888888
8888888888  8888888  88888888888
             88888
             88888
             88888
          88888888888                                                          
   </pre>
  </article>            
  <article>            
   <h3>Abbreviated Text: Using the ABBR Tag to Describe this Pine Tree</h3>
    <p>Christmas Tree is also <abbr title="Christmas">XMAS</abbr> Tree!</p>
  </article>            
 </main>            
</body></html>

Next, let’s take a look at text styling elements (tags).

HTML5 Text Styling: Bold, Italics, and Underline

The next three tags tell the rendering

engine how to style the text characters, either as a bold block of text, an italicized block of text, or as an underlined block of text. These HTML tags can also be used in combination with each other. They are shown in the second section of Table 11-1.

Let’s cover the bold tag first because it’s the most commonly used text-related tag in HTML document, website, or application design. Let’s bold the word “paragraph” in the original example by surrounding that word with the <b> and </b> tags. This is shown in the following HTML markup example (it can also be used in HTML5):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a <b>paragraph</b> containing text sentences.
       It’s possible to have more than 1 sentence in a paragraph.</p>
  </header>
 </main>
</body>
</html>                                                                      

To bold an entire block of text within the sentence, you include additional words inside your starting and ending tags:

<p align=left>An <b>example of a paragraph</b> containing text sentences.
              It’s possible to have more than 1 sentence in a paragraph.</p>
Note

From the W3C website (
www.w3schools.com/tags/tag_b.asp
): “According to the HTML 5 specification, this <b> tag should be used as a last resort, when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted using the <em> tag, important text should be denoted with a <strong> tag, and marked/highlighted text should use a <mark> tag.”

Now let’s discuss the italics <i> tag and italicize the word “possible” in the original example by surrounding it with the <i> and </i> tags. This is shown in the following HTML5 markup (it can also be used in previous versions of HTML (2.0, 3.2, and 4.01)):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a <b>paragraph</b> containing text sentences.
     It’s <i>possible</i> to have more than 1 sentence in a paragraph.</p>
  </header>
 </main></body></html>                                                                      

To italicize an entire block of text within a sentence, you should include more words inside of the starting and ending tags, as I have done here, around the “text sentences” text:

<p>An <b>example of a paragraph</b> containing <i>text sentences</i>.            
   It’s <i>possible</i> to have more than 1 sentence in a paragraph.</p>

Let’s cover the underline <u> tag next, since it is the least commonly used text-related tag in HTML5 documents. The reason for this is because the anchor <a> tag (link) default is an underlined link, and therefore, using the <u> tag to underline text is likely to confuse users into thinking that that text represents a link. When a user clicks underlined text and nothing happens, it looks as if there is a coding (markup) error. Therefore, convention is not to use the underline tag unless it is absolutely necessary.

Let’s underline the word “possible” in the original example by surrounding that word with the <u> and </u> tags. It looks like following HTML5 markup (it can also be used in previous versions of HTML):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>An example of a <b>paragraph</b> containing <i>text sentences.</i>
     It’s possible to have <u>more than 1 sentence</u> in a paragraph.</p>
  </header>
 </main></body></html>

Let’s cover the line break and word break tags next.

HTML5 Break Tags: Line Break and Word Break

The next two tags tell the rendering engine how to break the text apart, either using a new-line and carriage return to create a
line break

, or by using a hyphen to break a long word across lines, which is called a
word break

. The line break uses the <br> tag, and the word break uses the <wbr> tag. These HTML tags can also be used in combination with each other. They are shown in the third section of Table 11-1.

Let’s cover the word break tag first, as most developers do not know about it, and it is very simple to use and very useful for making sure that long words are broken across lines in a way that is completely controlled by a text content developer. Let’s break the with <wbr>.

To do this, break up the longest word in the dictionary by using the <wbr> tag in the places that we want a rendering engine (browser and OS) to separate it across lines if it becomes necessary, as shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Breaking Text Apart: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a word which is really long using word break:
    Pneumono<wbr>ultramicroscopic<wbr>silico<wbr>volcano<wbr>coniosis</p>
  </header>
 </main>
</body>
</html>

Now let’s talk about the line break <br> tag next; it’s one of the most commonly used text-related tags in HTML5 document, website, and application design. This tag is sometimes called the “break” tag because it uses <br> and not <lbr>.

Let’s insert line breaks (new lines and line spacing) by using the <br> tag. The following HTML5 markup shows an example of this (it can also be used in previous versions of HTML):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Breaking Text Apart: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of using the line break tag to break apart<br>            
       a paragraph containing text sentences<br>            
       without using multiple paragraph tags.<br><br>            
       It is possible to put line spacing between your sentences<br>            
       and still use only one single paragraph.</p>
  </header>
 </main>
</body>
</html>                                                                                                                                                                                      

To add a carriage return and a new line, just as you can do with a manual typewriter, you would use a single <br> tag. To add a space between sentences (or paragraphs), add two <br> tags in succession, like this: <br><br>. This adds a space between your sentences shown. To widen this space, you can use three (or more) break tags, like this: <br><br><br>. The more break tags you add, the wider the space between sentences, paragraphs, or text blocks. Next, let’s talk about text sizing elements (tags).

HTML5 Text Size: Small, Superscript, and Subscript

The next three tags tell the

rendering engine how to size text characters: as a small character, a superscript raised small character, or a subscript lowered small character. These HTML tags are seen in the fourth section of Table 11-1.

Let’s start with the <small> tag because it tells the HTML5 rendering engine to reduce the font size of your text. Let’s reduce the size of the words “small text” in one of the sentences in the original example by surrounding those words with the <small> and </small> tags. This should look like this following HTML markup, which can also be used in HTML5:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Small Text: Using Text-Related Tags in HTML5</h1>
   <p>An example of <small>small text</small> contained in a sentence.</p>
  </header>
 </main>
</body>
</html>

Let’s cover the superscript <sup> tag next, since it is used for footnote references and math (power) representation. It is the second most commonly used size-related tag in HTML5.

Superscript text appears halfway above a normal line; it is usually rendered in the same font size used with the <small> tag.

Let’s superscript the mathematical representation of ten squared, or ten to the second power. This is accomplished by surrounding the 2 with the <sup> and </sup> tags. The following HTML5 markup shows an example of this (it can also be used in previous versions of HTML):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Small Text: Using Text-Related Tags in HTML5</h1>
    <p>Here is an example of a subscript footer footnote representation:
     Ten Squared Equals One Hundred: 10<sup>2</sup> = 100</p>
  </header>
 </main>
</body>
</html>

Let’s cover the subscript <sub> tag next since it is used for footnote references; it is the second-most commonly used size-related element (tag).

Subscript text appears halfway below the font baseline. It is usually rendered in the same font size used with the <small> tag.

Let’s subscript the footnote reference for an article by adding a subscripted [1]. This is accomplished by surrounding the [1] reference with the <sub> and </sub> tags. The following HTML5 markup is an example of this (it can also be used in all previous versions of HTML):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <article>
    <h1>Publishing Small Text: Using Text-Related Tags in HTML5</h1>
     <p>Here is the example of your subscript footnote referencing:
        Further Research Material<sub>[1]</sub> is in the Footer.</p>
  </article>
 </main>
</body>
</html>                                                                      

Let’s cover text direction tags next. Text direction was recently added to HTML 4 (and Android 4.2) to support languages that write from the right side of the screen toward the left side of the screen.

HTML5 Text Direction: The Bidirectional Text Tags

The next two tags tell the rendering engine which direction to render the text characters in by either using the ltr or left-to-right paradigm or the rtl or right-to-left paradigm. The Android OS added support for ltr vs. rtl rendering in version 4.2. Directional text HTML tags are listed in in the fifth section of Table 11-1; they include the bidirectional isolation <bdi> and the
bidirectional override <bdo> tags
.

Let’s start with the <bdi> tag, which tells the HTML5 rendering engine to isolate (or to not apply the current text direction specified in your document) any text inside of the <bdi> and </bdi> tags.

Let’s isolate the text direction for the words “isolated text” in a sentence in the original example by surrounding those words with <bdi> and </bdi> tags. An example of this is shown in the following HTML 4.01 markup (it can also be used in HTML5):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Directional Text: Using Text-Related Tags in HTML5</h1>
   <p>An example of <bdi>isolated text</bdi> contained in a sentence.</p>
  </header>
 </main>
</body>                                                                      
</html>

Let’s cover the HTML 4 bidirectional override <bdo> tag next; it specifically defines the direction of a word, sentence, or block of text. It uses the required direction dir parameter, which takes either an rtl or an ltr data value.

Let’s override the default left to right text direction and use the <bdo> tag to make some of the text go right to left by using the dir parameter. This is accomplished by surrounding the words “right to left” with the <bdo> and </bdo> tags in conjunction with the dir=”rtl” parameter in the opening <bdo> tag. The following HTML5 markup shows an example of this (it can also be utilized in HTML 4.01):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Directional Text: Using Text-Related Tags in HTML5</h1>
    <p>Here is the example of the default left to right text direction.</p>
    <p>Override this to create <bdo dir="rtl">right to left</bdo>text.</p>
  </header>
 </main>
</body>
</html>

Let’s cover the text quotation tags supported in HTML5.

HTML5 Text Quotes: Quote and Block Quote Tags

The next two tags tell the rendering engine to

render the text characters in a quotation format, using a quote <q> tag or a block quote <blockquote> tag. These HTML tags are seen in the sixth section of Table 11-1.

Let’s start with the <q> tag, which tells the HTML5 rendering engine that your text is a quotation.

It is interesting to note that you do not have to supply the quotation marks when you utilize this tag. The following markup is an example of this (it can also be used in HTML5):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Quoted Text: Using Text-Related Tags in HTML5</h1>
   <p>An example of a text quotation contained within a paragraph of text.
   <q>This is a quotation from the Author of HTML5 Quick Markup.</q></p>
  </header>
 </main>
</body>
</html>

There is also a cite parameter, if you want to reference the source of a quote using a URL. The following is an example of this:

<q cite="http://www.wallacejackson.com>
This is a sample quotation from the Author of HTML5 Quick Markup Reference.
</q>

Let’s talk about the
block quote <blockquote> tag
next, since it is used for longer quotations, which are taken from and reference another source. In HTML5, the <blockquote> tag always specifies a section quoted from another source. HTML5 browsers usually indent a <blockquote> element.

This distinction does not exist in HTML 4.01 and earlier, where the <blockquote> simply signifies a quote as a block of text and does not have to represent something from an externally referenced work. This is shown in the following HTML5 markup (it can also be used in previous versions of HTML):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <article>
   <h1>Publishing Quoted Text: Using Text-Related Tags in HTML5</h1>
    <p>Here is an example of a block quote representation in a paragraph:
       <blockquote cite="http://www.apress.com/9781484218624">            
        This compact quick scripting syntax reference on JSON covers
        syntax and parameters central to JSON object definitions, using
        the NetBeans 8.1 open source and Eclipse IDE software tool packages.
       </blockquote>            
    </p>
  </article>
 </main>
</body>
</html>                                                                      

Let’s cover text citation tags supported in HTML5 next.

HTML5 Text Citations

: The CITE Tag

The cite tag tells the rendering engine the title of the text. This HTML tag is in the sixth section of Table 11-1. The cite tag tells the HTML5 rendering engine to apply a title citation for an intellectual property work to any text inside the <cite> and </cite> tags. The IP owner’s name is not the title of the work. Let’s add a title citation to our HTML5 example by surrounding a title with a <cite> and </cite> tag structure. This is shown in the following HTML markup:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Citation Text: Using Text-Related Tags in HTML5</h1>
   <p>I wrote <cite>JSON Quick Syntax Reference</cite> during 2016.</p>
  </header>
 </main>
</body>
</html>                                                                      

Finally, let’s discuss text special circumstance tags, which are supported by HTML5. These are seen in the seventh section of Table 11-1.

HTML5 Special Circumstances Text

: Other Tags

The last four tags tell the rendering engine about outdated, inaccurate, deleted, or inserted text, and allow you to represent data using its native format.

Let’s start with the <data> tag, which provides machine-readable data. It is useful in cases where data needs to be in a certain format to be processed using JavaScript, but it does not format well for human-readable applications; that is, it does not have that format that you prefer your users experience (read).

As a simple example, you prefer to present numbers to your users using text (i.e., one, two, three), but you also need to have JavaScript code that sorts the numbers to organize the data. JavaScript requires that the numbers be provided as numerals (1, 2, 3) to enable this sorting.

A <data> tag enables you to solve this problem by providing two different data representations. Text numbers are provided inside <data> and </data> tags; whereas integers for the JavaScript code are provided as a value parameter. The following HTML markup shows an example of this (it can also be used in HTML5):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <article>
   <h1>Publishing Special Circumstances Text: Using Text-Related Tags</h1>
   <p>An example of <data> tags contained in a paragraph. Numbers Include:
    <data value="1">One</data>
    <data value="2">Two</data>
    <data value="3">Three</data>
   </p>
  </article>
 </main>
</body></html>

Next, let’s discuss the <s> tag, which was deprecated in HTML 4.01 and originally used to define strike-through text (in case you were wondering what the “s” stood for). As such, the default CSS3 definition for this element should look like this example:

s { text-decoration: line-through; }                                                                      

Again, CSS3 is not the focus of this book, only HTML5 markup syntax. The <s> element is redefined in HTML5; it is now used to define text that is no longer correct, accurate, or relevant. This <s> tag should not be used to define replaced or deleted text, because the <del> tag defines replaced or deleted text. (I cover this tag next.) Here is the <s> tag used to update my Android apps book, using HTML5 markup:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
  <h1>Publishing Deprecated Text: Using Text-Related Tags in HTML5</h1>
  <p>I wrote <s>Android Apps for Absolute Beginners 1st Ed.</s> in 2010.</p>
  <p>I wrote <b>Android Apps for Absolute Beginners 4th Ed.</b> in 2017.</p>
  </header>
 </main>
</body></html>

Next, let’s look at the delete <del> tag used for text that has been deleted and replaced using the insert <ins> tag. Use <del> and <ins> for document updates or modifications.

HTML5 browsers normally draw a line through deleted text and underline inserted text. We cover the <ins> tag here because it’s used with the delete tag and provides the exact opposite function. Here are the <del> and <ins> tags, which were used to update my Android Apps for Absolute Beginners (Apress, 2014) book:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
  <h1>Publishing Deprecated Text: Using Text-Related Tags in HTML5</h1>
   <p>I wrote <del>Android Apps for Absolute Beginners 3rd Ed. (2014)</del>            
              <ins>Android Apps for Absolute Beginners 4th Ed. (2017)</ins>            
      for Apress, an imprint of International Publisher Springer.</p>
  </header>
 </main>
</body></html>                                                                      

Let’s save the phrase tags for the next chapter; after that, you’ll be ready to get into lists, forms, and tables.

Summary

In this chapter, you looked at 20 text publishing tags supported in HTML5 and previous versions, including tags for formatting text, tags for styling text, tags for breaking (separating and spacing) text, tags for sizing text, tags for text direction, text for quotations, text for citations and tags for special types of text circumstances. In the next chapter, you look at the phrase tags, which support the publishing of non-standard text-based content inside of HTML5 documents, websites, and applications.

Comments are closed.