Forums | MacLife

Stan wrote:

Light Speed wrote:

Code:

<ul>
<li><a href="index.html">Home</a></li>
<li>:</li>
<li><a href="about.html">About Me</a></li>
<li>:</li>
<li><a href="news.html">News</a></li>
<li>:</li>
<li><a href="forums/forums.html">Forums</a></li>
<li>:</li>
<li><a href="links.html">Links</a></li>
</ul>

The main thing is: there's no advantage to marking up a list like that. You've wasted 9 characters for each colon. If you're not worried about bloat, then you're still wasting time with extra kestrokes and/or mousing around. I don't see anything wrong with using a colon as a separator, but I would use a pipe "|." Something like this would be much more semantic and quicker and easier, too.

Code:

<ul>
<li><a href="index.html">Home</a> | </li>
<li><a href="about.html">About Me</a> | </li>
<li><a href="news.html">News</a> | </li>
<li><a href="forums/forums.html">Forums</a> | </li>
<li><a href="links.html">Links</a> | </li>
</ul>

so if each <li> is 150px wide that's gonna look a little weird as the pipes will not be centered between the words.

How would you do it to allow this:
Home        |       About Me       |       News        |       Forums        |         Links

Using pipes and not right borders on the first four li elements?

Antonio wrote:

He's doing it the best way, as he wants the colons to inherit the same styles as the other list items, because, in the end, he's writing less code and taking less time (best practices) by taking advantage of inheritance without sacrificing usability. If you turn off his styles, the colons aren't going to inhibit the reader's ability to read his page, nor will they break his links or prevent the reader's ability to select them.

I think this pretty much sums it up. This isn't even live code and was just an off the cuff example that may not be semantically perfect but works just fine.

Last edited by Light Speed (2007-12-23 10:36 pm)

Miles wrote:

Code:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="89" height="27">
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button1','','home_hover.gif',1)" onclick="window.location='index.html'">
        <img src="home.gif" alt="button1" name="button1" width="89" height="27" border="0" id="button1" />
      </a>
    </td>
    <td width="97" height="27">
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button2','','about_hover.gif',1)" onclick="window.location='about.html'">
        <img src="about.gif" alt="button2" name="button2" width="97" height="27" border="0" id="button2" />
      </a>
    </td>
    <td width="85" height="27">
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button3','','news_hover.gif',1)" onclick="window.location='news.html'">
        <img src="news.gif" alt="button3" name="button3" width="85" height="27" border="0" id="button3" />
      </a>
    </td>
    <!-- ... -->
  </tr>
</table>

Ouch. Solutions which pose a serious threat to usability make for bad sarcasm

Light Speed wrote:

Miles wrote:

Code:

Wonky javascript stuff

Gosh that's purdy code........ MY EYES ARE BLEEDING!!!!!

Nah, it's actually a pretty common javascript implementation.

Antonio wrote:

Light Speed wrote:

Miles wrote:

Code:

Wonky javascript stuff

Gosh that's purdy code........ MY EYES ARE BLEEDING!!!!!

Nah, it's actually a pretty common javascript implementation.

8 Years ago ........

Antonio wrote:

...Yes, you suggested just that, and continue to do so in your example. In doing so, you make standards and semantics one and the same.

This kinds of comments are effectively trolling. 
I suggested no such thing, I clearly stated what there relationship is.  And my example clearly illustrates the exact opposite of your interpretation. Please read for accuracy.  And your second statement is of the exact same nature.  Again you are interpreting things that are were not said.  Actually, I never mentioned 'standards' at all.  And by your bringing them up in the fashion illustrates you don't understand the difference. 
Standards != content separation != semantics

'Web standards' is the practice utilizing the tools in a proper way to ensure maximum device compatibility, forward compatibility and assesibily. There is more to it also, but that sums up core of web standards
Read : http://www.webstandards.org/learn/faq/#p2

It starts with content.  And then marking that up using the tags as defined in the HTML spec by WC3.  Each element has a tag defined to indicate what it is.  Browser default styles will create basic visual mark layout of that content.  Further styling (the presentation layer) is provided by CSS.  This can be on a device by device basis.

Now just stop with that thread of comments, I have again clearly indicated how elements brought up are interrelated, and am in no way suggesing they are the same.  If you are getting that from what I am saying, then the root problem resides in your ability to comprehend written English.

