Thursday, June 16, 2022

Hack 2. Adopt Common Structures

✔ Urdu Point on June 16, 2022 0 Comment


Many web documents have similar structures. Take advantage of markup that makes it easier to share styles and expectations.

Web designers and developers have long conformed to structural components on a page. A common high-level page structure may look something like the following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <title>...</title>
    </head>
    <body>
        <div id="header">...</div>
        <div id="nav">...</div>
        <div id="article">...</div>
        <div id="footer">...</div>
    </body>
    </html>

Take note of the “structural” ids in the page. This reflects well-organized content and a clean structure for the page. The problem with the preceding code is that almost every element in the markup is a div. Divs are great, but they are of little use in page definition without associating them with an id. The problem with using ids for role association is that when you want to use them for another purpose—say, to identify a doc tree—you run into problems: as soon as you add a tool such as YUI Grids or WordPress to a page that actually uses the id of a div, it conflicts with your div “roles,” and the next thing you know you are adding layers of divs just to satisfy your structural needs. As a result, the clean page shown earlier may now look something like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <title>...</title>
    </head>
    <body>
        <div id="header">
        <div id="nav">
            <div id="doc2">
                <div id="wordpress-org-2833893">...</div>
            </div>
        </div>
        <div id="article">
            <div id="doc2">
                <div id="wordpress-org-887478">...</div>
            </div>
        </div>
        <div id="footer">...</div>
    </body>

You can see pretty quickly where this gets messy, yet we don’t want to abandon the idea of structural elements that declare page segments—many code readers, such as screen readers and search bots, have come to rely on structural conventions. As with many parts of HTML5, the new structural tags have provided a simple solution to the problem of added complexity. Let’s build our page with structural elements:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>...</title>
    </head>
    <body>
        <header>...</header>
        <nav>...</nav>
        <article>...</article>
        <footer>...</footer>
    </body>
    </html>

Once again we have a simple, clean HTML5 solution that keeps our page easy to work with, and easy to consume by screen readers and search bots. This same code can meet the needs of our third-party products as well, as shown in the following solution:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>...</title>
    </head>
    <body>
        <header data-yuigrid="doc2" data-wordpress="2833893">...</header>
        <nav>...</nav>
        <article data-yuigrid="doc2" data-wordpress="887478">...</article>
        <footer>...</footer>
    </body>
    </html>

We’ll get into the data- attributes later in this chapter, but for now you just need to understand that this solution allows you to keep the structural elements of the page and let third-party components apply identifiers to the nodes, while freeing up the id attributes for the page author to control. Take note, third-party developers: never assume that the id of an element is yours to consume!

All That and More

HTML5 didn’t stop at the new tags discussed in the preceding section. Here’s a partial list of some of the new HTML5 markup tags to take note of:

<article>

<aside>

<figcaption>

<figure>

<footer>

<header>

<hgroup>

<mark>

<nav>

<section>

<time>

<keygen>

<meter>

<summary>

A lot of these tags grew out of common use by web developers. The W3C smartly decided to “pave the cow paths” instead of trying to change the behavior of web developers. This way, the tags are generally useful for immediate adoption.

In most cases each tag’s intent is pretty obvious. The <header> and <footer> tags do exactly what they say: they outline the header and footer of the page (or app). You use <nav> to wrap your navigation. The <section> and <article> tags give you options to the overused <div> tag; use these to break up your page according to the content (e.g., wrap your articles in the <article> tag). The <aside> tag acts in a similar way to the <article> tag, but groups the content aside the main page content. The <figure> tag refers to a self-contained piece of content, and so on and so on. Note that this list is not conclusive and is always changing. Visit the w3schools website for the most complete list I could find.


SHARE THIS
Urdu Point

Author:

urdufundastory.blogspot.com is the first of its kind of trendsetting venture existent in Pakistan. It is for the first time in the history of this nation that a large scale project of such nature, evolved from an extraordinarily revolutionizing concept to a practical fulfillment.

0 Comments: