HTML5 – HTML5 Phrase Tags: Using Non-Standard Text

Now let’s go over phrase tags in HTML5, which allow developers to actually control the browser’s assimilation and classification of the text-based content by using styling, defining, hinting, formatting, Teletype and keyboard input, computer coding, variables, and the like. These more specialized text-related tags allow HTML5 developers to define their document content without having to resort to using stylesheets for styling purposes, or JavaScript, for coding-related activities.

In this chapter, you look at phrase tags for implementing non-standard text-based content in HTML5. These include the strong <strong> tag (like bold), the emphasis <em> tag (like italics), the code <code> tag, variable <var> tag and sample <samp> tag for coding related text, the definition <dfn> tag for term definition, a keyboard <kbd> tag for keyboard data entry, and the Teletype <tt> tag, for Teletype data entry.

HTML5 Phrase Tags: Special Text Content

This chapter covers the text-related “phrase tags” supported in HTML5. They are used to create non-standard types of text content for publishing in documents, websites, or applications. Most

of them were supported in legacy versions of HTML. The <em> and <strong> tags have updated semantic definitions in HTML5; I point this out where applicable. These tags are also used as child tags of the semantic tags covered in Chapter 10 and the text publishing tags covered in Chapter 11. Phrase content is encapsulated (wrapped) in standardized semantic and text containers, so that the search engine robots (index and rank algorithms) can properly implement Web 3.0 Semantic Search.

Table 12-1 shows eight phrase tags that can be used for defining, styling, input, and coding.

Table 12-1. Eight HTML Text Content

Publishing “Phrase Tags”

Text Phrase Tags

Text Phrase Tag Usage

dfn

Defines the defining instance for a term

strong

Defines an important term or statement

em

Defines an emphasized term or statement

kbd

Defines keyboard input

tt

Defines Teletype input (not supported in HTML5)

code

Defines a computer code listing or fragment

samp

Defines a computer code sample output

var

Defines a computer code variable

Let’s take a look at the phrase tags in logical sections just like they are arranged in this table, starting with HTML5 phrase tags for styling <dfn>, <strong>, and <em>. These define important content, in one way or another, to the HTML rendering engine, and for that reason, should also be considered semantic tags as well. Each also has its own unique styling.

HTML5 Phrase Styling: Highlighting Important Text

The phrase-styling <strong> tag is used much like the bold <b> tag. The <em> tag is used much like the italics <i> tag. There is also a more specialized <dfn> tag used to semantically define important terms or abbreviations in your document, so that search engines understand the emphasis put on content elements.

The DFN Tag: Definition Terminology for the HTML5 Document

The definition <dfn>

tag represents the “defining instance” of a term that you use in an HTML5 document, website, or application. This defining instance is the first usage of that particular term within a given document. The parent for this <dfn> tag needs to contain a definition or explanation of the term defined inside the child <dfn> tag. You can define a <dfn> element without using any parameters, as shown in the following HTML5 markup example:

<p>Did you know <dfn>JSON</dfn> stands for: JavaScript Object Notation?</p>

The <dfn> tag is also commonly used with the global title attribute or parameter, so that when you mouse-over the defined term, you see its definition. The following HTML5 markup shows an example of this:

<p>Did you know that <dfn title="JavaScript Object Notation">JSON</dfn>
   stands for: JavaScript Object Notation and can be used with HTML5?</p>

The <dfn> tag can also be used as the parent tag of the <abbr> tag, which you saw in Chapter 11, and which some consider to be a phrase tag as well.

In order for the mouse-over function to work properly, you need to make sure that the title attribute or parameter exists inside of the <abbr> tag, which is itself inside of the <dfn> element. This is done using the following HTML5 markup:

<p>HOT TIP: <dfn><abbr title="JavaScript Object Notation">JSON</abbr></dfn>
   stands for JavaScript Object Notation and can be utilized with HTML5?</p>

It is also

possible to add a global id attribute to the <dfn> element, so that it could be referenced by using the href parameter, or in CSS3 stylesheets and via JavaScript code. This is shown in the following HTML5 markup:

<p>Do you know <dfn  title="JavaScript Object Notation">JSON</dfn>
   stands for JavaScript Object Notation, and it can be used with HTML5?</p>

Your markup can refer back to the definition by using an <a> tag, if set up as follows whenever the JSON term is used:

<p>If you want to learn <a href="#json">JSON</a>, check out Wallace
   Jackson's Apress Title: <q>JSON Quick Syntax Reference (2016).</q></p>