Antonio wrote:

This example doesn't work, because he's not using commas. Also, he's making a link menu, not writing a business report or an essay. The colons aren't grammatical items.

Uh.. wow. Not sure if you really don't understand my point are being intentionally obtuse.
As I said a list is a group of related elements.  In English, you can represent a series of elements within a sentence by separating them with commas.  I was presenting them in an alternate acceptable manner in hopes that would clarify why it is grammatically (and there for semantically) inappropriate.

Correct:
• Dog
• Cat
• Monkey
or
Dog, Cat, Monkey

Incorrect:
• Dog
• :
• Cat
• :
• Monkey
or
Dog, :, Cat, :, Monkey

Sorry to confuse you.  But this may be root of the problem.  Unformatted content is wrapped with html tags based on basic grammar.  Pretty much grade school stuff.  If you comprehend grade school grammar, using html to mark up a page should be a breeze and cause no confusion.  Colons as artificial separators will fail your 5th grade teacher and will fail semantic markup, and by extension web standards, and content separation. *

It is really simple.

* So you are not confused, by saying that I am not saying all three are the same.  They are all different things, but one failure affects all three.  You fail separation by including presentation information in the content, and you fail standards for both assecibility and non-semantic markup.

Antonio wrote:

This doesn't work either, anymore than it would work when using it to judge magazine layout, for the same reason your previous above example doesn't work. When graphic design is involved, typography comes into play.

Umm... did you read what you wrote?  "Layout", "Graphic Design", "Typography"  these are all presentation terms.  They have nothing to do with html markup.  Key point of the discussion here: separation of content and presentation.
Graphic design is NOT involved here.  That happens at the presentation layer. 

Antonio wrote:

In typography, type isn't necessarily grammatical -this isn't 1997.

I really don't think you understand the terms you use here.  Typography "isn't necessarily grammatical"?... typography has nothing to do with grammar at all. (except for the forms punctuation).  Typography is the art of the letter form.  It is not gramar, spelling or layout.  Letter forms (typography) are used in all those things.

Have you ever worked at a magazine or newspaper?  I am guessing not.  It (in core essense) is no different than web production.  Content is provided by writers and editors.  Depending on the software or tools used, they are provided in a raw type format.  In all the places I did layout/design they were provided in a word doc by the copy editors.  These contained no formating other than the very basic. (paragrah, headings, bold, etc...).  From there the process varies widly depending on many factors, but suffice it to say, until it enters the layout/design/art process, design choices are not made or applied to the content.

Additionally, when I used the term "paper", I was referring to a collegiate or school paper where layout is not involved, just structure.  A newspaper may do many things at the design level, but none of those choices are made at the writing or copy editing phase.  In fact, depending on the software, by the time it gets to the level where content is being laid in, it is a raw marked text format, not to dissimilar from html.

You are correct in one aspect, it is not 1997.  Today tools allow for web developers to do things the correct way and CSS is now robust enough to allow proper separation and the ability to semantically mark things up.  In 1997 we used tables to create colums and all kinds of other nonsense and had to consider layout when marking up the content.  Not so today.

Antonio wrote:

...and you lose my attention, along with any chance of convincing me you're right about any of it, even if you are (which you're not).

My goal was not to convince you, I don't believe you understand the underlying concepts enough to grasp what I am saying.  The reason I raised the point is that this place has long been a place to for people to seek answers from those more knowledgeable.  Myself included.  My goal here was to correct the spreading of incorrect information.  It was stated that the example provided was acceptable according to web standards and semantic markup.  Quite simply it is not.  Those things are well defined, and it simply does not meet those criteria. 

Antonio wrote:

Especially in an industry where there are multiple ways of doing most things, and most of those ways aren't necessarily wrong.
Changing "mystical" to "mythical"? Why bother? Again, it's ego, personal preference, and personal interpretation or use of standards.

Standards are not up for personal interpretation.  Hence the use of the term "Standards", otherwise they would be called "suggestions", or "opinions".
I use the term mythical because when people talk about "grey areas" are most often talking about things that don't exist.  Either because they don't understand the concepts or have never bothered to read the specs.  There are very few "grey areas" at all, and most never come up in typical web development.  This example is not a grey area at all.  The proper use is clearly spelled out.

