6 ms·

Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". I struggle to create something that looks good

by SCdF 13y ago

Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". I struggle to create something that looks good semantically (ie just reading the HTML) and is also laid out on the page in the way I wanted it to be. There seem to be lots of situations, even in just mildly complicated web pages, where you need to write HTML code solely for graphics / layout reasons that completely breaks the idea of having a purely semantic document. In the end it just seemed much faster and cleaner to be more flexible with those various structures and to give up on the whole "semantic" document ideal and smash divs around. I'm ready to fully accept that this is the tables->css revolution all over again and I'm just crap, though, if that's the case.

JonnieCache 13y ago
It really depends on what kind of page you're making. If you're doing a heavily optimised landing page where everything has to be just-so, you might need to smash a few divs. If you're just making a basic page that's not too designy, you can produce some beautiful looking html. It looks even better in haml. Write some sass for it and you will reach a higher state of markup consciousness.
hpaavola 13y ago
I think that CSS is the biggest failure here. Let's say I have a blog, so for article page markup should be something like this: <html><head></head><body> <article>lorem ipsum</article> <nav></nav> <form>search</form> <footer></footer> </body></html> That way screen readers, search engines, etc will get the important stuff first and less important stuff afterwards. But since the common way of presenting blog is more like this: <nav></nav> <form>search</form> <article></article> <footer></footer> I either have to do some hacky position:absolute things, crazy floats with negative everything, or just reorder the markup. Crazy and hacky is not fun to maintain, so I have to reorder the markup. That's because CSS is made for changing fonts and colors, and not for layouts.
- terabytest 13y ago
  I think you should try using WAI-ARIA standards[0] instead. That way you can keep your structure the same and give screen readers and such a better description of what's going on in your page. [0]: http://www.w3.org/WAI/intro/aria http://www.w3.org/WAI/intro/aria
  - guyguyguyguy 13y ago
    WAI-ARIA support is abysmal, not only does it vary between screen readers but also between various browsers using the same screen reader.
