Use of HTML5 Text Elements

It is hard to do math without ^superscripts and _subscripts. Superscripts are also handy to create footnotes.

In the old days, one would use the b tag to create text in boldface font. Now, however, with HTML5, this is dangerous to use, although still supported. It was kept into the HTML5 standard along with the u tag for underlining, and the i tag for italicizing. Yet none of these tags have any semantic meaning the way that the tag does. That highlights text because it is relevant in another context, for instance in this case the phrase "semantic meaning" might be part of a vocabulary list for a classroom.

While you should avoid , and , there are more semantic tags that you can substitute such as em (for emphatic stress) and strong (for important text). This was HTML5's way of "copping out", and allowing a bridge from an HTML littered with format tags to the HTML of the future. However, no such luck for underlining!

The author of this web site takes no responsibility for the future portability of your HTML if you use , and . This is tagged with the small tag, which used to be added for pure formatting reasons, but now defines a "fine print" section of text.

q is the abbreviation for quoted text; whereas cite is an abbreviation of citation. Each are shown below.

I am a quotation. To be quote or not to be quote ...that is the question. Note the use of deleted and inserted text here.

There are excellent examples of HTML5 in the Apress book, The Definitive Guide to HTML5 [Paperback]." Adam Freeman. Apress. 2011 ISBN: 9781430239604:.

Often your page might define a term, such as emphatic stress. Emphatic stress is a special stress that is given by the speaker to some word in a sentence, usually to single out, compare, correct, or clarify things.

There are lots of tags that are used to model computer programs.

var greeting = "Hello World!"; document.write(greeting);

The code above is JavaScript. Its output could be tagged with the <samp> tag, i.e., Hello World! This code uses the variable greeting, and the results of this script can be seen here: (). There is also a tag to mark up keyboard input, <kbd> which is demonstrated below:

Please enter your name: Jack

An interesting element is the element. This helps the browser know when to "safely" break a long word. A good example of a long word is a hyperlink. Resize your browser window to see how each of these URLs break.


URL 1: https://www.google.com/search?q=use+of+the+wbr+tag+in+html5&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

URL 2: https://www.google.com/search?q=use+of+the+wbr+tag+in+html5&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

One last thing. There is a long-since deprecated element that I never use in production but I continue to rely on when writing dynamic HTML. It is very handy to use, and I rue the day the element was lost.

Anything I type in between the <xmp> tag is displayed as a literal text. Including line breaks and special characters. Great for displaying HTML syntax. The only thing that will not show in XMP is the XMP end tag.

STYLE

       .columns               { column-count: 3;
                                -moz-column-count: 3;
                                -webkit-column-count: 3;

                                column-fill: balance;
                                -moz-column-fill: balance;
                                -webkit-column-fill: balance;

                                column-gap:  15px;
                                -moz-column-gap:  15px;
                                -webkit-column-gap:  15px;

                                column-rule: thin inset LightGrey;
                                -moz-column-rule: thin inset LightGrey;
                                -webkit-column-rule: thin inset LightGrey;}

       h1, pre, xmp           { column-span: all;
                                -moz-column-span: all;
                                -webkit-column-count: all; }

       div > p:first-of-type  { margin-top: 0px; }