Everything has multiple ways of doing things. Like building a house or designing a car.  But like those things web development is built upon multiple technologies which all have their own rules.  The tools and infrastructure is well defined and very clear.  Given a chunk of content, there is very little room to play when semantically marking up a page.  Groupings may differ and certainly classification and identification will vary.  But a header is a header, a paragraph is a paragraph, a link is a link.  Lack of knowledge is no excuse for condoning/ignoring improper usage.  Read the spec, read a book on it.  You will find that virtually no areas that you use are not covered.

Antonio wrote:

He's doing it the best way, as he wants the colons to inherit the same styles as the other list items, because, in the end, he's writing less code and taking less time (best practices) by taking advantage of inheritance without sacrificing usability. If you turn off his styles, the colons aren't going to inhibit the reader's ability to read his page, nor will they break his links or prevent the reader's ability to select them.

No, he is not doing the best way.  Simply add them via the :after pseudo class.  That maintains the style and is semantically correct.
There is no code savings.  It will appear awkward and incorrect if styles removed, true readable, but awkward.  And is impractical for accessibly.  Imagine a screen reader.  As the colons are not in a sentence they could be read aloud or create additional pauses.  Since they are given the same weight and importance as the links, which obviously they should not be.  Or think about a text only browser on a phone with only four lines of display.  Your list of links may only be four lines, but it will take up seven lines on the screen.  Sure these are minor and not huge inconveniences, but by simply doing things the proper way you avoid all of these issues. Not to mention how spiders will deal with them it if is your primary navigation.  You could be sacrificing good indexing by having what equates to nonsense in your primary navigation. 

You can achieve all your design goals using proper semantic markup and CSS, and avoid user inconveniences and any of the potential problems listed above.  There is no valid reason to not do this proper way.


-----------


To be clear, I am not being the standards police here.  If the method works for you go for it.  If tables work for you, go for it.  The developer should know his audience and needs.  For example the other day I used tables for page layout and very good reasons to do so.  But I would by no means claim it was to standard or semantic.  It was neither.  That is the point of posting here in this thread.  It was claimed that the list example was acceptable in terms of semantics and standards.  It is not.  It may work, it a perfectly acceptable solution for your needs, but that does mean it is semantic, and therefore to standard.  That is the key distinction. 

If you want to achieve the same goal AND be semantic, exclude the colons and use the :after pseudo class in conjunction with identifiers or bake it into a background image if that works for you.  There is no need to include presentation only elements with in the content.

Though easier said than done depending on your nature, it really helps to not consider appearance at all when assembling/constructing/editing content (or place holder content when working with dynamic content).  And when working with dynamic content, drawing that hard line is invaluable.


-----------

Further reading:
http://www.w3.org/QA/Tips/unordered-lists
http://www.w3.org/
http://www.webstandards.org/learn/faq/#p2
http://en.wikipedia.org/wiki/Semantic_H … antic_HTML

I'm not going to read all that, but speak of trolling, again, it's more you on a soap box than anything (which is one reason I'm not reading all that, the other being that this is an online forum, so I'll not dedicate my life to it).
As far as the core concepts, I understand them as well as you or anyone else here, and while on your soap box, you've made some bad assumptions, but that's okay -my goal was never to convince you otherwise. This isn't about me and, despite your obviously healthy self-image, you're not that important. It's not about you either, or at least it shouldn't be.
Yes, this place is a place where people come for information. Not bloated ego.

Last edited by Antonio (2008-01-01 5:54 pm)

semantic gods say,
"put the colon on the left,
sans :first-child." amen.

Last edited by Miles (2008-01-06 3:16 pm)

If you want to look at layout design for documents - read the LaTeX Companion. Even if you don't use LaTeX. It goes into all that typesetting stuff in exquisite detail.

Another good reference that is free is the documentation for the LaTeX memoir class.

Most of it I have trouble understanding - those LaTeX guys are hard core about proper layout design.

Of course their media is print, not web.

Any punctuation should be a part of the list item. ie: within the <li> element. Colons are supposed to introduce a list of items, not separate them. List items themselves don't necessarily have to have punctuation to be correct. Periods, commas and semicolons can all be used correctly so long as they're used consistently.

In the case of nav list items using the presentation layer to create separation makes complete sense.

I'd do <li class="first"> (I use "first" so all my styled lists are consistent, but are still targeted specifically by an ID on one of its parents).