Next, let’s take a look at a special type of phrase tag called the <strong> tag. This tag is specifically utilized for highlighting important or key information in the document design.

The STRONG Tag

: Defining Important Text and Terminology

The <strong> tag is the semantic search version of the bold <b> tag in as much that it not only bolds the text style, but also indicates a greater importance or “strength” for the term or phrase that is contained within the <strong> and </strong> tags. This tells a semantic search algorithm what is important, which allows it to do a better job at its attempt at semantic artificial intelligence.

Let’s use a <strong> tag to increase my importance as an author. This example should enclose my name in the <strong> and </strong> tags, as shown in the following HTML5 markup:

<p>If you want to learn <a href="#json">JSON</a>, check out <strong>Wallace
   Jackson's</strong> Title: <q>JSON Quick Syntax Reference (2016).</q></p>

This should give my name a slight boost in search engine rank, at least versus using the <b> bold tag, because it tells the search engine algorithms that as the content developer, I am assigning an increased level of importance to myself. Some

folks inform me that I do this way too much; then I simply cite SEO as my excuse to continue doing so.

The EM Tag: Emphasizing Important Text and Terminology

The <em> tag is the

semantic search version of the italics <i> tag, in as much that it not only italicizes the text style, but also indicates a greater focus or “emphasis” for the term or phrase contained witihn the <em> and </em> tags. This tells a semantic search algorithm what is emphasized, which allows it to do a better job with the search engine’s attempt to implement the semantic artificial intelligence.

Let’s use an <em> tag to increase the emphasis on a book title in the previous example. This example encloses the book title in the <em> and </em> tags. This change from a quotation tag to an emphasis tag is shown in the following HTML5 markup:

<p>If you want to learn <a href="#json">JSON</a>, check out <strong>Wallace
   Jackson's</strong> Title: <em>JSON Quick Syntax Reference (2016).</em>              
</p>

This change serves to change the styling from using quotation marks to delineate the book title to using italics, like this: JSON Quick Syntax Reference.

Next, let’s look at the phrase tags that simulate keyboard and Teletype data input. The Teletype, or TTY, is an electro-mechanical typewriter that sends and receives typed messages, from point to point and from point to multipoint, over various types of communications channels. It is an early predecessor to the facsimile machine popular today.

HTML5 Phrase Input Tags: Keyboard and Teletype

The next two tags shown in Table 12-1 define phrase text styles, which make it appear as if custom input is being performed. These typically change the text font style in a browser to a font that connotes typing, such as Courier or a monospace font. It is important to note that these tags do not actually add an ability to take text from an external physical hardware device, but simply make the text used with those tags in your document make it look as though that is happening, so these tags are input styling rather than the previous emphasis styling tags. Let’s go over the keyboard <kbd> tag first, because it is still supported in HTML5, and it is the tag you’ll want to use to simulate keyboard input in documents.

The KBD Tag: Defining Keyboard Input

The <kbd> tag specifies

keyboard input (or Teletype input for HTML5, which no longer supports the <tt> tag) in HTML5 documents, websites, and applications. More than one <kbd> tag may be used in a single document. This <kbd> tag uses the following style definition; if you like, you could change this to specify the Courier font in an external CSS stylesheet:

kbd { font-family: monospace; }
kbd { font-family: Courier; }      // This CSS3 will simulate a typewriter
kbd { font-family: 'Lucida Console'; } // This CSS3 will simulate Teletype

Let’s use the <kbd> tag to change the book title style to look like a font that is used in coding. An example of this is shown in the following HTML5 markup:

<p>If you want to learn <a href="#json">JSON</a>, check out <strong>Wallace
   Jackson's</strong> Title: <kbd>JSON Quick Syntax Reference (2016).</kbd>              
</p>

Next, let’s take a look at the <tt> tag, which should be used in HTML versions earlier than HTML5 to simulate a Teletype machine in an HTML5 document or application.

The TT Tag: Defining Teletype Input

The <tt> tag specifies Teletype input for HTML versions prior to HTML5, which no longer supports the <tt> tag. More than one <tt> tag may be used in a single document. This <tt> tag uses the following style definition; if you like, you could change this to specify Courier font or a
monospace

font in an external CSS stylesheet:

tt { font-family: monospace; }    // This CSS3 will simulate a keyboard!
tt { font-family: Courier;   }   // This CSS3 will simulate a typewriter!

