digital-web.com — Markup is the technical foundation of front-end code. In one way or another, it influences or is influenced by design, content, accessibility, CSS, DOM scripting, and more. The quality of your markup will affect the quality of related code, and even the cost of implementing or maintaining that code. Your markup might be good now, but following...
Apr 13, 2007 View in Crawl 4
maexusApr 14, 2007
I knew all that but it's a great article none the less. Prevents disasters like the code soup of Myspace.
higherlogicApr 14, 2007
@ phoopee3: "where do these people work that they have the time to line everything up right using divs and s**t?"I always hear this from people who use tables, how it takes so much longer to create a tableless website. The only reason you feel this way is because you can't create a tableless layout.If you could you (a) wouldn't have backed up table-based layouts and (b) you would know that you can whip out a tableless layout in the same, if not less, amount of time it takes to create one with tables.
higherlogicApr 14, 2007
A microformat is basically like a "convention," or a formally recognized set of markup that external (and internal) sources can use.The vCard example on Wikipedia was a good example:<a class="user" href="http://en.wikipedia.org/wiki/Microformats#Example">http://en.wikipedia.org/wiki/Microformats#Example</a>They first showed you how you could display the same information with no extra markup. The second example, however, because of the added class names and wrapping vcard class, an external source (such as a mail program) can identify this bit of markup on your page and do something with it.A really good example that probably most web designers have used is the rel="nofollow" attribute on the anchor (link) tag. Google (and correct me if I'm wrong, but I think other engines use this now too) recognizes this bit of code, even though it does nothing at all to some crawlers, and won't follow the link (typically to an external source) and give it weight.
tjansonApr 14, 2007
Completely agree with jncoward."Thats pretty ridiculous floating everything left. Then you'd have to also say clear left on the ul, and ASSUME each thumbnail is evenly sized (100x100 or whatever) and this isn't always the case. Floating multiple elements in a single container is a no-no. Besides, wouldn't display: inline get li's to stay in line?If you have a gallery that displays 25 photos per page, thats a 5x5 data grid of photos. Perfect use of a table."Every single word you just said is BS (sorry, don't feel offended, but...):"pretty ridiculous" - No?"you'd have to say clear left on ul" - Nope, you'd have to clear *after* the ul, and you could perfectly use br or hr which would be semantically fine"evenly sized" - Well, okay, so give the li's a static height and width and display as block"floating multiple elements in a single container is a no-no" Don't even now what you're trying to say... Okay, I guess you say that you shouldn't float more than one element in its container? Dude... You mean like Digg does in the footer? Take a look if you got Firebug. Damned float:left definition lists in a container."besides...inline" - Hm, okay, I'd make them block elements as well"perfect use of a table" - ARGH! Haven't you read any of the comments above, the article, and everyone else screaming "table - tabular data"!? That's the whole f***ing point of the complete debate.Sorry if this comment is completely boring for those not interested in HTML, but I couldn't resist.
resplenceApr 15, 2007
Oh, ok. I think I get it now. The examples of formatted content being easily extracted by third-party programs really drove the point home. I still don't see much use for the general public as of yet, but I guess this is how profound changes that are ahead of their time start.
higherlogicApr 15, 2007
>> There's still plenty of well documented bugsI never said there were not any bugs, just that these bugs are usually the result of people doing things incorrectly in the first place. I've encountered one bug in Firefox that bothers me to no end (the anchor tag, specifically set as a block element with a background and different a:hover background, it breaks in Firefox randomly, so it's not improper coding).>> for example the pre-IE7 support for alpha channel PNGs.I agree with the PNG with alpha channel support, but that doesn't mean you can't get around it. I exclusively use PNG files for my websites, and if I have to use transparency, will use PNG-8, or PNG with index transparency. There's always a way around something without resorting to a hack.>> Or the lack of pseudo-class supportThe pseudo-class issue is bothersome, but workable. You learn to code without resorting to techniques that you shouldn't use (or if you do use, aren't really adding any value to your site).>> try to make an IE6 compatible drop-down-menu without JS.If I want a drop-down menu, I'll use a form element. I'm a usability nut.>> Wikipedia's layout and design isn't particularly complicated, right?Looking at someone else's code doesn't say much. I could create the Wiki layout without any hacks. That just tells me the developer who did the markup doesn't fully understand how to do it either.I make pretty complex sites that are hack-free, so I cannot understand why someone would need to use a workaround, a hack, an alternative stylesheet, etc. And when I do hear people complain, I always ask to see their website. 100% of the time, it's evident just from looking at their designs that they are not what you would call a professional. They may _think_ they are, but they aren't even close.If you stick with proper, well-structured, semantic markup, and employ usability in your designs and added technologies (like a drop-down navigation) then you can do without any of the aforementioned hacks and alternatives.I'll even wager a bet on it, which I've done countless times on design forums, to which (at no suprise) on one bites.
astrotrainApr 16, 2007
Nothing mentioned about staying away fro Front Page or anything Microsoft for coding HTML. This should be Guideline #1.
garyl2kNov 27, 2007
<a class="user" href="http://www.freegifts4you.co.uk">http://www.freegifts4you.co.uk</a>
mendiggMar 30, 2008
Good info. Now for some guidelines for The Digg Kids to know how to use grammar and spelling. <a class="user" href="http://domikua.com/">http://domikua.com/</a>