This website has a lot of unclosed h3 tags | Hacker News Reader

This website has a lot of unclosed h3 tags

sewingandembroiderywarehouse.com

245 pointsaustenallred132 comments

This is an example of a page that begins talking about sewing and embroidery, and eventually becomes about typography.

I felt like I was watching a visual in an art gallery commenting on the human condition. If you Ctrl+- out all the way and linger on some of the choice phrases you get a better show.

     Improper 
     Timing 
     the 
     bobbin 
     hook 
     won't 
     catch the 
     loop

    will bend 
       and 
    eventually 
      break

Alas, if only browsers could zoom out infinitely you could conceivably use this method to create a convincing "Star Wars"-esque scrolling text field using only plain HTML.

I think half the people here haven't seen the ultimate crime:

http://fabricland.co.uk/

The service in the shop is just as bad as the web site as well!

At least in ties in with the brand. The website actually reminds me of the inside of the shop :)

That just reeks of FrontPage.

Microsoft FrontPage 5.0 to be exact, lol

I think there is a trend in UK web design: http://www.lingscars.com/

This is actually brilliant... and funny. I stayed on the website and browsed it for the last 15 minutes.

My Eyes! The goggles do nothing!

You say that like it's a bad thing. Ling is awesome.

Ling is a marketing genius - that site is incredibly successful

Ling's Cars is intentionally bad. It's part of her brand. At one stage she had a site map which was laid out like a concentration camp, with the various visitors to the site shown in different sections with a stick-figure whose head was the relevant browser logo.

It's a fantastic site. My favourite is the office Web cam page

http://www.lingscars.com/webcams.php#models

complete with 'press button to annoy staff'

2 sites does not equal a trend.

That rotating planets almost killed me.

Nice effect though

Paramount should sue them for the Starfleet Command logo near the planets.

I want that as my screensaver.

It may shorten my screen's life, but it will be a life well lived.

Ling gave a good talk about it, you can watch it here http://www.besquare.me/session/the-future-of-digital-marketi...

View the source.

let me present to you... http://arngren.net/

That thing is running on Yahoo! Is it an old Viaweb site?

It's better. It uses geocities!

Now we know where Pinterest got the UI idea...

http://slatur.is/slaturtid/

It loads so slow that seems loaded by AJAX :P

You might see shitty design, I see brilliant one. This site looks like mail order Catalogues from the nineties. Kid in me cant stop screaming "I want that, and that!" Information density is phenomenal.

Contains some content that might be NSFW.

I'll raise you the (archive.org copy of) Yvette's: https://web.archive.org/web/20110629022027/http://yvettesbri...

A wild <marquee> tag appears, and it even has alternate behaviour! Haven't seen those in over a decade.

That page loaded ridiculously fast.

Maybe flat HTML is the way to go.

yeah, reminds me of this other website:

http://motherfuckingwebsite.com/

should we be hard-coding our styles into html and stop making stylesheets though? seems like a balance is needed

Well, hard-coded styles don't get cached by browsers, so that's probably not the best example.

That being said, there are a lot of things people can do to improve performance that they neglect to. Sometimes it's just the pressure to get things done. Still, it's worth going back to revisit these issues.

I saw this on Twitter earlier today, and I found it to be a fairly interesting read on the topic: http://yeoman.io/blog/performance-optimization.html

Hard coded style inside hardcoded markup does get cached though (as part of the html)

HTML is typically not cached by the browser.

Citation needed. I've seen evidence to the contrary. Generally anything with cache-control (or equivalent) headers suggesting that it should be cached, will be.

That's awesome - what framework did they use?

Digitally authentic, minimalist, grayscale... it's hitting all the fad buttons...

And responsive too

And flat.

"H-motherfucking-TML"

I hear you can get a shot for that from the doctor.

Created with Notepad

The Header includes:

Not sure why, but I read that in the voice of Mr. Torgue.

I did it with the voice of samuel l jackson

This website handled HN traffic like it was nothing, i'm taking notes

It's a new technology called "static HTML page"... I hear MS FrontPage can export this newfangled format.