Let’s use this <tt> tag to change the book title style to look like the font used in Teletypes. An example of this is shown in the following HTML5 markup:

<p>If you want to learn <a href="#json">JSON</a>, check out <strong>Wallace
   Jackson's</strong> Title: <tt>JSON Quick Syntax Reference (2016).</tt>              
</p>

Next, let’s look at phrase tags which simulate working with computer code.

HTML5 Phrase Coding Tags: Code and Variables

The final three phrase tags shown in Table 12-1 allow you to style text elements to look like they are computer coding–related content. This is done by using the code fragment <code>, sample output <samp>, and the code variable <var> tags.

The Code Tag: Code Sample Listings and Code Fragments

The <code> tag defines a “code fragment,” which is a snippet or partial

code listing. Usually, the entire code listing is too long, but it is possible to use this phrase tag to style an entire code listing. The CSS3 setting for a <code> tag defaults to using the monospace font to style the code text, as shown in the following CSS3 definition (with other coding-related, font-family styling options included):

code { font-family: monospace; }     // Default Style for the <code> element
code { font-family: Courier; }      // This CSS will simulate the typewriter
code { font-family: 'Lucida Console'; } // This CSS will simulate a Teletype

Let’s use the tag to

showcase a Java 9 code snippet from my Pro Java 9 Games Development (Apress, 2017) book, as shown in the following markup:

<p>If you want to learn <a href="#java">JAVA</a>, check out <strong>Wallace
   Jackson's</strong> Title <em>Pro Java 9 Game Development (2017).</em>
   Here is a sample snippet of Java 9 code from this upcoming Java 9 Game
   Development programming title:
   <code>              
   legalButton.setOnAction(new EventHandler<ActionEvent>() {
       @Override
       public void handle(ActionEvent event) {
           infoOverlay.getChildren().clear();
           infoOverlay.getChildren().addAll(copyText, riteText);
           infoOverlay.setTranslateY(380);
           infoOverlay.setLineSpacing(-9);
           uiContainer.setBackground(uiBackground3);
           boardGameBackPlate.setImage(transparentlogo);
       }
   });
   </code>              
</p>

Next, let’s take a look at the sample output <samp> tag.

The SAMP Tag

: Adding Sample Code Output

The <samp> tag is used to define code output, which is the result of running code. The CSS3 setting for a <samp> tag defaults to using the monospace font to style the code text, as shown in the following CSS3 definition:

samp { font-family: monospace; }     // Default Style for a <samp> element
samp { font-family: Courier; }       // This CSS will simulate a typewriter
samp { font-family: 'Lucida Console'; } // This CSS will simulate a Teletype

Let’s use this tag to showcase

a Hello World code sample, taken from my upcoming Pro Java 9 Games Development (Apress, 2017) book, as shown in the following HTML5 markup:

<p>If you want to learn <a href="#java">JAVA</a>, check out <strong>Wallace
   Jackson's</strong> Title <em>Pro Java 9 Games Development (2017).</em>
   Here is a sample snippet of Java 9 code output from Chapter 6 in the
   upcoming Pro Java 9 Games Development programming title:
   <samp>              
           Hello World!
   </samp>              
</p>

Next, let’s take a look at the code variable <var> tag.

The VAR Tag: Adding Code Variables

The <var> tag defines code variables, which are the data values within

your code. The CSS3 setting for the <var> tag defaults to using the italics to style the code text, as shown in the following CSS3 definition:

var { font-style: italic; }    // Default Style for the <var> tag is italic
var { font-style: italic; font-family: monospace; } // italic monospace font

The <var> tag is usually nested inside a <code> tag, as variables exist inside code. Let’s use the tag to style variables in the <code> tag example in the following markup:

<code>legalButton.setOnAction(new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
         infoOverlay.getChildren().clear();
         infoOverlay.getChildren().addAll(<var>copyText, riteText</var>);
         infoOverlay.setTranslateY(380);
         infoOverlay.setLineSpacing(-9);
         uiContainer.setBackground(uiBackground3);
         boardGameBackPlate.setImage(transparentlogo);
      }
   });</code>                                                                                              

Summary

In this chapter, you learned about the phrase tag support in HTML5 and previous versions, including the <dfn>, <em>, <strong>, <kbd>, <tt>, <code>, <var>, and <samp> tags. In the next chapter, you look at the HTML5 list tags.

Comments are closed.