Forums  /  The Site  /  The site's HTML is terrible, please PLEASE fix it (Locked)
  TrystTryst

I'm a professional web developer and looking through the front-end source code on Speedrun.com is making me very sad. The website uses a tonne of deprecated and invalid markup and features a lot of poor practice throughout.

Here are some of the issues I've noted down:

---

1. The `center` element.

http://i.imgur.com/9MpDT5j.png

Along with various other places, the navigation bar which appears on all pages is wrapped in the <center> tag. The HTML401 specification states in bold that the center tag is deprecated: http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER. It doesn't even exist in the HTML5 specification.

A solution is to simply give the inner element a style of `margin: 0 auto`.

---

2. Using tables for layout.

http://i.imgur.com/wXzXYfT.png

This is incredibly bad practice. The table element exists to wrap tabular content. All the navigation menus used on Speedrun.com are placed in table elements. These are lists and not tabular data and should instead be unordered lists (ul elements) styled with `list-style-type: none` and their child li elements set as `display: inline`.

---

3. Using the `br` and `nobr` elements for spacing.

http://i.imgur.com/q5edSZ5.png

The site uses the `br` and `nobr` elements in various places. This is completely unnecessary, and styling should be kept in the site's CSS file. Both elements can be replaced with margin.

---

4. The `font` and `big` elements.

Sometimes a `font` element is wrapped in another `font` element!

http://i.imgur.com/jqDbLhg.png

Despite not being deprecated, the HTML401 specification states that using these element are discouraged. Why? Again, stylesheets. The page has a stylesheet for this exact purpose. If large text is required, the element can simply have a larger `font-size` applied to it. If a different font is required, the element can have a `font` style applied to it.

---

5. The `footer` element and the `placeholder` attribute.

http://i.imgur.com/0wdhp05.png

The page's `Doctype` is set to HTML401. Neither the `footer` element nor the `placeholder` attribute exist in HTML401. Both were introduced in HTML5. Any browser which conforms solely to HTML401 and doesn't support HTML5 will fail to correctly render these, and if anything it's a bug that browsers which support HTML5 render these correctly anyway.

The fix? Change the page's `Doctype` to just `HTML` and not `PUBLIC ... HTML 4.01 Transitional`.

---

6. Inline styling.

Inline styling is bad and difficult to maintain. Styling should be kept solely within the page's CSS file(s). The `style` attribute should only ever be modified with JavaScript, and shouldn't exist when JavaScript is disabled.

http://i.imgur.com/AteVHEh.png

`!important` is pretty terrible practice too and actually does nothing to affect specificity when placed within the `style` attribute, but this is a thread about HTML and not CSS.

---

7. Use of the `&nbsp;` HTML entity for spacing.

http://i.imgur.com/iFjmTQT.png

As mentioned several times already, spacing like this should be kept in the CSS file. Rather than using `&nbsp;`, the CSS `padding` property should be specified instead.

---

8. Forms within forms.

http://i.imgur.com/dRokMPk.png

The `form` element is a container for form controls. However the control I'm typing this thread out in is wrapped in a form which is wrapped in another form. This is invalid markup.

GlacialsGlacials likes this. 
  TrystTryst

W3, the people who make the HTML specifications, have their own validator service which can be found at http://validator.w3.org. If we paste in the URL to this thread we'll be shown a whopping 31 validation errors.

EDIT: With this one comment posted the validator now returns 48 errors!

EDIT 2: Now that I've added images to my first post, it now shows 55 errors.

I really don't dare look at the site's current CSS yet as I'm genuinely scared by what I might find. 🙁 I'll probably make a similar thread for CSS and possibly also JavaScript tomorrow.

If you're wondering WHY you should fix these things, it's quite simple: invalid HTML will cause the site to not load certain aspects at all on different browsers and different devices. Just because the site looks good on the latest version of Chrome of Firefox on Windows and Mac doesn't mean it looks at all good on the base version of Safari on an iPhone 4 for example. Fixing validation problems will not only make the site work globally, but it will also make it faster in general as the browser isn't having to guess what certain things should do.

 
  KennyMan666KennyMan666

I already mentioned it in the feedback thread, but I guess I'll just add to that latest post: when I was on my netbook, the log in button in the top bar wasn't even visible, it was off screen to the right. And that was in the latest version of Firefox on Windows. Seems related.

 
  EwilEwil

That's because the site is not responsive, so people with lower resolutions and especially on mobiles will have issues.

Tryst: The site is still in beta and there are FAR more concerning issues that needs to be solved prior to W3 validator, GTMetrix and whatnot.

 
  TrystTryst

@Ewil: Just because something is in beta doesn't give it an excuse to be coded badly from the outset. The sooner these problems are solved the better. Introducing bad practice right from the start is never a good idea.

As for your comment about responsiveness: this shouldn't be an issue. Responsive design simply makes the design change on different screen resolutions and devices. Without any responsive design implemented, the site should look identical on all devices and resolutions - albeit some will have scrollbars.

 
  kirkqkirkq

I'm acutely aware that these things have been issues for a while and in need of improvement, asynchronously from other tasks even. I'll talk to staff about getting a better plan in place to start addressing this. Feel free to continue noting the issues.

TrystTryst likes this. 
  PresJPolkPresJPolk

