loading...

HTML5 – HTML5 Position: Document Layout and Text Spanning

Let’s talk about the tags in HTML5 that allow developers to group elements and control the content’s position. Let’s also discuss tags that allow the grouped elements to be styled as if they were one single functional unit. These tags include the division <div> tag and the span <span> tag. These tags do nothing in and of themselves; they must be styled.

This chapter looks at the powerful tags in HTML5 that implement advanced content design techniques. We start with the <span> tag because it affects only text elements, and then we progress to the more complex and powerful <div> tag. The <span> and <div> tags have no HTML5 parameters, because they are styled using CSS3. The chapter features no tables, only HTML5 markup examples.

Defining Text Spans: Using the SPAN Tag

The <span> tag is utilized to group in-line elements within your HTML5 document. The <span> tag provides no visual result in and of itself, it must be styled using CSS3 or manipulated using JavaScript. Therefore, the <span> tag provides developers with a way to add external access to be able to hook onto a section of text content, image or document portion encapsulated using the starting <span> tag along with an ending </span> tag.

The following HTML5 markup example uses a <span> tag and the global HTML5 style parameter to color part of the sentence:

<p>Ferrari's come in a <span style="color:red">Ferrari Red</span> color</p>

The primary difference between a <span> tag and a <div> tag is that the <span> tag is used
in-line

(inside of other tags), whereas the <div> tag creates block constructs or deeply nested HTML5 markup constructs (that look like blocks of HTML5 markup, and hence the name “block level construct”).

There are no local or native parameters for a <span> tag in HTML5; however, there are certain global HTML5 parameters that are commonly used with the <span> tag. These include an id or a class parameter

, used to access the <span>, using external CSS3 definitions, and the title tag to allow mouse-over pop-ups to be attached to spanned text elements. Here is an example of these parameters using HTML5 markup from the previous example:

<p>The Ferrari La Ferrari Model will usually come painted in the
  <span  title="This text will pop-up when you mouse-over span">
    Ferrari Red color
  </span>, unless you order it in some custom (other than red) color.</p>

span#myspan { color:red; } /* Externalized CSS3 linked via a .CSS file */

A span can also be used with imagery! This is especially useful when using event handler parameters

. Surround the <img> tag with a <span> tag configured to use onMouseDown, onMouseOut, and onDblClick, to allow your user to single click an image and turn a Ferrari image blue, double-click an image to turn the Ferrari image yellow, and remove the mouse from over the image, to restore the default red Ferrari image. This is done in the following HTML5 markup:

<p>Click image to see a Blue Ferrari, Double-Click for a Yellow Ferrari:</p>
  <span onMouseDown="document.ferrarigif.src='blueferrari.gif'"
        onMouseOut="document.ferrarigif.src='redferrari.gif'"
        onDblClick="document.ferrarigif.src='yellowferrari.gif'">
    <img src="redferrari.gif" height="240" width="480" name="ferrarigif">
  </span>

It is also useful to use the language

related parameters of dir (text direction) and lang (language definition) with the <span> tag, because <span> is primarily utilized to affect text elements, which are affected by languages and text direction.

You can change the text direction within the <span> by using the dir parameter via the following HTML5 markup:

<p>Ferrari comes in a standard <span dir="ltr">Ferrari Red</span> color</p>

You can also define the language used in a span of text by using the <span lang=“language”> configuration. Let’s say a Ferrari is very sexy in Italy as shown in the following HTML5 markup:

<p>Ferrari's are considered <span lang="it">Molto Sexy</span> in Italy</p>

Next, let’s take a look at the <div> tag and how you can use this tag to build complex HTML5 document designs, enclosing HTML5 constructs in <div> tags which have been assigned the id, or class, parameter. First, let’s take a look at the difference between using the id parameter and the class parameter for CSS3 applications, which the <div> tag leverages extensively.

Use of id, vs. Name, vs. Class

There has generally been some confusion as HTML5 has evolved in regards to three different parameters that are used to identify design elements (tags). These are the id, name, and class. I try to clarify what each of these is best suited for in this section of the chapter, since <div> and <span> rely heavily on these to identify them for external processing, since these two tags do not do anything, in and of themselves.

Identifiers
: Use an id for JavaScript and Fragments

The id parameter is short for identifier; more precisely, it is short for fragment identifier. It allows you to go to a specific section of your document, using a URL plus a hash sign (or pound sign) “#” fragment designation. This is done with the # character between the URL and the value which was used in the id=“fragment-id-value” parameter. This is an example of fragment URLs:

