The Future is HTML

HTML is the language of the web. It is now becoming the language of everything you do online – from email to news to e-books and more. And, although most of us never “touch” the actual code, it’s behind many of the things you see and do online.

Right now we’re watching an HTML revolution in the making. But, like many revolutions, things can get a little messy at times. The online world is in the process of moving to an updated version of HTML called HTML5. It offers a lot of great things for those of us who create content and we are excited about these new opportunities. BUT! We’re not all there yet. And, it will be a while before we do get there. In the meantime, here are some things you can do to insure you enjoy the best browsing experience you can.

  • Make sure you’re using the latest version of your web browser. In order to take advantage of these new HTML capabilities, you need to use a browser that supports them. Older browsers don’t. Even some of the newer browsers don’t support all of the new capabilities – yet. Opera [Win & Mac] and Chrome [Win & Mac] have the best support with Firefox [Win & Mac] and Safari [Mac] close behind. The latest version of Internet Explorer [Win] supports a majority of HTML5 capabilities, but still lags far behind the rest of the field.
  • Remember that you and your browser are in charge. You can override font style and sizes shown on a site by changing settings in your browser. Press CTRL/+ (CMD/+ for Mac) to increase the font size and CTRL/- (CMD/-) to decrease. To change the font style, look in your browser’s options panel. If things look really weird, you might check your “text encoding” settings. The “default” setting is probably the best, but you might also try the Western or Unicode options. This setting defines which alphabet is used to present content.
  • HTML5 makes its biggest impact with media, simplifying the way audio and video are added to a web page. Most sites can identify the browser you are using to visit their site and then display their media using a method supported by your browser. If you visit a site displaying media only in HTML5 and your browser doesn’t support it, you won’t be able to view that media. You might try using another browser that does support HTML5.

Most web developers are doing everything they can to insure you enjoy the best experience possible when you visit their site. At the same time, they are working hard to learn HTML5 while building sites that cover all these constantly changing possibilities. It means an awful lot of work for them and sometimes it doesn’t always work just right. It’s a challenge but one that’s well worth the effort.

Every day we’re seeing new and amazing views of our world thanks to HTML and these hard-working developers, designers, writers, photographers and artists that bring it to us.

Indents, Block Quotes and Lists

When trying to position text for the web, you’ll quickly find that spaces don’t work well and tabs don’t exist. There are three very useful options for arranging text – indents, block quotes and lists – and each has its own idiosyncrasies. Here’s a quick overview of each and how you can put them to work in your content. Let’s start with indents.

indents

 

In this example, we need to have several lines indented from the left margin. This is done by pressing the Indent button in the toolbar. Once you have used the button to indent your content, the Outdent button (shown grayed out to the left of the Indent button) will light up. Use it to return your text back to its previous location.

 

blockquote-1.jpg

The block quote is used to spotlight large amounts of quoted text. The standard is to indent block quotes from both the left margin and the right. Some themes will further style them with borders, italicized text or even over-sized quotation marks. These design elements don’t usually show up on the editor – which is one reason you have a preview option available to view your content. The HTML tags also define this text as a quotation so handicapped users reading your content with a screen-reader device will be told this is a quotation. As a result, you should only use this function for actual block-size quotations. If you just want to indent several lines of text, use the Indent function.

unorderedlist.jpg

 

In the world of HTML, this is known as an unordered list. You know it better as a bullet list. Since many people tend to scan the content of web pages, bullet lists are a great way to present information. List items (there are four list items in this example) can be a single line or multiple lines of text. Each time you press the Enter key you create a new list item. Once again, the style sheet used for the site will determine the actual styling that appears on the finished page. The amount of indent and spacing before and after each list item and the list collection is determined by the site’s theme. So are the graphic icons used as the bullet points.

One other type of list – the ordered or numbered list – is also available to you. This list presents numbered items rather than bulleted ones. It is used for text being presented in sequential order – like the steps in a process. Once again, these lists can be any length. When you press Enter, you create a new item in the sequence.

Like block quotes, lists also inform blind readers that these are organized lists so should only be used when the content justifies it – not just to indent content.

An Introduction to Markdown

Markdown is a standard for creating a plain text document that includes formatting identifiers. These “identifiers” are normal characters used to identify formatting options like italicization, hyperlinks or headings. This standard allows us to create very readable plain text documents while making it easy for that document to be converted into other formats like HTML or PDF. Why is this important? Since the early days of the digital age, plain text has been the one thing that has not changed. Word processing apps have come and gone. Do you have any early WordStar, WordPerfect or MS Word documents on your computer? Are they readable? If those documents had been saved as plain text, they would be.

Unfortunately, plain text is exactly that – plain. There are no font choices or even bolding available. That’s where markdown comes in. It uses plain text characters like asterisks and hash marks to identify formatting options. Here are some examples:

Hello *world*. In this example, the asterisks tell a markdown conversion app to italicize everything between them.

Hello **world**. Two asterisks will convert to bolded text.

#Introduction. The single hash mark at the beginning of a line will identify that line as a level-1 heading. A level-2 heading would begin with two hash marks and so on.

Even without conversion, plain text that includes markdown coding is still quite readable. It’s much easier to read than the same text with equivalent HTML tags. It’s the simplicity and readability of markdown that make it so interesting. Forty years from now, even if markdown gets forgotten over the decades, someone can open and read the plain text document that includes markdown code much easier than we can read this WordPerfect document that’s less than 20 years old.

Does this mean you need to dump your word processing app and go back to plain text? Not at all! Now that you’re aware of what markdown is, take a look at the apps you have to see if they provide markdown support. Right now you’ll find it in more Mac/iOS apps than Windows, but hopefully that will change soon. Apps like Day One – the journaling app for Mac and iOS – save journaling as plain text files using markdown for formatting. This means my Day One archives won’t have the readability issues found in that WordPerfect file – making it even more useful as a journaling platform. Other apps, like a growing number of note-taking apps for iOS, offer export to markdown options. This gives you the ability to create a notes archive that’s truly archival.

Is markdown the end-all/cure-all for archiving documents? No, but it’s sure a good start. If you’d like to learn more, DesignShack has created an impressive resource guide that includes markdown information, cheat sheets and supporting apps.

Use HTML to Cite Your Sources

The physical act of citing a source within a document can be a pain regardless of the platform. However, HTML offers the <cite> tag to include source information at the point it’s referenced. The cited text appears italicized and when you hover your mouse over the text, the source information appears as a tooltip.

The format for the tag is:

<cite title="source information">referenced text</cite>

Here’s how the tag appears within your HTML:

<cite title="Jennifer, Niederst. Html Pocket Reference. Sebastopol, CA: O'Reilly, 1999. Internet resource.">Jennifer Niederst</cite>

And here’s how it appears on your blog post/web page:

Jennifer Niederst offers the <cite> tag as a simple way to source your blog content.

Notice Jennifer’s name appears in italics.[NOTE: I’ve added the dotted underline in my stylesheet for all tags that offer additional information as a tooltip.] Hover over it and you’ll see the source information for her book. The first thing you notice is the name of the book is not italicized. Unfortunately, you can’t style text within a tooltip. Next you’ll notice I only used “Internet resource”, not the complete link to her book. You can include a URL in your citation text, but it’s not a hyperlink so unless it’s relatively short and easy to remember, it doesn’t serve much purpose. Even without the URL, you have enough information to find the publication with a quick search.

I know this isn’t the end-all, cure-all solution for source citation. BUT. It’s easy to use so you’re more likely to use it. And, for your readers, the source information is right in front of them. They don’t have to lose their place looking for footnotes or endnotes.