HTML5 – HTML5 Parameters: Using Global Tag Attributes

Before we start our extensive coverage of all of the child tags of the parent <body> tag, which is itself a child tag of the <html> tag, let’s take a chapter here at the front of the book to cover the “global” parameters, which can be used by any of the tags in HTML5. These work with elements (tags) in the HEAD and BODY sections of the HTML5 document definition. In fact, a couple of them were covered in the first five chapters of this book!

In this chapter, I go over 16 parameters supported across all HTML5 document-level tags. I show you what these parameters do for your HTML5 documents and apps. Eight of these global parameters are new to HTML5 and the other eight work in previous versions of HTML as well. After this chapter, you’ll be ready to learn all of the <body> tags!

HTML Global Parameters Across All Tags

This chapter covers those tag attributes, characteristics, or parameters that can be used with any tag in HTML5 and previous versions, such as HTML 4.01 and XHTML 1.1. It is logical to cover this before going into the plethora (around a hundred) of tags that are children of the <body> tag. I am doing this so that we can cover these global parameters in a single chapter.

Table 6-1 shows the 16 parameters. The first eight in the top half of the table only work in HTML5 browsers and operating systems. We cover these first, since HTML5 is the primary focus of this book. The bottom half of the table contains the eight parameters that work in HTML5 (due to backwards compatibility) and in earlier versions of HTML.

Table 6-1. Supported Global HTML5 Tag Attributes

Global Parameter

Global Parameter Purpose

contenteditable

Specify if an element content is editable or not

contextmenu

Specify context menu for the HTML5 element (tag)

data-<attribute>

Specify custom data attributes for your document

draggable

Specifies if an element is draggable (or is not)

dropzone

Specifies a drop processing (copy, move or link)

hidden

Specify visibility (relevancy) for each element

spellcheck

Specify spelling and grammar check for elements

translate

Specifies to execute scripts after HTML parsing

accesskey

Specify a keystroke shortcut to focus an element

class

Specify a classname for element in a style sheet

dir

Specify a text reading direction for an element

id

Specify a unique ID for element in a style sheet

lang

Specify the language used for that element

style

Allows in-line CSS Style declaration for element

tabindex

Specifies the tabbing order for that element

title

Specifies extra information regarding an element

Let’s talk about the eight HTML5 global parameters first.

HTML5 Global Parameters: Advanced Attributes

The global attributes or parameters recently added to HTML5 are more advanced and add features more akin to devices, operating systems, and applications than to websites, as older versions of HTML were designed for. These parameters allow things such as drag and drop, editable content, context menus, custom data definition, spell-checking, and language translation.

The CONTENTEDITABLE Parameter: Can I Edit This Content?

The
contenteditable

=“boolean” parameter (or attribute) allows you to specify whether or not you want your user to be able to edit the content inside of that element (tag) that the parameter is attached to (used inside of). When a contenteditable attribute is not set on an element, but is set on a parent tag of that element, a child element inherits the setting (true, false) from its parent element.

In fact, some browsers, including Opera and Firefox, set the inherit value as the default, whereas Chrome and Internet Explorer set the false value as the default. Thus, you could say there are three value options for this parameter, true, false, and inherit.

The following HTML5 markup is an example of creating an editable paragraph of text using a <p> tag (which is covered in Chapter 10):

<p contenteditable="true">Go ahead, edit this text if you're so inclined</p>

Next, let’s look at context-sensitive menus in HTML5 with the contextmenu parameter.

The CONTEXTMENU Parameter: Context Sensitive Menuing

The
contextmenu

=“id” parameter (or attribute) allows you to specify whether or not you want your user to be able to open a context-sensitive menu by right-clicking the content inside of that element (tag) to which the parameter is attached to. The contextmenu parameter value references the ID parameter of a <menu> tag element, which you define using <menuitem> child tags to define your menu options (items).

The following example shows a context-sensitive menu using the <div> tag (described in Chapter 14) in a document:

