Web Design Software

Click on a tag to jump to its section:
<div> | <aside> | <article> | <footer> | <nav> | <- more info about the four tags to the left | <span> | <abbr>

This lesson introduced various software packages used to graphically develop web pages, most notably Microsoft's "Expression Web 4" and Abobe's "Dreamweaver CS6". It also introduced the HTML concept of areas -- using aspects of the <div> tag as well as <aside>, <article>, <footer>, <nav>, <span>, and <abbr> tags.

Because all of these tags, and the state of the current usages, are new to me I have taken the libery of using W3School's definitions, placed in quotes (with some paraphasing by me to fit this page). I'll see if I can show some examples along the way.

The division tag (<div>):

"The <div> tag defines a division or a section in an HTML document. It is also used to group block-elements to format them with CSS." Keep in mind that it applies a paragraph break in the page when used (<span> does not). Also, one notable change to the <div> tag is that the align="" attribute has been depricated in HTML 4.01 and removed in HTML5. An example of a "group block", used in cunjuntion with CSS:

Of course, this can also be used with internal or external Style Sheet where class selectors can be used to great effect. Click here to read more about class selectors.

Click here for more information on <div>.

The aside tag (<aside>):

"The <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content." Ok, yes, this definition didn't help me much, either... In simpler terms, it is used to denote content that is be treated as an aside would be when speaking -- it is in addition to but not directly related to, the primary topic. An example (notice the change in font):

Here I am taking about something -- my main point. Oh, that reminds me . . .

. . . OK, back on my main point now.

Click here for more information on <aside>.

The article tag (<article>):

"The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site." An example (which looks a lot like <aside>, huh?):

Here I am, again, talkng about, oh, cars, blah, blah, blah.

Once again back on topic.

Click here for more information on <article>.

The footer tag (<footer>):

"The <footer> tag defines a footer for a document or section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. You can have several <footer> elements in one document." This one is easy:

Click here for more information on <footer>.

The navigation links tag (<nav>):

"The <nav> tag defines a section of navigation links. Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links." Thusly:

Click here for more information on <nav>.

More information about the <aside>, <article>, <footer>, and <nav> tags:

These tags are really intended to be used with CSS so that areas of the website are set apart for use by these tags. The navigation tag, for instance, may have an area along the left side of the screen for menu (navigation) items and the footer tag will probably have an area at the bottom of the page. As presented here, they're not much more useful than traditional HTML tags. An example of some CSS code that works in junction with the footer tag:

The span tag (<span>):

"The <span> tag is used to group inline-elements in a document. It provides no visual change by itself. It provides a way to add a hook to a part of a text or a part of a document." Wow, sounds like the <div> tag, huh? In fact, the only difference is that <span> doesn't apply a paragraph break like the <div> tag does. Our example from the <div> section with the tags changed to <span>:

Of course, this can also be used with internal or external Style Sheet where class selectors can be used to great effect. Click here to read more about class selectors.

Click here for more information on <span>.

The abbreviation tag (<abbr>):

"The <abbr> tag indicates an abbreviation or an acronym, like "WWW" or "NATO". By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers." What this definition doesn't mention is that when the user pauses their mouse of the abbreviation for a moment, the full name can be displayed when the title="" attribute is used. In this example, make certain to pause over the abbreviated word for a moment:

The people at the WWP are doing a great job!

Click here for more information on <abbr>.

Click on a tag to jump to its section:
<div> | <aside> | <article> | <footer> | <nav> | <- more info about the four tags to the left | <span> | <abbr>

NAUTILUS:
I can say that most all of this lesson was new to me. The web design software I'd been using was woefully out of date and did not support HTML5. I knew of the <div> and <span> tags -- but not in the ways they were being used in this lesson. I'd never heard of the <aside>, <article>, <footer>, <abbr>, and <nav> tags until this lesson. I also learned that trying to code a page using these tags, and their associated CSS, is almost impossible in a text-based editor such as Notepad++ (maybe it would get easier with a lot more practice)!