Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The ﹤main﹥ element

html5doctor.com

Post reply on HN
Print view View original

71–80 of 93 posts

Re: The ﹤main﹥ element

#71

Post by arcavorago »

rorrr2 wrote: post #65
arcavorago wrote: post #62

Earlier quoted context omitted.

Still under heavy construction and playing with the layout, so forgive the ugliness of the css at the moment, but here is my personal website which I am attempting to do with good semantics and html5/css3 only, (no js). http://www.warriors-shade.net The actual article area will (should) accommodate the semantic tags well (main, article, aside, figure, etc).

That's pretty lame. It just navigation and some text dumped into the body. I'm not 100% sure, but I think having outside of is not up to HTML5 standards.

I was just trying to show an attempt at no divs/spans in html, and even said it was ugly and a work in progress, so thanks for your kind assessment. That being said,

1) And what is particularly wrong with that? I said that the design was so that the html5 semantic elements would fit well into the body section, removed from the nav/footer. You might as well just say, "oh, that's just some text dumped into a div,section,etc hoho...".

2) Actually there is no standard regarding this. Maybe a best practice, but not a standard. http://www.w3.org/html/wg/drafts/html/master/sections.html#t...

So it sounds like you want someone to show a certain kind of design done semantically. If that's the case, then you should have said specifically what you were looking for in the first place. eg. 3 columns each with 4 rows without divs/spans, etc. In this case this could still be put into my page, just put classes or id's onto the articles or other elements and manage with css.

It should be noted this is a strange request as well, div's used in the correct way are perfectly valid with html5/css3, so you are unlikely to find anything much more than what I have just shown you...(and again, if that was your original point, you should of just said it in the first place.)

Re: The ﹤main﹥ element

#72

Post by dragonwriter »

rorrr2 wrote: post #65
arcavorago wrote: post #62

Earlier quoted context omitted.

Still under heavy construction and playing with the layout, so forgive the ugliness of the css at the moment, but here is my personal website which I am attempting to do with good semantics and html5/css3 only, (no js). http://www.warriors-shade.net The actual article area will (should) accommodate the semantic tags well (main, article, aside, figure, etc).

That's pretty lame. It just navigation and some text dumped into the body. I'm not 100% sure, but I think having outside of is not up to HTML5 standards.

Implicit body element without an explicit tag as used in the page at issue is, IIRC, consistent with WHATWG HTML, not sure about W3C HTML5.

Re: The ﹤main﹥ element

#74

Post by coldtea »

SCdF wrote: post #4

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…

>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?

Re: The ﹤main﹥ element

#75

Post by designofhomes »

SCdF wrote: post #4

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…

"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 (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/

Re: The ﹤main﹥ element

#76

Post by Andrex »

This is completely off-topic, but I wanted to say I love the font used for the headings on this site. "Quicksand," is it? Nice and playful without being completely unprofessional, very good pick.

Re: The ﹤main﹥ element

#77

Post by jwdunne »

hpaavola wrote: post #68
eksith wrote: post #57

Earlier quoted context omitted.

Not necessarily. Nav inside article functions the same as the contents list in a Wikipedia article so if you don't want that, you can remove it from the article. If you want secondary links to other related content, those should go in a different nav in aside. If you want site-wide links, you can create a separate nav outside the article. Also of note, footer can be for the article or the whole page. If you like, you…

In my example there was a site navigation, not article navigation. And with article navigation, the same problem exists. The article should be before the navigation. But it's not practical at all to implement. And what comes to skip to content -links, those definetly are hacks. What they mean is "Dear user, we would have put the content first in the source, but since CSS is not a layout definition language, it was no…

Actually, you can use absolute positioning to achieve what you want, in a fixed-width layout. You use CSS to add padding to the top of the content which is equal to the height of your navbar/header and give the navbar/header position absolute and top 0.

I haven't figured out how to do this with responsive layouts. It's never worked well for me but I will come up with a solution one day.

Re: The ﹤main﹥ element

#78

Post by jwdunne »

designofhomes wrote: post #75
SCdF wrote: post #4

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…

"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 len…

If clean and clear is what you're going for, I personally think you've done a good job!

Re: The ﹤main﹥ element

#79

Post by nickloewen »

talmand wrote: post #52
verisimilitude wrote: post #47

Earlier quoted context omitted.

Not easy, but doable, especially on a straightforward design: e.g. http://tumbledry.org/

Straightforward design meaning a never-ending single column of content? I would be shocked for such a page to require any creative usage of divs/spans whatsoever. Also, just curious, what's the point in having a footer that I can never properly see because new content is injected as I scroll down the page?

Re: footer – if you turn js off, it means that a 'more' link appears at the end of the page, leading you to older pages.

Re: The ﹤main﹥ element

#80

Post by SkyMarshal »

Pxtl wrote: post #50
SCdF wrote: post #4

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…

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…

>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/). 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.

Post reply on HN