UItrends Web Design Tip #1
Hello and welcome to the first ever UItrends tip!
If you are a web designer and upon viewing the source code (Firefox shortcut: Ctrl + U or Internet Explorer longcut: Alt + V + C) of a recent project of yours, you happen to see anything that resembles any of the following tags:
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
- <table> (For layout)
- <td>
- <tr>
- <IFRAME>
- <frame>
- <frameset>
- <hr>
- <br>
- <font face=”Arial” size=”1″>
- <bold>
-
<strong>
OK, this has been removed. Thanks for the feedback!
- <center>
- <map name=”Map”>
- <area shape=”circle” coords=”101,396,82″ href=”#”>
- <b>
Please stop! I know these tags have been your trusty friends that you’ve gotten to know very well over the years and you’re having a hard time leaving them, but what you might not know is they are creating more work for you, slowing development, creating unorganized code, painful website updates, larger file size and slower times for your website visitors. I beg you, please join us here in the modern web design community where CSS and XHTML is your new best friend. I promise you will love them and in return they will honor and cherish you from here until eternity… or maybe just until CSS3 and HTML5 are widely accepted and we rightfully trash the current standards and start the cycle all over again.
Jeremy
Nov 12, 2009
9:59 am
What’s wrong with ? And how would you code a clickable country map without using and ?
Tweets that mention UItrends Web Design Tip #1 | User Interface Trends -- Topsy.com
Nov 12, 2009
10:10 am
[...] This post was mentioned on Twitter by Benjamin Dobson and Jeff Noble, Russell Wilson. Russell Wilson said: New post: UItrends Web Design Tip #1 (http://cli.gs/HYDh6) http://cli.gs/HYDh6 #CSS #web_design #web_design_tips #web_standards #xhtml [...]
Razvan Caliman
Nov 12, 2009
10:14 am
bold, strong and b are all on you list of not-so-friendly tags.
Why?
Mike
Nov 12, 2009
10:20 am
I agree with everything but the …Whats wrong with using that?
Mike
Nov 12, 2009
10:22 am
sigh, my comment got messed up, whats wrong with the strong tag?
jlarson
Nov 12, 2009
10:23 am
What are the new alternatives to map and area? I ended up having to use them in a recent project.
And there are still just a few places where tables cannot really be replaced yet, not cross browser and reliably… Or at least I haven’t worked out how. When I can use CSS on divs and get a grid layout that will never ever end up flowing a cell onto the next row incorrectly, then I can abandon tables fully…
Matt Bango
Nov 12, 2009
10:25 am
While I agree with the post, I’m going to play devil’s advocate and question your suggestion to use XHTML. The W3C will stop work on XHTML 2 at the end of this year and switch their focus on HTML5. With that being said, shouldn’t we be writing HTML5-ready HTML 4.01 instead of sticking with XHTML (which is going no where)? It may simply be a matter of personal preference at this point.
Robert Grant
Nov 12, 2009
10:27 am
You forgot SPAN
God I hate SPAN
Jeff Noble
Nov 12, 2009
10:43 am
Hey Everyone,
Thanks for the comments, that’s awesome. I believe Jeremy was the first one to question the use of “strong” but like Mike’s post our Wordpress comment deal mangled your posts. That’s our bad.
I agree strong isn’t as bad as some of the others listed, but really it should be a style that you can control separately in a style sheet, not mixed in with your HTML as part of the presentation.
For example if I have a website client that told me they want a certain phrase or term bold on their site and I rush off and put a bunch of strong tags around that term, what would I do if they told me they also wanted it in italics, with a different font color, and possibly different font size, etc? If you set it up originally using a style in you CSS you could go that definition and add whatever you want, make the changes, and it will apply instantly to every single page in the site. Otherwise, it’s back to the drawing board and you are adding a bunch more tags around the original phrase.
Make sense?
CoryMathews
Nov 12, 2009
10:54 am
@Jeff Noble no it does not make sense.
Strong is a valid tag, if you need your strong tags to be a different color you change the css for the strong tag. You DO NOT add a span/div tag with some bold class on it. This kills seo and is just plain retarded.
hr and br tags are also fine. If you need a divider why use something besides an hr? thats what it was made for. If you want it to look different then style the thing. If you need to start on a new line why would you not use a br tag?
btw your xhtml and css both do not validate for this site, so please remove the year 2000 validate links.
TheFella
Nov 12, 2009
10:57 am
So, you put strong tags around the words they want bold. If they want a different colour, italics, you can style the strong tag just as you can any other one. Strong doesn’t necessarily mean bold, it just depends on how you style strong in the CSS.
For my tuppence worth, strong is a perfectly valid tag, even in HTML5.
Robin, span is also completely fine, as long as it’s not overused. It’s a fantastic way of marking up microformats.
Jeff Noble
Nov 12, 2009
11:00 am
Hey Matt Bongo,
Great point. I can’t really say it better than the webstandards.org folks, who specifically site XHTML as “XHTML is easier to maintain, XHTML is XSL ready, XHTML is easier to teach and to learn, HTML is ready for the future.”
http://www.webstandards.org/learn/articles/askw3c/oct2003/
Strangely… the article above appears to be written in 2003.
uberVU - social comments
Nov 12, 2009
11:07 am
Social comments and analytics for this post…
This post was mentioned on Twitter by uitrends: New post: UItrends Web Design Tip #1 (http://cli.gs/HYDh6) http://cli.gs/HYDh6 #CSS #web_design #web_design_tips #web_standards #xhtml…
Jeff Noble
Nov 12, 2009
11:14 am
All the tags mentioned in the article are valid. I never said they weren’t. I said stop using them and use CSS instead.
@CoryMathews – Good point about SEO, I hadn’t thought of that… might have phrased it a bit differently. I’ll check the validation, technically we don’t say the site does validate, but YES. It should. Evidently Russ Wilson claims it at some point validated.
@TheFella – What if you had two strong styles that you want to appear differently? Changing the default CSS won’t address that.
TheFella
Nov 12, 2009
11:17 am
@Jeff – you could have classes on the strong if you really wanted. I would style them doing:
.summary strong { style }
.intro strong { another style }
The strong tag is there for showing importance, and that’s it. It should be treated like any other valid tag.
Kyle Bragger
Nov 12, 2009
11:23 am
Curious why you’d include strong, hr, and br in your list. Also, tables still are incredibly useful when presenting tabular data.
Rob
Nov 12, 2009
11:24 am
Guys, though the W3C stopped working on XHTML2 (they did not abandon it but moved resources to HTML5), XHTML is still working, valid, and a working part of HTML5, known as XHTML5. It’s not going away at all and, for those of us who use RDFa and REST, we hope it never does.
Russell Wilson
Nov 12, 2009
11:28 am
@TheFella – is strong really for showing importance? Isn’t that the job of H1, H2, H3… tags?
TheFella
Nov 12, 2009
11:34 am
@russell – yes that’s the job of h1, h2, etc, but you have to realise that the h is for heading. Headings are the most important content so to speak, but what if you want to draw attention to something inline? That’s the job of strong, em and mark.
Less important than headings obviously, but still important enough to warrant drawing your attention to.
Bojan
Nov 12, 2009
11:35 am
What about accessibility and the screen readers which *do* recognize “strong” to mean alter pronunciation?
Jeff Noble
Nov 12, 2009
11:36 am
@Kyle – Tables are great for tabular data…. not for layout which is why I specified “(For Layout)” part.
The others you mentioned I would just use CSS.
Angelo R.
Nov 12, 2009
11:37 am
@Russell Wilson – I would sau that it is and I think that H1,H2,H3 etc are meant for titles within content.
Mr. UX
Nov 12, 2009
11:45 am
2 words: “Semantic HTML”. If all you care about is how the page renders, then you’re going to be in a world of hurt when you’re page needs to render on various mediums, from web browsers to mobile devices. Most of the tags I’d have to agree about, however: strong and table have their uses, not for layout as you pointed out, but tabular data needs to be displayed in a table!
@Russell Wilson: Yes, strong is semantically correct way to show importance, and don’t tell me you would insert an h1-h6 in the middle of your paragraph?
People: please stop using (X)HTML tags strictly for layout, they are to be used only to convey information in the most meaningful matter, design/style has(should) have nothing to do with the tag.
masklinn
Nov 12, 2009
11:49 am
> @TheFella – is strong really for showing importance? Isn’t that the job of H1, H2, H3… tags?
No. ‘Hn’ tags are for headings and they’re inline-blocks (they’re blocks that contain inlines). They exist as section and subsection headings (and are in fact extracted by tools able to create page outlines). ’strong’ exists to put more emphasis on a run of text than ‘em’, the (pretty terrible) alternative would be to use nested ‘em’s.
> The others you mentioned I would just use CSS.
CSS for what? ’strong’ has a semantic meaning (*strong*er *em*phasis), so does ‘br’ (how else to you add like breaks between poetry verses exactly? Make each line a paragraph — which they aren’t — and remove all padding and margin? That’s nonsensical).
Karl G
Nov 12, 2009
12:00 pm
@Jeff Noble
An article written in 2003 doesn’t take into account the work by the WHATWG. There is an XML serialization of HTML5, which more or less corresponds to XHTML vs HTML but the only reason to use it would be if you wanted to transform it with XSL.
@Russell Wilson
The heading tags don’t show importance, they mark out progressively lower level headers. The semantics change in HTML5 but the H1, H2 tags are still around. The strong tag really is for indicating that the containing text should be strongly emphasized. Note that the header tags are block level elements and strong is inline.
Nja
Nov 12, 2009
12:00 pm
Also, let’s not forget the people who depends on text-to-speech programs. “strong” has a very specific semantical value there.
Also, iframe can’t be compared to a normal frameset. They have two completely different uses. Some times you need to embed 3rd party conents that can’t be added using javascript.
Kelli
Nov 12, 2009
12:26 pm
Strong isn’t about just making something look bold. It’s about adding emphasis (uh, so, you know so is em). Sure, you can style another tag to mimic the appearance of strong, but then your blind visitor’s screen reader isn’t going to be able to tell the difference.
Jiri
Nov 12, 2009
1:09 pm
Or even better: build your whole site in FrontPage, and you don’t have to use any tags at all! ;)
Seriously though, not the best advice. Lot of perfectly good tags on that list.
Emil
Nov 13, 2009
12:43 am
I have to disagree.
It is ok to use valid markup, as long as it is used for the right reason. Using , … is perfectly fine.
I was looking at the source code of this website. It includes bunch of inline JavaScript and CSS and a ton of div’s. Also why do you use for everything. It is supposed to be used to create lists, not new lines.
Need new line? No need to pollute the code, use
Also what is the problem with using HTML 4.01 Transitional. It works just fine. Do you know the difference between html and xhtml.
I see more and more markup snobs, who do even create clean code.
Allan
Nov 13, 2009
8:21 am
(submitted to dzone)
Russell Wilson
Nov 13, 2009
8:41 am
@Emil – I would argue that the *core* source code for this site is very clean and well structured. However the site is built on Wordpress and we use various plugins for functionality that we need. We have no control over the code the plugins add to the pages short of removing them and implementing the functionality we need from scratch (which we may do at some point but just doesn’t make sense right now). We also have validation problems largely due to plugin code.
Adam C
Nov 16, 2009
8:11 am
I still use now and again. A Horizontal Rule can be useful and, if styled correctly, can look rather nice.
Mr. Huddle: The Easiest Way To Keep Up With Your Communities
Nov 17, 2009
11:02 pm
[...] is a competitive field, everyone with even a rudimentary knowledge of… 3 Likes UItrends Web Design Tip #1 | User Interface Trends Hello and welcome to the first ever UItrends tip! If you are a web designer and upon viewing the [...]