I have to echo the idea that OP's complaints are awfully minor.

Sure, going forward these things should be addressed, but it's hardly a high priority kind of thing.

The idea that it's "terrible" only applies to the developer experience. Users won't notice or care.

 
  TrystTryst

> The idea that it's "terrible" only applies to the developer experience. Users won't notice or care.

Haha, it's quite the opposite in fact. As a web developer I'd LOVE for users to never notice these things, because if they didn't they wouldn't need fixing. However if you read my post you'd see why users will care about this:

"If you're wondering WHY you should fix these things, it's quite simple: invalid HTML will cause the site to not load certain aspects at all on different browsers and different devices. Just because the site looks good on the latest version of Chrome of Firefox on Windows and Mac doesn't mean it looks at all good on the base version of Safari on an iPhone 4 for example. Fixing validation problems will not only make the site work globally, but it will also make it faster in general as the browser isn't having to guess what certain things should do."

As an extreme example, here's what the site's homepage looks like on Internet Explorer 8:

http://i.imgur.com/Vnqwhrq.png

It doesn't look much better when you move up to IE9:

http://i.imgur.com/oz4vZ2s.png

I don't know much about the site's demographics, but according to Statcounter in the year from February 2014 in the USA alone a combined 8-9% of internet users were using either IE8 or IE9. Using the logic of well they should just upgrade their browser is great, but not everyone can upgrade their browser (work computers, etc), and as it currently stands the site is designed for HTML401 which both IE8 and IE9 fully support. There is absolutely no reason for the site to look the way it does on those browsers.

 
  Adam_akAdam_ak

Thanks for those amazing stats on browser usage, Tryst. It would be nice to know how many people in a relevant demographic (e.g., speedrunners/gamers) still use IE8 or IE9, which is most likely.... 0%?

The issue has been acknowledged and will be fixed, but this is hardly a priority right now.

XtremePrimeXtremePrime likes this. 
  TrystTryst

> It would be nice to know how many people in a relevant demographic (e.g., speedrunners/gamers) still use IE8 or IE9, which is most likely.... 0%?

The site already embeds Google Analytics. This should reveal which browsers people are using.

 
  FoxAndRavensFoxAndRavens

On the same note, as well, Tryst mentioned work computers and mobile devices which people from any demographic use as well. I, personally, have tried to use my android phone and the site does look just....awful. I could barely navigate. That being said, the site IS usable. But I'm a strong supporter for making what already exists work ¤correctly¤ before adding features. New features are nice but I'd take a minimal globally usable web page any day.

TrystTryst likes this. 
  TrystTryst

For what it's worth I've been working on https://github.com/450/speedrun.com over the last couple of days. Would be great if some of the front end devs could check to see if I've missed any pages!

Currently two are previewable:

Homepage: http://450.github.io/speedrun.com
Games Listing: http://450.github.io/speedrun.com/Games/index.html

These aren't responsive but I'll probably look into that once all the base pages are in place. I'm reworking the CSS in such a way that it'll be pretty straightforward to apply a responsive design across all themes.

LainkLaink, tdawg91tdawg91 and 2 others like this. 
  WilliamBarrowsWilliamBarrows

Whenever you do something and put it on the internet, someone is going to come along and tell you you're doing it wrong!

The site's HTML definitely isn't 'terrible', but I agree that there is room for improvement. Also, linking http://validator.w3.org is very useful advice, too few (amateur) web devs know about it.

The only 3 things you mentioned that are actual issues are the doctype, the center tag, and the form within form. All others shouldn't affect how the page displays, and are merely "bad practice", but in no way incorrect or deprecated.

Also, many bigger websites have officially stopped supporting older IE versions, so supporting them should not be a priority for a site like this.

tl;dr: As long as the most severe issues (being the doctype, the deprecated center tag, and the forms within forms) are fixed quickly, this shouldn't be an issue. After that I would suggest simply using Tryst's HTML/CSS (or a modified version thereof) once it gets done.

 
  TrystTryst

> The only 3 things you mentioned that are actual issues are the doctype, the center tag, and the form within form

There's actually nothing wrong with the current doctype. The current doctype tells browsers to render the site in HTML401 Transitional. Nothing wrong with that. Where they are going wrong though is using HTML5 elements and attributes whilst declaring HTML401.

Also just because you no longer support a browser doesn't mean that it shouldn't render properly in that browser. If you do it right to begin with, the display of the page should work as far back as IE3 (bar a few CSS3-specific styling properties). Dropping support for IE7 and below is a great idea as Microsoft no longer supports these themselves, however they do still support IE8.

 
  WilliamBarrowsWilliamBarrows

> Where they are going wrong though is using HTML5 elements and attributes whilst declaring HTML401.

That's what I mean't by "the doctype is wrong". They were using the wrong doctype for their HTML. Also they should be using HTML5 simply because it's the newest standard.

And yes, once all the issues you mentioned are fixed the page will display properly in IE8 even without making specific adjustments. "Not supporting older IE versions" was meant in the sense of not making specifc adjustments. We all know how much effort legacy IE support can be, effort that is more needed in other areas of the site (e.g. new features).

Also, I previously thought Microsoft only supported IE9 and up. Thanks for clearing that up.