http://www.website-name-here.com/webpage-name.html#fragment-id-value

It is created in your HTML5 markup using the <p> tag:

<p id=fragment-id-value>This is a paragraph of text you want to jump to</p>

Within the same document that you are currently in, this is referenced using only the fragment-id-value, inside of the <a> tag using the href parameter and the # sign, like this:

<a href="#fragment-id-value">Click here to go to this fragment/section</a>

It is important to note that you can only use an id name once for any XHTML, HTML, or HTML5 document. A duplicate id tag causes your page to fail validation and can have a negative effect when you are using ids with JavaScript. Besides defining document fragment navigation, the id parameter is important in defining the document elements that you process using JavaScript. Using ids for non-standard applications such as CSS can potentially interfere with this, so use the class parameter for CSS3 selector definitions.

CSS3 can select ids to apply individual styles to them by using the hash sign (#), but JavaScript relies on id as well due to its use of the getElementById() function utilized in .js externalized JavaScript.

For this reason, I’ll recommend segregating the usage of these three different assignment parameters to the use they are most often used for: id for JavaScript and fragment navigation; class for CSS3 selector designation; and name for forms, server, and database usage (remote data server access). This way, you
never get mixed up regarding what you’re using a parameter for!

Classes
: Use CLASS to Classify CSS3 Selectors

Just as is used with CSS3, similarly, class can be used in JavaScript programming. The class parameter is quite different from the id parameter, because class can be used multiple times within the same HTML document. The separation of content (elements, tags, markup) from presentation (CSS styles) is what makes HTML5 powered by CSS so very powerful. Developers do not understand the full extent to which they can use classes because many have become used to using (the much simpler) ids.

It’s important to note that not only can classes be used more than once, but more than one class designation can be used in an HTML5 element (tag), using the same class parameter! Here’s an example of this using HTML markup and CSS definition:

<p>Ferrari automobile's are considered to be:
  <span lang="it" >Molto Sexy</span>
   in most parts of Italy!
</p>
--------------------------CSS3 Selector Definition Below-----------------
.left2right { direction: ltr; }
.asexycolor { color:     red; }

The first piece of code is valid HTML; it shows a <span> using two separate classes in a single class parameter, using a space to separate the two classnames. This technique can reduce your CSS3 stylesheet data footprint (size) considerably if used effectively. It is important to note that you can use both ids and classes on the same HTML5 element, to reference JavaScript (id) and CSS3 stylesheets (class), optimally.

Names: Naming Forms, Controls and UI Elements

The
name attribute
is most often used when sending data in a form submission, and for wiring different form components together with the form, as you just observed extensively in Chapter 15. Due to slightly different parameter conventions, different controls respond to these similar (name and id) parameters differently.

You can have several radio buttons that all have different id attributes, but need to use the same name parameter value to properly define their grouping so that users can only select one option.

At the end of the day,

whether you use name, id, or class is entirely up to you so long as you implement classes and ids properly, and the HTML5 works identically across all of the different browsers, when you test it! It’s really just a matter of personal choice regarding how and when to leverage these parameters.

Define Document Areas: Using a DIV Tag

The division <div> tag is used much like the span <span> tag, except that the area defines is a square area, called a block, rather than a line (or in-line) area, as is common to define with text. I frequently use <div> tags to “stitch” together images and animations to create a seamless user experience. Unlike the semantic tags, the <div> (and <span>) tags are invisible to the search engines and only relate to positioning and styling the content around them, and do not affect the content itself. You should use these design (positioning, styling, and aligning) tags in conjunction with semantic tags to achieve a HTML5 result that is both visually stunning as well as semantically accurate.

The DISPLAY Property: Block, In-Line, and None

As I mentioned earlier, the <span> in an in-line tag and the <div> is a
block tag

. These happen to describe the CSS3 display property, which can also be set to none, which hides that tag (element) from the HTML5 rendering engine altogether. This is different from the hidden property, which renders the space that the element would take up in the design, but makes it invisible (transparent). The none display property actually removes that element from the design altogether, so to make sure your semantic tags did not affect your visual design, you could set their display property to none!

There are also custom display types related to lists and tables, and some hybrid types

such as flex and run-in that bridge the gap between block and in-line for advanced styling.

Examples of elements besides the division <div> that use this
block

display property include the paragraph <p> tag, the header <header> tag, footer <footer> tag, and section <section> tag, the heading 1-6 <h1> through <h6> tags, and the form <form> tag.

Examples of elements (besides <span>) that use an in-line display property

include the anchor <a> tag and the image <img> tag. You might be thinking, “Images are square. Why are these not a block display type?” The reason imagery is in-line is because a text element wraps around it for desktop publishing effects, making the image in-line with that text, in essence.

Examples of some elements that default to a
none

display property include the script <script> tag, which is covered in Chapter 17, the style <style> tag, which is covered in Chapter 18, the title <title> tag, the head <head> tag, the link <link> tag, the meta <meta> tag, and the base <base> tag.

The Division or DIV Tag

: Core Properties

The <div> tag defines some division in or section of an HTML5 document. This is done by using the <div> tag to group elements at the block-level, and then formatting these elements inside of the <div> container by using CSS3 style definitions

. In fact, the <div> element is most frequently used as a generic container for HTML5 visual design, where CSS3 aligns, positions, z-orders, shows/hides, fades, assigns effects to, and styles all HTML5 content contained inside of that division.

Let’s use the <div> tag to add a background color

to the previous example, as seen in the following HTML5 markup:

<div style="background-color:yellow">                
 <p>Click image to see Blue Ferrari, Double-Click for Yellow Ferrari:</p>
  <span onMouseDown="document.ferrarigif.src='blueferrari.gif'"
        onMouseOut="document.ferrarigif.src='redferrari.gif'"
        onDblClick="document.ferrarigif.src='yellowferrari.gif'">
   <img src="redferrari.gif" height="240" width="480" name="ferrarigif">
  </span>
 <p>Everything in this document division will have yellow behind it!</p>
</div>                

This places yellow highlighting behind all of the paragraph text above and below the interactive image and the image itself. As you can see, you have put a global style on all of these contained document elements by using the <div> tag as a division container.

The more common way for a <div> element to be styled is to assign it a classname using the
class parameter

, like this:

<div >
 <p>Click image to see Blue Ferrari, Double-Click for Yellow Ferrari:</p>
  <span onMouseDown="document.ferrarigif.src='blueferrari.gif'"
        onMouseOut="document.ferrarigif.src='redferrari.gif'"
        onDblClick="document.ferrarigif.src='yellowferrari.gif'">
   <img src="redferrari.gif" height="240" width="480" name="ferrarigif">
  </span>
 <p>Everything in this document division will have yellow behind it!</p>
</div>
------------
div.example { background-color :yellow; position: absolute;
              top: 108px; left: 120px; width: 500px; height: 500px;
              z-index: -1; opacity: 0.5; border: solid 1px #000000; }
.example    { background-color: yellow; }

The preceding code adds a background color, positions the <div>, sets a 50% translucency,

sets a z-index to be in the background, and draws a one-pixel solid black border around the division. I also showed an example of how any element with class=“example” is background-colored yellow to show the power of classes.

Although this is not a CSS3 book, I show you some CSS3 in this chapter and in Chapter 18, because it is necessary to show you this material bridge between CSS3 and HTML5 markup, and to show you how certain tags, such as <div>, <style>, <link>, and <span> can work together with CSS3.

It is important to note that the default behavior of the <div> tag when rendered in a browser (or OS) is to place a line break before, as well as after, the <div> element. This can be, and frequently is, changed by the developer using CSS3. In fact, the next thing to look at is how I seamlessly stitch <img> tag assets together using <div> tags and CSS3 for my multimedia-related HTML5 content production pipeline.

Seamless Image Stitching: Using DIVs with CSS3

Now that we have

looked at some less advanced <div> examples, I should show you a more advanced example. Let’s look at how DIVs are used to assemble the various image and animation components for the iTVset.com site, as well as overlaying JavaScript clock elements, all done using <div> tags. JavaScript is covered in Chapter 17 and CSS3 is covered in Chapter 18. Figure 16-1 shows the result of the HTML5 markup we’re going to look at next. This is styled using a CSS3 stylesheet, which we explore after that.

Figure 16-1. HTML5 Design stitched together using DIVs and CSS3

As you can see in the following

HTML5 markup, I am using <div> tags that contain <img> tags, using the class property to address these, and the id property to reference the JavaScript. The <canvas> tag () is covered in Chapter 19.

<div class="c">
  <img src="bk2.png" class="c2" />
  <img src="bk3.gif" class="c3" />
  <img src="bk4.png" class="c4" />
</div>
<div class="d">
  <img src="bk5.png" class="c5" />
  <img src="bk6.png" class="c6" />\
</div>
<div class="h"></div>
<div class="tx"></div>
<div class="p"><p>TEXT CONTENT FOR THE HTML5 DOCUMENT IS IN HERE</p></div>
<div class="j"></div>
<div class="s"></div>
<div class="bu"></div>
<div class="t">
  <img src="tl.png" class="tp1" />
    <!-- TOP UI LINKS ANCHOR TAG MARKUP -->
</div>
<div class="l">
  <img src="lt.png" class="lt1" />
    <!-- LEFT UI LINKS ANCHOR TAG MARKUP -->
  <img src="lb.png" class="lt2" />
</div>
<div class="r">
  <img src="rt.png" class="rt1"/>
    <!-- RIGHT UI LINKS ANCHOR TAG MARKUP -->
  <img src="rb.png" class="rt2"/>
</div>
<div class="b">
  <img src="bl.png" class="bt1"/>
    <!-- BOTTOM UI LINKS ANCHOR TAGS MARKUP -->
  <img src="b.png" class="bt2" />
</div>
<div >
  <canvas  width="500" height="500"></canvas>
</div>

To create what you see in Figure 16-1, I’m using CSS3 to define a background-image property for the <div> tags that do not contain <img> tags. I use absolute positioning and I define precise pixel locations by using the top, left, width, or height properties. I control image tiles using the fixed and no-repeat properties, and opacity, background-color, and border using the CSS3 properties that bear those names. You can look at the DIV classname to see what CSS3 positions and loads each image area.

div.time {position:absolute;top:108px;left:120px;width:500px;height:500px;}
div.p    {position:absolute;top:-216px;left:694px;width:446px;height:400px;}
div.tx   { position:absolute; top:150px; left:680px; width:460px;
           height:400px; background-color:#000; opacity:0.35;
           border:solid 1px #ccc; }
div.c    { position:absolute;top:48px;left:0px;width:1280px;height:624px; }
div.c img.c2 {position:absolute;left:0px;width:270px;height:80px;top:0px; }
div.c img.c3 {position:absolute;left:270px;width:640px;height:80px;top:0px;}
div.c img.c4 {position:absolute;left:910px;width:370px;height:80px;top:0px;}
div.d    { position:absolute;top:128px;left:0px;width:1280px;height:544px; }
div.d img.c5 {position:absolute;left:0px;width:1280px;height:480px;top:0px;}
div.d img.c6 { position:absolute; left: 0px; width: 1280px; height: 64px;
               top:480px; }
div.s    {position:absolute; left:0px; width:1280px; height:56px; top:608px;
          background: no-repeat; background-image: url(s.png); }
div.h    {position:absolute; left:0px width:1280px; height:128px; top:128px;
          background: fixed no-repeat; background-image: url(sy.gif); }
div.j    { position:absolute; left:176px; width:96px; height:720px; top:0px;
           background: fixed no-repeat; opacity: 0.6;
           background-image: url(jy.gif); }
div.bu   { position:absolute; left:525px; width:44px; height:720px; top:0px;
           background: fixed no-repeat; opacity: 0.4;
           background-image: url(bu.gif); }
div.t    { position:absolute; top:0px; left:0px; width:1280px; height:48px;
           background-image: url(bk1.png); }
div.t img.tp1 { position:absolute;left:18px;width:56px;height:45px;top:2px;}                                                                      
div.t img.tp2 { position: absolute; left: 1187px; width: 56px; height: 45px;
                top:2px; }
div.l    { position: absolute; top: 0px; left: 0px; width: 64px;
           height: 652px; background-image: url(bkg7.jpg); }
div.l img.lt1 { position: absolute; left: 18px;width: 45px; height: 56px;
                top: 64px;}
div.l img.lt2 { position: absolute; left: 18px; width: 45px;
                height: 56px; top: 594px; }
div.b    { position: absolute; top: 664px; left: 0px; width: 1280px;
           height: 48px; background-image: url(bk7.png); }
div.b img.bt1 { position: absolute; left: 18px; width: 56px;
                height: 45px;top: 3px; }
div.b img.bt2 { position: absolute; left: 1187px; width: 56px;
                height: 45px; top: 3px; }

Next, let’s look at the JavaScript <script> tag. I reference the <canvas id=“clock”>

tag in my clock JavaScript.

Summary

This chapter covered tags that define areas in HTML5 and earlier versions, including the <div> and <span> tags. The next chapter looks at the HTML5 JavaScript <script> tag.

Comments are closed.

loading...