We’re moving onward and upward in getting HTML and HTML5 solidly into the grey matter between your ears! In this magnanimous HTML tutorial, we’ll be covering many features relating to text to give your online content that special sauce. Some folks go for the very Peppery Sriracha sauce, whilst, I think I’ll go with Franks Red Hot. Have you tried that stuff on Bacon? It’s awesome! Now that your taste buds are primed, let’s keep going with Text in HTML!
Working With HTML Line Breaks
The browser will usually be the determining factor on where to wrap lines of text in your html page based on the size of the device looking at the content, the CSS in use, the size of characters, and so on. If you would rather have more control over how this happens, you can insert your own line break by making use of the trusty <br> tag. You surely have made use of this technique when trying to format your text.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
HTML Text and Line Breaks
</title>
</head>
<body>
<h1>
HTML Text and Line Breaks
</h1>
<p>
This here is a lot of text. It is really random, but if you surely can't handle seeing another bunch of lorem ipsum into the world. So in the spirit of our hot sauce, and Franks Red Hot and Bacon, let's consider how tasty it really is. If you haven't had the Franks Red Hot, you will. By the powers vested within something, it is so.
</p>
<p>
Effective immediately, the campaign for the elimination of lorem ipsum has officially begun. If you are caught using a lorem ipsum in your HTML demo, there will be repercussions. Repercussions of the like, including, but not limited to, well... Some crazy stuff. Now eat that bacon.
</p>
</body>
</html>
In this small snippet of HTML here, we will view how the browser handles the flowing poetry and observe where lines wrap. Once complete, we can insert a <br> tag after every single period in the prose to see what happens. Observe Grasshopper.
Get Your Phrase On
Phrase elements are able to markup text in the document based on their use case. By doing this, the browser and search engines have a better understanding of the semantic meaning of the elements, which otherwise may not be apparent in the display on the webpage. You are familiar with these of course by playing witness to the large use of bold, emphasis, and other phrase tags. Here is a snippet of some frequently used Phrase Elements in HTML.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Get Your Phrase On
</title>
</head>
<body>
<h1>
Get Your Phrase On
</h1>
<div style="margin: 50px">
<p> <em> Emphasize </em>
</p>
<p> <strong> Strong </strong>
</p>
<p> <dfn> Define a term </dfn>
</p>
<p> Code listings
</p>
<p> <samp> Sample </samp>
</p>
<p> <kbd> Keyboard </kbd>
</p>
<p> <var> Variables </var>
</p>
</div>
</body>
</html>
Hey that’s cool! Yes, Yes it is my friend. As you can see here, this is a bare-bones display. There’s nothing quite like the beauty of a piece of HTML being rendered in the browser with absolutely no styling whatsoever. By using the phrase elements on HTML, we can give meaning to elements, separate from the display of said elements. Now you can of course style any of these elements to your hearts content, much the way the awesome Twitter Bootstrap Framework does, but in this case, we’re simply having a friendly review of what’s available in bare bones HTML.
Controlling The Font
HTML gives you the ability to control many things about the font of the text on the page, even without any CSS. Why would you want to do this? I’m not sure actually, CSS is the far more powerful way to do something like this, but HTML does provide this ability, so we’ll take a look at it. Actually, I can think of a really interesting friggin awesome one, and that is the <s> Strikeout </s> tag. Let’s look at all the other options available to us as well now.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Controlling The Font
</title>
</head>
<body>
<h1>
Controlling The Font
</h1>
<div style="margin: 50px">
<p> <b> Bold </b>
</p>
<p> <i> Italic </i>
</p>
<p> <u> Underline </u>
</p>
<p>This is a <sub> subscript </sub>
</p>
<p>This is a <sup> superscript </sup>
</p>
<p>This is <small> small </small>
</p>
<p> <s> Strikeout </s>
</p>
<p> <del> Delete </del>
</p>
</div>
</body>
</html>
So there you go, you can see we have several interesting and meaningful ways to markup the font on the webpage when needed.
Use Mark to Highlight Text
You may have seen this technique used on all those crappy one-page sales pages on the internet. You know the ones that give you ten million reasons why you need their widget/info product / useless item, and every other line of text is highlighted with a yellow background. Well friend, you will now have the ability to be just as annoying by making liberal use of the <mark></mark> html tag. We’ll just add it to some existing HTML from earlier and check out what happens.
Using Headings In Your Webpage!
Headings are a fantastic way to add style to your content, as well as telling the search engines what is important on your webpage. The various headings assign different sizes based on which one of the six available heading options you use. Heading is a block-level element and can include other block-level elements if needed. Check out the six options here.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Using Headings In Your Webpage!
</title>
</head>
<body>
<h1>
Using Headings In Your Webpage!
</h1>
<div style="margin: 50px">
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</div>
</body>
</html>
By using the different headings correctly, you’ll be sure that the webpage follows a useful outline or hierarchy. Again, this structure helps both the reader and the search engines to properly digest your content to its max.
Quote Marks and Quotations in HTML
Quotes and quotation marks are common in the web publishing industry. It is easy to add these right into the HTML using the <q> element in your page. The benefit is that it adds additional meaning to the quote beyond just the presentation on the page, much like the many Phrase elements we looked at earlier.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Quote Marks and Quotations in HTML
</title>
</head>
<body>
<h1>
Quote Marks and Quotations in HTML
</h1>
<p>
Bacon has been found to be a beneficial addition to the diet of all people <q>in the whole world.</q> This is in no way an endorsement for you to eat more bacon.
</p>
<blockquote>
Eat Bacon on an as needed Happiness Basis!
</blockquote>
</body>
</html>
Preformatted Text Rocks
If you program in PHP, you likely are familiar with the handy <pre> tag. By using the <pre> tag in testing, array output and object output to the browser become much more readable. In this case, we’re just taking a look at using the <pre> tag in some HTML. What it does is essentially turn off the automatic whitespace compression that takes place in the browser when rendering HTML. This way you can create some text in the editor that will display based on exactly how you configured the outline using the whitespace included. You’ll see this oftentimes when people use text characters to create cool artwork.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Preformatted Text Rocks
</title>
</head>
<body>
Imagine That You
Wanted To Display
Some Text In
A Very Specific
Way
This is easy to do the the pre tag!
This is a bird in a tree using nothing but text!
('>
/))@@@@@.
/@"@@@@@()@
.@@()@@()@@@@
@@@O@@@@()@@@
@()@@@@@()@@
@()@||@@@@@'
'@@||@@@'
||
||
||
||
^^^^^^^^^^^^^^^^^^^^^^^
</body>
</html>
You’ll notice that the code above has no <pre> tag in it. The first screenshot shows that the browser clobbers our text formatting but if we add the <pre> tag to the HTML, it does output nicely.
List Types in HTML
HTML provides nice ways to present content in lists. In this example, we’ll take a look at Ordered Lists, Unordered Lists, as well as the under used Definition List.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
List Types in HTML
</title>
</head>
<body>
<h1>
List Types in HTML
</h1>
<ol>
<li>This is the first li</li>
<li>This is the second li</li>
<li>This is the third li</li>
</ol>
<ul>
<li>I'm unordered!</li>
<li>So am I!</li>
<li>You guessed it!</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A Markup Language for presenting content on the world wide web.</dd>
<dt>PHP</dt>
<dd>A Fantastic scripting language that provides dynamic websites and runs on the server.</dd>
<dt>CSS</dt>
<dd>Used to apply style to HTML elements.</dd>
<dt>JavaScript</dt>
<dd><s>The religion of Douglas Crockford</s> Used to add interactivity and behavior to static web pages.</dd>
</dl>
</body>
</html>
We can look at how these elements display in the browser here. Again, this is bare-bones HTML, so the presentation is a bit bland. Out in the wild, most web designers will use CSS to make list elements look super slick. Oftentimes, the list elements are simply used as organizational elements, and the CSS applied to them hides their actual list-like nature.
Controlling Text Direction in HTML
Though there probably isn’t a huge need for controlling the text direction when using English in your website, it can be useful for other languages such as Hebrew. In this case, text is actually written left to right. Confusing if you ask me! By setting the bdo tag, or bidirectional override, the text will then appear reversed in the page. Let’s check out the results when applying this to some existing HTML.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Controlling Text Direction in HTML
</title>
</head>
<body>
<h1>
Controlling Text Direction in HTML
</h1>
<p>
<bdo dir="rtl">This here is a lot of text. It is really random, but if you surely can't handle seeing another bunch of lorem ipsum in to world. So in the sprit of our hot sauce, and Franks Red Hot and Bacon, let's consider how tasty it really is. If you haven't had the Franks Red Hot, you will. By the powers vested within something, it is so.</bdo>
</p>
<p dir="rtl">
Effective immediately, the campaign for the elimination of lorem ipsum has officially begun. If you are caught using a lorem ipsum in your HTML demo, there will be repercussions. Repercussions of the like, including, but not limited to, well... Some crazy stuff. Now eat that bacon.
</p>
</body>
</html>
Word Break Suggestion
There may be times when you would like to control how a long string of text wraps in the page. You can do this with soft hypens or the <wbr> tag. The difference is that the soft hypen ­ will break the string and add a hyphen at the break point. The <wbr> tag breaks the word at the specified point, without adding a hypen. You can test this in your HTML and see the result.
Ruby Characters
Ruby is a super popular programming language with widespread acceptance due to the Ruby on Rails framework. This Ruby however, is not referring to the programming language. In this instance, Ruby Characters are referring to annotations which show pronunciation. HTML has a <ruby> tag to allow you to make use of these annotations in your web page.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
Ruby Characters
</title>
</head>
<body style="margin: 100px;">
<h1>
Ruby Characters
</h1>
<p>
The two ideograph symbols in this Japanese text has a hiragana annotation.
</p>
<p lang="ja" style="margin: 100px; font-size: 200%">
<ruby>
漢
<rp>(</rp>
<rt>かん</rt>
<rp>)</rp>
字
<rp>(</rp>
<rt>じ</rt>
<rp>)</rp>
</ruby>
</p>
<p>
This instance is written in simplified Chinese and the pinyin is the annotation here.
</p>
<p lang="zh-CN" style="margin: 100px; font-size: 200%">
<ruby>
汉
<rp>(</rp>
<rt>hàn</rt>
<rp>)</rp>
字
<rp>(</rp>
<rt>zì</rt>
<rp>)</rp>
</ruby>
</p>
</body>
</html>
