Welcome to WebmasterWorld Guest from 54.224.96.57

Forum Moderators: ergophobe

Message Too Old, No Replies

Accessorizing Your Website

Understanding HTML Elements and Attributes

     
3:07 pm on Mar 5, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12169
votes: 55


Before one can delve into the Accessibility and Usability realm, I would think they need to have a solid understanding of HTML Elements and Attributes. For example...

I may be writing a page about the use of keyboard shortcuts. I'm surely going to use the

<kbd>
element to my advantage.

...to copy use the keyboard buttons <kbd>Ctrl</kbd> + <kbd>C</kbd> simultaneously to copy.

Another example...

I need to set up a glossary of definitions. I'm surely going to use the

<dl>
element to my advantage.

<dl>
<dt>Defined Term</dt>
<dd>Definition</dd>
</dl>

Do you think an intimate understanding of HTML Elements and Attributes are imperative to accessiblity and usability?

How do you Accessorize your website?

References

Index of HTML 4 Elements
[w3.org...]

Index of HTML 4 Attributes
[w3.org...]

3:21 pm on Mar 5, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts:1526
votes: 0


I use
<dl><dt><dd>
all the time, but what advantages does
<kbd>
give you? I tend to avoid "non-mainstream" HTML, as it can whack support for older browsers, and support for older browsers is the #1 thing you can do to make your site accessible.
5:19 pm on Mar 5, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12169
votes: 55


But what advantages does <kbd> give you?

The Keyboard Element allows you to use a "correct" semantic wrapper. For example, the

<kbd>
element would be appropriate when writing instructions for using a keyboard.

I tend to avoid "non-mainstream" HTML, as it can whack support for older browsers, and support for older browsers is the #1 thing you can do to make your site accessible.

Actually these are HTML 4 Elements and Attributes that are supported by all browsers. There are elements and attributes which are Deprecated and those are marked as so on the links provided above.

I tend to avoid "non-mainstream" HTML.

I guess it all comes down to what type of visitor you are targeting. That would definitely determine the type of markup structure you utilize.

6:33 pm on Mar 5, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


Got it.

Thanks for the clarification.

I agree. I think there are a lot of tags that may be more appropriate for accessibility, but aren't used that much, or are used incorrectly because the intent is not clear.

The one that immediately springs to mind is a mutated list, such as a

<ol>
used where the number is stripped out, or a
<ul>
used where the number is added, or a
<dl>
, where only
<dt>
tags are used.

Sometimes, a

<table>
is best for accessibility.
9:01 pm on Mar 5, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Personally ...

* Correct use of

<ol>
vs.
<ul>

* Use of
<kbd>
,
<code>
,
<var>
,
<samp>

* Correct use of
<blockquote>
,
<q>
, and
<cite>

* Proper use of
<abbr>
and
<acronym>

* Circumstantial use of
<del>
and
<ins>

* Incidental use of
<dfn>

* Expected use of
<address>

I am also a big fan of frequent use of

<fieldset>
and
<optgroup>
9:17 pm on Mar 5, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


What about
<pre>
?
7:16 pm on Mar 6, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


... and that too.
7:20 pm on Mar 6, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts: 12169
votes: 55


Keeping in mind that the content within the <pre> element is usually without structure, formatted using white space. Non visual user-agents will see that content as one big block (no spaces, no breaks, no nothing) of whatever is between those <pre></pre> elements.

The <pre> gives you a fixed pitched font.

2:46 pm on Mar 8, 2007 (gmt 0)

Full Member

5+ Year Member

joined:Jan 4, 2007
posts:221
votes: 0


<em> and <strong> instead of <i> and <b>?
2:50 pm on Mar 8, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts:1526
votes: 0


<em> and <strong> instead of <i> and <b>?

That is better, but we should still strive to do all CSS for presentation markup.

i.e.:

<span class="italicized"></span>

.italicized { font-style: italic }
3:40 pm on Mar 8, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts: 12169
votes: 55


<em> and <strong> instead of <i> and <b>?

Only where appropriate. I've seen more misuse of <em> and <strong> than other elements. For example, WYSIWYG editors these days come out of the box wrapping <i> with <em> and <b> with <strong>. The users are real quick to highlight text and click that B button to give it visual style. They don't realize that they are creating a semantic nightmare in their code. ;)

P.S. I still use <i> and <b>. Its an old habit that is hard to break. Since they have no semantic meaning I figure what the heck, its still valid markup and it provides me with a quick way to visually style the text. I'll use <em> and <strong> only when I need semantic meaning.

10:26 am on Mar 21, 2007 (gmt 0)

New User

5+ Year Member

joined:Mar 19, 2007
posts:13
votes: 0


What do you mean by "semantic meaning", please?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members