- jbri 13y ago
  Flexbox[1] addresses the issue you're talking about - of course, browser support is still a little lacking (No support for IE9 or below, and IE10 doesn't conform to the current spec). [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...
  - nyrina 13y ago
    In other words, it's useless for now, and for a few more years. God, I wish IE 8 wasn't the latest thing on XP (Still a lot of users on windows XP) and that new features weren't added only in major releases that happens rarely for Microsoft. Rarely, that is, compared to other vendors on the market.
    - eli 13y ago
      I give Google a lot of credit with how they set up Chrome. The first thing they built out was a really nice auto-update function.
- laumars 13y ago
  Excuse my ignorance, but can you not use div layers to position your data as well as the header / footer tags?
stan_rogers 13y ago
Much of the graphical froufrou can be done using the before and after pseudo elements (which is one of the reasons I'm sort of disappointed that the HTML for the newer designs on the CSS Zen Garden has remained the same, complete with extra divs and spans strictly for styling).
smackay 13y ago
I've tried and failed miserably (so far) to use the tags also. It seems they are optimized for a single use-case: single, magazine-style, pages or blog posts. Anything other than this and it starts to fall apart pretty rapidly. The alternative would appear to be micro (macro) formats which would offer more flexibility but obviously the chances of standardization on a widespread basis would appear to be remote. Given the diversity of web-page content perhaps the goal of a semantic web is simply unattainable - at least in the short-term.
rimantas 13y ago
> There seem to be lots of situations, even in just mildly > complicated web pages, where you need to write HTML code > solely for graphics / layout reasons It depends on the browsers support desired, but for reasonably modern browsers this should be rarely the case, except for really complex layout. Now when we have multiple backgrounds and background images and generated content there is less demand for extra elements.
Pxtl 13y ago
Yeah, I know we were all excited about the new elements when they were playing about with them, but I was kinda skeptical as a web newbie doing pure productivity apps... I mean, the web is prettymuch an application engine now and we're doubling down on the document metaphor? What? I still think that CSS in particular maps terribly to its usage as a complete layout system. I mean, you can do it, but you can code in BF or do incredible things with template metaprogramming in C++. Doesn't make it a clean, pleasant way to work, and doesn't really fit the designed purpose.
- SkyMarshal 13y ago
  >I mean, the web is pretty much an application engine now and we're doubling down on the document metaphor? What? I've been thinking similarly lately too. They're hardcoding semantics into HTML that may or may not change in the future. Better to avoid hardcoding things that could change or have subjective meaning whenever possible. Instead, keep HTML tags simple and enable optional, flexible semantics via attributes and properties, along the lines of schemas (http://schema.org/ http://schema.org/). Let the internet standardize among schemas, and replace obsolete ones with new and better ones as they arise. Or, if it's not requirement for your particular app, just don't bother with it at all.
coldtea 13y ago
>Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". Don't. Just use what you need and be pragmatic. The biggest proponents of semantic markup have been web designers, people that had no idea what semantic meant until they were told by hack W3C people. They tend to oversell the value of semantic markup, because they feel it makes them sound more intelligent and can help upsell their design offerings. In real life, nobody cares for semantic markup. Not Google (the main search engine that matters), nor browsers, and of course, not the clients. And as real life experiments with assistive technologies have shown, not even screen readers benefit that much from semantic markup or care about it. As for seperation of code and content and re-use -- that's what JSON, DBs, REST APIs etc are for. You are not supposed to reuse your HTML as is in other domains. It's mostly a snake oil business, based on an idea that sounds good in theory, but it's more trouble than is worth. And it has even less relevance nowadays, when web pages turn into web apps. What's a semantic "web app"? Why do we need semantics here, for something that in the native world we've always done with presentation code, from Interface Builder to Visual Studio?
designofhomes 13y ago
"Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". I struggle to create something that looks good semantically" I recently ditched Wordpress and decided to learn HTML and CSS by hand-coding my blog. I used many (but not all) of the new HTML 5 tags including main, section, article, nav, footer. Admittedly a blog is quite a structured type of site that lends itself well to simple semantic markup. I am using html5shiv.js to support IE 6-9 and the site renders mostly fine in those browsers. There are some isues with spacing, but the site is perfectly readable which is the main thing. Here's my site: http://www.designofhomes.co.uk http://www.designofhomes.co.uk (a blog about housing issues in the UK). Admittedly, it's not the most attractive design, but a reasonably clean and clear layout (I hope!) Any feedback on the appearance and structure is very welcome :-) Here's what the site looks like in Internet Explorer and Lynx using browsershots.org for testing (this link expires in a day or two) http://browsershots.org/http://www.designofhomes.co.uk/ http://browsershots.org/http://www.designofhomes.co.uk/
- jwdunne 13y ago
  If clean and clear is what you're going for, I personally think you've done a good job!
  - designofhomes 13y ago
    That's great to hear. Thanks :-)

by SCdF 13y ago

JonnieCache 13y ago

It really depends on what kind of page you're making. If you're doing a heavily optimised landing page where everything has to be just-so, you might need to smash a few divs. If you're just making a basic page that's not too designy, you can produce some beautiful looking html. It looks even better in haml. Write some sass for it and you will reach a higher state of markup consciousness.

hpaavola 13y ago

I think that CSS is the biggest failure here. Let's say I have a blog, so for article page markup should be something like this: <html><head></head><body> <article>lorem ipsum</article> <nav></nav> <form>search</form> <footer></footer> </body></html> That way screen readers, search engines, etc will get the important stuff first and less important stuff afterwards. But since the common way of presenting blog is more like this: <nav></nav> <form>search</form> <article></article> <footer></footer> I either have to do some hacky position:absolute things, crazy floats with negative everything, or just reorder the markup. Crazy and hacky is not fun to maintain, so I have to reorder the markup. That's because CSS is made for changing fonts and colors, and not for layouts.

terabytest 13y ago
I think you should try using WAI-ARIA standards[0] instead. That way you can keep your structure the same and give screen readers and such a better description of what's going on in your page. [0]: http://www.w3.org/WAI/intro/aria http://www.w3.org/WAI/intro/aria
- guyguyguyguy 13y ago
  WAI-ARIA support is abysmal, not only does it vary between screen readers but also between various browsers using the same screen reader.
jbri 13y ago
Flexbox[1] addresses the issue you're talking about - of course, browser support is still a little lacking (No support for IE9 or below, and IE10 doesn't conform to the current spec). [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...
- nyrina 13y ago
  In other words, it's useless for now, and for a few more years. God, I wish IE 8 wasn't the latest thing on XP (Still a lot of users on windows XP) and that new features weren't added only in major releases that happens rarely for Microsoft. Rarely, that is, compared to other vendors on the market.
  - eli 13y ago
    I give Google a lot of credit with how they set up Chrome. The first thing they built out was a really nice auto-update function.
laumars 13y ago
Excuse my ignorance, but can you not use div layers to position your data as well as the header / footer tags?

stan_rogers 13y ago

Much of the graphical froufrou can be done using the before and after pseudo elements (which is one of the reasons I'm sort of disappointed that the HTML for the newer designs on the CSS Zen Garden has remained the same, complete with extra divs and spans strictly for styling).

smackay 13y ago

I've tried and failed miserably (so far) to use the tags also. It seems they are optimized for a single use-case: single, magazine-style, pages or blog posts. Anything other than this and it starts to fall apart pretty rapidly. The alternative would appear to be micro (macro) formats which would offer more flexibility but obviously the chances of standardization on a widespread basis would appear to be remote. Given the diversity of web-page content perhaps the goal of a semantic web is simply unattainable - at least in the short-term.

rimantas 13y ago

> There seem to be lots of situations, even in just mildly > complicated web pages, where you need to write HTML code > solely for graphics / layout reasons It depends on the browsers support desired, but for reasonably modern browsers this should be rarely the case, except for really complex layout. Now when we have multiple backgrounds and background images and generated content there is less demand for extra elements.

Pxtl 13y ago

Yeah, I know we were all excited about the new elements when they were playing about with them, but I was kinda skeptical as a web newbie doing pure productivity apps... I mean, the web is prettymuch an application engine now and we're doubling down on the document metaphor? What? I still think that CSS in particular maps terribly to its usage as a complete layout system. I mean, you can do it, but you can code in BF or do incredible things with template metaprogramming in C++. Doesn't make it a clean, pleasant way to work, and doesn't really fit the designed purpose.

SkyMarshal 13y ago
>I mean, the web is pretty much an application engine now and we're doubling down on the document metaphor? What? I've been thinking similarly lately too. They're hardcoding semantics into HTML that may or may not change in the future. Better to avoid hardcoding things that could change or have subjective meaning whenever possible. Instead, keep HTML tags simple and enable optional, flexible semantics via attributes and properties, along the lines of schemas (http://schema.org/ http://schema.org/). Let the internet standardize among schemas, and replace obsolete ones with new and better ones as they arise. Or, if it's not requirement for your particular app, just don't bother with it at all.

coldtea 13y ago

>Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". Don't. Just use what you need and be pragmatic. The biggest proponents of semantic markup have been web designers, people that had no idea what semantic meant until they were told by hack W3C people. They tend to oversell the value of semantic markup, because they feel it makes them sound more intelligent and can help upsell their design offerings. In real life, nobody cares for semantic markup. Not Google (the main search engine that matters), nor browsers, and of course, not the clients. And as real life experiments with assistive technologies have shown, not even screen readers benefit that much from semantic markup or care about it. As for seperation of code and content and re-use -- that's what JSON, DBs, REST APIs etc are for. You are not supposed to reuse your HTML as is in other domains. It's mostly a snake oil business, based on an idea that sounds good in theory, but it's more trouble than is worth. And it has even less relevance nowadays, when web pages turn into web apps. What's a semantic "web app"? Why do we need semantics here, for something that in the native world we've always done with presentation code, from Interface Builder to Visual Studio?

designofhomes 13y ago

"Has anyone used all of the HTML5 tags in anger? I've tried a couple of times to build something fully "semantic". I struggle to create something that looks good semantically" I recently ditched Wordpress and decided to learn HTML and CSS by hand-coding my blog. I used many (but not all) of the new HTML 5 tags including main, section, article, nav, footer. Admittedly a blog is quite a structured type of site that lends itself well to simple semantic markup. I am using html5shiv.js to support IE 6-9 and the site renders mostly fine in those browsers. There are some isues with spacing, but the site is perfectly readable which is the main thing. Here's my site: http://www.designofhomes.co.uk http://www.designofhomes.co.uk (a blog about housing issues in the UK). Admittedly, it's not the most attractive design, but a reasonably clean and clear layout (I hope!) Any feedback on the appearance and structure is very welcome :-) Here's what the site looks like in Internet Explorer and Lynx using browsershots.org for testing (this link expires in a day or two) http://browsershots.org/http://www.designofhomes.co.uk/ http://browsershots.org/http://www.designofhomes.co.uk/

jwdunne 13y ago
If clean and clear is what you're going for, I personally think you've done a good job!
- designofhomes 13y ago
  That's great to hear. Thanks :-)