At my uni there were a large number of profs with websites that, if you viewed the source, showed that they'd been creating in MS Word. This was a CS department. Slightly depressing.

I worked a bit in research and HTML was generally treated as a serialization format for other tools and HTTP was considered a dumb transport.

I had a presentation about REST&Caching and stepped through many of the low-level behaviours of HTTP, like the properties that verbs have and their interaction with caching.

I ended up explaining the whole HTTP verb thing for multiple days straight because it was kind of a revelation to many.

Now, the research department worked in a whole different department, web was only coming up as a topic for them and was of tangential interest.

My conclusion: CS is a vast field. Don't expect experts in theoretical CS to know practical details. Don' expect practitioners in compiler building to know how to build a website or anything about distributed architectures.

It's not depressing, it just shows how vast our field is.

Yes, because if you design a new alloy for improved performance of an f1 engine cilinder, you need to do your own oil changes too, right?

True. However this is more akin to having your dietician change your oil.

Most CS profs are far too busy doing Computer Science to bother keeping up with the latest trends in web design.

It actually renders fine without increasing the font sizes in IE 8. The creator maybe only tested it in IE?

See TIFF export here https://dl.dropboxusercontent.com/u/1388427/__www.sewingande...

Sounds like ie default header font size is absolute whilst other browsers go with relative. Each approach has benefits, but support for highly nested headers is pretty low on the list :-)

This is almost as wonderful as Subway's old website. I think that one had something like five HTML tags and a few BODY tags sprinkled randomly throughout.

I'd like to have a word with the person who decided that "something" should show up in a browser regardless of how broken the markup is.

I think unfortunately that Jon Postel died a few year ago.

Writing a HTML parser to handle everything that's out there on the web is almost as hard as writing a C compiler that tries to produce the "most accurate" executable code based on what it looks like you probably meant.

This might explain it:

Yeah, except that the site owner didn't forget to add Facebook page and the page seems quite active.

http://www.sewingandembroiderywarehouse.com/index.html

It was created on August 14, 2013. I am just glad small business like this continues to run and use technology. We should send an email and tell them to fix it. I am also glad the site didn't go down after all this traffic...

Agreed.

We should send an email and tell them to fix it.

If you do that I will come to your house and hit your computer with a hammer until it breaks into tiny tiny pieces.

But think about how good of an overclock it will get while you're dousing it with enough liquid nitrogen to make that possible.

I just did.

I'll pop over around tea-time, then. Make sure to back everything up first!

lol i'm ready for ya. Best comment ever.

It’s not the first time this comes up in a popular internet discussion, the website is pretty famous. I suspect they know about the issue.

I'm actually surprised. So many unclosed h3 tags would seem to indicate it was a programming error and that the page was generated by some script rather than a visual editor.

Hilarious! Initially I was thinking "poor fellow who made this mistake" and eventually I felt like I got trolled, this almost feels like its not a mistake! PS: There are 38 <h3>s and 2 </h3>s.

I thought it was a result of nested <font> tags with font-size defined by em units. Since the each <font> tag is 1.75 times larger that it's parent.

Every single troubleshooting tip is of greater urgency than the last!

Nah, they are just mimicking the frustration of the users when the troubleshooting is not having the desired effect.

There's a subtle brilliance here. The font starts out reasonably small and increases in parallel with the frustration of the individual doing the troubleshooting.

Matt Gemmell described it pretty well: https://twitter.com/mattgemmell/status/301735038733676546

What the...that tweet is over a year old!

That's actually beautiful, I'd never considered this as a possible outcome of nesting tags with em font sizes. By the bottom of the page one letter was about 3000px high.

I haven't laughed this long for ages!

Yes - it had me in stiches.

ಠ_ರೃ

[snaffled for future use]

Oh god the h3manity

In college, one of my professor's syllabus page had this exact problem. It wasn't so bad at first, but half way through the course you had to scroll so far down the page that the syllabus was barely legible. So I downloaded the page, cleaned the markup and sent him the refactored HTML page, much to his delight.

I don't know why, but I liked this... It sort of reminded me of some of Monty Python's publications.

http://en.wikipedia.org/wiki/The_Brand_New_Monty_Python_Bok