<div contextmenu="divmenu">
     <menu  type="context">
           <menuitem label="Menu Option 1"></menuitem>     
           <menuitem label="Menu Option 2"></menuitem>     
           <menuitem label="Menu Option 3"></menuitem>     
     </menu>
</div>

You can attach context-menus to any HTML5 element; after all, this is a global parameter, so it can be attached to any HTML5 tag (document or app design element). Be sure that it is logical to attach a menu to your design element from a UI design standpoint

; the user still has to right-click that element and expect that menu. Next, let’s take a look at custom data constructs using the data parameter.

The DATA- Parameter: Custom Data Definitions for HTML5

The data-name=“datatype” parameter (or attribute) allows you to specify custom private data type definitions to content inside of that element. The data-name parameter value allows you to add your data type name to the parameter itself, which is unique in HTML5 parameters, and references the
data

type used to define that particular tag’s content.

It is logical to utilize in conjunction with JSON (JavaScript Object Notation) data object definitions, which you can research further in my JSON Quick Syntax Reference (Apress 2016) book.

To enhance the context-sensitive menu created using a <div> tag in the previous section, let’s create a data-car data type definition and name each menu item (car models) with its country of origin. To accomplish this, modify your

HTML5 tag markup to look like this:

<div contextmenu="carmenu">
    <menu  type="context">
          <menuitem data-car="german"   label="Mercedez Benz"></menuitem>     
          <menuitem data-car="italian"  label="Lamborghini"></menuitem>     
          <menuitem data-car="american" label="Corvette"></menuitem>     
    </menu>
</div>

Next, let’s take a look at the draggable design elements that you can create in HTML5, by using the draggable parameter.

The DRAGGABLE Parameter: Can I Drag This Element Around?

The draggable=“boolean” parameter (or attribute) allows you to specify

whether you want your user to be able to drag around the content inside of the tag on a display screen. There are actually three value options for this parameter, true, false, and auto. Using the auto option specifies the default draggable value for each particular browser.

The following HTML5 markup shows a draggable paragraph of text using a <p> tag:

<p draggable="true">You're able to drag this paragraph around the screen</p>

Next let’s take a look at how to drop draggable elements in HTML5 by using the dropzone parameter. These two parameters are used in conjunction with each other, because to be able to drop an element, you have to be able to drag it in the first place!

The DROPZONE Parameter: What to Do When an Element Is Dropped

The dropzone=“action” parameter (or attribute) allows you to

specify the action that your HTML5 application implements once the user drags the content into place on the screen. There are three action value options for this parameter: move, copy, and link. The auto option specifies the default draggable value for each particular browser.

To create the dropzone area, attach a dropzone parameter to a <div> area using the <div> tag (see Chapter 14), as shown in the following HTML5 markup:

<div dropzone="move">Content Child Elements/Tags will be in here</div>

To create a copy of the dragged content in your dropzone area, use the copy option instead, as shown the following markup:

<div dropzone="copy">Content Child Elements/Tags will be in here</div>

This leaves your original dragged content intact and copies it to the new location. This is the least memory-efficient option because it duplicates the drag-and-drop content in system memory, which is inefficient. The solution is to use the link option, which displays the dropped content in a second location but references it from the original memory storing the original element. This is accomplished with the following HTML5 markup to link the new content in the division:

<div dropzone="link">Content Child Elements/Tags will be in here</div>

Next, let’s look at how to hide elements in HTML5 using the hidden parameter.

The HIDDEN Parameter: Hide Element Content until it is Relevant

The hidden=“boolean” parameter (or attribute) allows you to specify whether you want your element to be hidden from view. There are two value options for this parameter: true or false. Specifying the
hidden

tag sets the value to true; not specifying it sets the value to false. The following example creates a hidden paragraph of text using a <p> tag:

<p hidden>This paragraph will be hidden from the user's view</p>

Next, let’s look at how to spell-check elements in HTML5, by using the spellcheck parameter.

