START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML5 Lesson

This is the first in a series of three lessons introducing some of the new HTML tags that came with the release of HTML5 . Selfie was added to the Oxford English Dictionary this year, and I remember when Bling was a new word. The World Wide Consortium maintains the HTML dictionary, and occasionally we get some new words, just like other languages.

Today I’m going to teach you a new HTML tag that will really impress your friends…at least if your friends are half as geeky as we are. What’s so great about this tag? It is a brand spanking new tag from the latest version of HTML, HTML5. Even experienced coders are still learning HTML5, so new coders have a chance with these next three lessons to get ahead of the game.

Mark tag

New HTML5 Tag: Mark It Up

Use mark to surround passages of text that are most important to the reader, in the same way that a reader will mark up content they find important with a highlighter pen. This perspective makes the <mark>  tag different from <em>  used to emphasize text. The difference is in who does the marking—or who the marking is relevant to. For example, usually <em>  is added by the author for emphasis, but highlighting is done by the reader, as the reader decides what is relevant to them, and the reader adds their own marker or highlighter pen. The spec says “When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.”

Highlight text of interest to the reader with the Mark tag

Highlight text of interest to the reader with the Mark tag

Try using the new  <mark> element to draw attention to content that has relevance to the reader. Marked text appears with a yellow highlight color in the background as the default appearance, just like a yellow highlight marker. Just pretend your web visitor had a yellow highlight marker in their hand—what would they want to highlight?

Examples of the Mark Tag

highlighter UGH on graph paper animated gif

Don’t worry this is going to be easy. [image via Giphy]

Think of using the <mark>  tag for the Reader’s interest, such as marking search results.

Here is an example of <mark>  used within a paragraph:

Notice that <mark>  requires an open and closing tag, to specify the beginning and ending of your highlighted text.

Highlight important text

Get Your Tags in The Right Order

Mark is an inline tag—so you can mark any range of text—a word, phrase, sentence or whole paragraph. Tip on nesting order of HTML tags: If you are highlighting an entire paragraph, make sure you place the <mark>  tag inside the block-level paragraph tag <p>  (or block-level Heading tags like <h1> ).

Now That’s Styling: Choose a Mark Color

Choose a mark color with CSS

Choose a mark color with CSS

The default appearance of the Mark tag is a yellow background color. But, like any HTML tag, you can control the appearance by using CSS, Cascading Style Sheets. CSS is another mark-up language (like HTML) that is used to control the appearance and design of web pages, including colors, fonts, text-sizes, and the layout of the page.

If you would like to control the background color of Mark for your entire website, then add a rule to your CSS style sheet. Or, you can affect an individual instance of of Mark by using an inline style, where the CSS code is written right in the HTML tag.

Here’s how the CSS rule would look in your external style sheet (to change all your marked text):

Here’s an example of an inline style, (used to change one instance of marked text):

Mark open and close tags

Mark open and close tags

Coming Soon: Time and Date

Look for our next lesson in this mini-series: Learn about making date and time references more useful with the new HTML5 Time tag.

Does anybody really know what time it is?

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.
  • Jessie Stone

    I so like your article Diane. It’s more easy for validation and informative as well when it talks about HTML5 and doing some form sliders too. In addition, I found this post http://www.lionleaf.com/blog/html5-form-sliders-the-range-input/ in case you need more ideas about it by the way. The only concern I have right now is the compatibility of this one in other web browser. I just want to hear your thoughts about this. Thanks!

HTML Lessons

©2013 Diane Presler. All rights reserved.