The Top 11 Most Important HTML Text Features to Learn

html

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 every Peppery Sriracha sauce, whilst myself, 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 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.

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.

html line wrap via browser
html text using line breaks


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.

html phrase elements
Hey that’s cool! Yes, Yes it is my friend. As you can see here, this is 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.

html font markup elements

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.

html mark tag example


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.

html heading elements
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.

quotes in 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.

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.
html no pre tag
html with pre tag


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.

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. Often times, the list elements are simply used as organizational elements, and the CSS applied to them hides their actual list like nature.

html list types


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.

controlling text direction in 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 &shy; 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.

ruby characters in html