The SPELLCHECK Parameter: Allow Spell-checking for Content

The spellcheck=“boolean” parameter (or attribute) allows you to specify whether you want your text-based elements to have the spell-checking

feature enabled. This is used in conjunction with the contenteditable attribute for text-capable elements, such as paragraphs, text areas, input fields, and the like.

To create an editable paragraph text that supports this spell-checking feature, use the <p> tag with the contenteditable and the spellcheck parameters both set to a value of true, as shown in the following HTML5 markup:

<p contenteditable="true" spellcheck="true">Paragraph with spellchecking</p>

Next, let’s take a look at the language support in HTML5 using the translate parameter.

The TRANSLATE Parameter: HTML5 Global Language Support

The translate=“boolean” parameter (or attribute) allows you to specify

whether you want your text-based elements to be translated into different languages. Interestingly, instead of using true and false for the Boolean value, this parameter uses yes and no. The default (not specifying the translate parameter at all) is yes (translate this text element content), which equates to “support the localization of this content.” Therefore, this parameter is primarily used to prevent a translation when you want the language for your HTML5 document to remain in the language that you originally created it in.

To create paragraph text that supports this translation feature, use the <p> tag with no translate parameter, or with the parameter set to a yes value, as shown in the following HTML5 markup:

<p>This Paragraph Will Be Translated by Default, to Localize the Content</p>
<p translate="yes">This Paragraph WILL Be Translated, for Localization.</p>

To create paragraph text that will never be translated, use the <p> tag with the translate parameter set to the no value, as follows:

<p translate="no">This Paragraph Will                                   NOT Be Translated or Localized</p>

Next, let’s take a look at global parameters supported across all versions of HTML, including HTML5 and HTML 5.1.

Pre-HTML5 Global Parameters: Legacy Attributes

The remaining eight parameters in Table 6-1 have been in HTML for quite a long time and are probably much more familiar to you. The style and lang parameters have been covered already, so let’s go over the rest so that you can get into the tags that control content design and display in your HTML5 applications, websites, and documents.

The ACCESSKEY Parameter: Adding Keyboard Shortcut Keys

The accesskey=“key value” parameter (or attribute) allows you to

specify a keyboard shortcut for your elements. This is useful for hypertext anchor <a> tags (covered in Chapter 7), which allows your users to simply press a letter key on the keyboard to automatically access a website.

To create a keyboard shortcut for an anchor tag link, use an accesskey parameter inside of an <a> tag and assign it a key on the keyboard. Here’s an example, using basic HTML5 markup:

<a href="http://www.Apress.com" accesskey="p">Publisher Website</a> <br>
<a href="http://www.WallaceJackson.com" accesskey="a">Author Website</a>

Next, let’s take a look at how you attach HTML5 tags to cascading stylesheet (CSS) definitions using a class parameter.

The CLASS Parameter: Labeling Your Elements for Use with CSS

The class=“name” parameter (or attribute) allows you to specify a classname for your tags. It is useful for any

tags that can be styled using CSS3 or controlled using JavaScript, which includes the majority of the tags covered in this book.

To create a classname for a paragraph tag, use the class parameter inside of a <p> tag. To access this inside of a style tag, use the p.coloredtext dot notation. Here’s a basic example using HTML5 markup with the high-level tags you’ve learned:

<html><head><style>
     p.coloredtext { color: red; }  <!-- CSS to set the p color to red -->
</style></head>
<body>
     <p >This text will be displayed in a Red color.</p>
</body></html>

Next, let’s look at how you define text direction (left to right, or LTR, and

right to left, or RTL), using a dir parameter.

The DIR Parameter: Defining the Direction of your Text

A dir=“direction” parameter (or attribute) allows you to specify

the direction that you want your text-based elements to be read. This parameter uses rtl and ltr as options, as well as auto, which is the default for the browser. If you use auto, the browser tries to ascertain the correct direction based upon the content (the character set that it is utilizing).