Right at the very top of the page, they explain that. in case of "Thread Breakage" you should "try re-threading the machine", and also "make sure the thread goes through all guides".

It appears that their web designer has taken this advice to heart.

Dear God, the entire source is on one line. There aren't even spaces between tags. From looking around the website a bit, this doesn't appear to be a joke, so I'm seriously wondering how this could happen without anyone noticing.

Since the site was made in FrontPage, I’m guessing that the FrontPage WYSIWYG view showed the site as looking fine, so the author didn’t bother to visit every page on the site after mass-uploading the pages.

Shows as 110 lines in FF view source

This feels like a mashup between "If the moon were only one pixel" and Spritz.

You.win

It also uses <center> tags. But I'm not here to judge, obviously.

so does hacker news ;)

I just did an 'Inspect Element' on HN. That's some state of the art 1999 web design there.

Yyyyyep HN is formatted almost entirely by tables...

But it does look good!

Not on mobile, mind.

No, it looks like something from 1999. And it completely sucks on mobile.

Actually, it is a disgrace.

If you create a stylesheet through dev console and change h3 font-size it's funny to see how it gets re-rendered in slow-mo :D

Renders perfectly in IE8.

Renders perfectly in IE4, too.

Seems like it's IE being a bit loose with the spec (the doctype is html 3.2 after all) or just catering for the likely hood of a rule for one element being used for another.

For headings, on http://www.w3.org/TR/REC-html32#headings it says "You always need the start and end tags" but for block elements underneath it says that:

    <P>This is the first paragraph.
    <P>This is the second paragraph.

is perfectly valid - presumably why it's fine in IE8

Reference since we seem to have broken it: http://web.archive.org/web/20130723081436/http://www.sewinga...

8000px at the bottom of the page.

> If a problem persists, we recommend that you contact > Sewing and Embroidery Warehouse

finally

It's hauntingly beautiful.

Anyone actually using frontpage... or dreamweaver visual editor... just saying...

You can say: "gotta start somewhere" but... make that "somewhere" be "notepad" ... please... thank u...

This is an art.

For the ultimate (and entertaining) list of bad Websites, check out:

http://www.webpagesthatsuck.com/

A veritable "How not to" of design.

Looks like modern browsers aren't rendering the page correctly.

Great viral marketing!

I like how elements are nested for an even more optimal web experience!

http://imgur.com/1LgIPjl

I think I felt my pulse quicken as I started to scroll.

edit: Actually, it has a bunch of unclosed h3 and h2 tags.

This made me realize how h3 and em works... Awesome (didn't expect that from a site like this :P)

We've all had a laugh but I hope whoever found this is helping them correct the problem.

What do you expect from a website that starts with SEW SEW SEW SEW SEW SEW?

Thank you for the link... I just got my eye checked for sight and its fine.

Looks like a neat linkbait. Unlikely the owner never noticed this..

Superb, a work of art.

even my non-programmer wife found this page to be hilarious

Wonderful! Usually when I find something hilarious, I share with my non-programmer friends who stare at me like I'm some sort of freak; and I am surprised every time.

Yeah I get this too. If you try to explain they go "No don't tell me, too much info!"

It's hipnotic. I absolutely love it.

Unclosed h3 tags are valid HTML.

This page is possibly the best argument for XHTML I've ever seen.

Wow, that's almost a work of art.

It's perfect.

makes me understand more how h3 tag works

It's better at showing how ems work. As the h3 is set to show at 1.17em each nested h3 is slightly larger than the last.

It's the unclosed h3 interacting with two unclosed font tags per line, not the unclosed h3 alone.

this page would be tough to scrape with an xpath to get to "Dull Needles" text node.

    /html/body/center[3]/a[2]/font/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/font/h3/font/font[2]/font/h3/font/font[2]/font/h3/font/font[2]/font/h3/font/font[2]/font/h3/font/font[2]/font/h3/font/font[2]/font/h3/font/font[2]/font/h3/font/font[2]/font/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[2]/h3/font/font[1]/text()

    //text()[contains(.,'Dull needles')]

Reply on news.ycombinator.com