To create paragraph text that supports this translation feature, use the <p> tag with no translate parameter, or with the parameter set to a yes value, as follows:

<p dir="rtl">This Paragraph Will Be Written from the Right To the Left!</p>

In HTML5, this parameter can be used with any tag, although it is only useful with some tags. In older versions of HTML, the parameter can’t be used with <frame>, <iframe>, <frameset>, <param>, <script>, <base>, <br>, or <hr>.

Next, let’s take a look at the id parameter.

The ID Parameter: Identifying Your Content Elements

The id=“name” parameter

(or attribute) allows you to specify an id to use as a handle. It is useful for any tags that can be styled using CSS3 or controlled using JavaScript.

To create an ID for a paragraph tag, use an id parameter inside of a <p> tag. To access this inside of

a <script> tag, use the document.getElementById() function. Here’s an example:

<html><body>
   <p >Click this button to change to: Hello World!</p>
   <button onclick="HelloWorldFunction()">Change Text, Please!</button>
   <script>
      function HelloWorldFunction() {
         document.getElementById("helloworld").innderHTML = "Hello World";
      }
   </script>
</body></html>

Next, let’s take a look at how you specify language by using the lang parameter.

The LANG Parameter: Defining an Element’s Language

The lang=“language” parameter

(or attribute) allows you to specify the language used in your text-based elements.

To create the paragraph text that supports this language specification feature, use the <p> tag with the lang parameter, set to the abbreviated value of the language used in your text element. An example of this is shown in the following HTML5 markup:

<p lang="es">Buenos Dias, Compadres!</p>

Next, let’s take a look at the in-line stylesheet support in HTML5 using the style parameter.

The STYLE Parameter: Using In-Line Stylesheet Settings

The style=“css” parameter (or attribute) allows you to specify “in-line CSS3” markup in an element (tag).

To create paragraph text that supports this stylesheet specification feature, use the <p> tag with the style parameter set to use
style markup

. The following is an example of how this is done using HTML5 markup:

<p style="color:green">This text will now use the green color!</p>

Next, let’s take a look at controlling the way that your Tab key advances through your UI in HTML5 using the tabindex parameter.

The TABINDEX Parameter: Tab Key Advancement Ordering

The tabindex=“integer value” parameter (or attribute) allows you to specify a TAB key
order

for your tags. It is useful for hypertext anchor <a>, allowing users to tab through each link in the order that you define. To create a tabbing order for an anchor tag link, use a tabindex parameter inside of an <a> tag and assign it a number. Here’s an example using basic HTML5 markup:

<a href="http://www.Apress.com" tabindex="2">Publisher's Website</a>
<a href="http://www.WallaceJackson.com" tabindex ="1">Author's Website</a>
<a href="http://www.Luv2Code.com" tabindex ="3">Tech Reviewer Website</a>

Next, let’s take a look at how you can define the pop-up tooltip text that your HTML5 tags show when your users do a mouse-over action on your user interface design elements.

The TITLE Parameter

: Adding a Title to your Content Element

A dir=“direction” parameter (or attribute) allows you to specify the direction you want your text-based elements to be read. This parameter uses rtl and ltr as options, as well as auto, which will be default for the browser. If you use auto the browser will try to ascertain the correct direction based upon the content (that is, what character set it is utilizing).

To create paragraph text which supports this translation feature use the <p> tag with no translate parameter or with the parameter set to a yes value, as shown in the following HTML5 markup:

<p title="This will display on Mouse-Over">Mouse-Over Text for Tool Tip!</p>

In HTML5 this parameter can be used with any tag, though it is only useful with some tags. In previous versions of HTML, this parameter can’t be used in <meta>, <base>, <head>, <html>, <style>, <param>, or <script> tags.

Summary

This chapter explained global HTML5 parameters (also referred to as attributes or characteristics). In the next chapter, you’re going to look at the HTML5 anchor <A> or <a> tag, which allows hypertext and URL references.

Comments are closed.