11 ms·
Do we need a new heading element in HTML?
- boredpudding 10y agoThere is <header> already. What would be the difference between <h> and <header> ?
- TazeTSchnitzel 10y agoThat's for a header, not a heading. A heading is a line of text providing a title for a section. A header is a part of the top of a page.
- boredpudding 10y ago> A heading is a line of text providing a title for a section. Which is exactly what <header> is trying to be. > …introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. > When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page. Source: http://html5doctor.com/the-header-element/ http://html5doctor.com/the-header-element/ (quoted from the actual spec)
- detaro 10y agoyour source clearly shows that it is not just for the heading (but can contain it, with <hX> tags), but contains other elements as well.
- TazeTSchnitzel 10y ago> > A heading is a line of text providing a title for a section. > Which is exactly what <header> is trying to be. Not at all: > > A header typically contains a group of introductory or navigational aids. Key word here is group. A header is a block containing other elements. A heading is a line of text. Often the header contains a heading, but header element itself is not a heading. A realistic example might be something like: <header> <h1>New York Times</h1> <time>Monday, February 20, 2017</time> </header>
- tekmate 10y agoit's valid to put a <header> in any new section/main/article/aside
- TazeTSchnitzel 10y agoSo it seems, my definition wasn't the best.
- VeejayRampay 10y ago<h> is for heading elements (h1, h2, h3, etc.), <header> is for headers (more of a structural block container) I think.
- weego 10y agoheader is metadata about the page and other related resources. This is dealing with the semantic issue of, for example, web components not knowing enough about the context they are in to be able to declare the correct heading tag (h1, h2, h3... etc) as a static tag
- string 10y ago> header is metadata about the page and other related resources. I think you're confusing the head and header elements.
- walterstucco 10y agoNope. It's already been solved by HTML spec. Having an H tag it's the same of having the header tag. It doesn't solve any of the problems. see http://imgur.com/a/FnLVb http://imgur.com/a/FnLVb
- jaffathecake 10y agoThe <h> proposal is different to the <header> proposal. <header> isn't involved in outline production. The <h> proposal is more like <h1> + sectioning.
- Jaruzel 10y agoDoing it like that means: a) All headers are H1, and styled the same, unless you then start classing up the section and h1 tags accordingly = more complex css than need be. b) not-so-clever page crawlers won't be able to extract the real H1 header that should title the page content.
- deleted 10y ago[deleted]
- walterstucco 10y agoI was just showing how the DEAFAULT browser's CSS take care of nesting and different importance of H1 tags depending on the context. H1 is already the H you're looking for.
- TazeTSchnitzel 10y ago> The suggestion is that <h> would solve this, as browsers would implement it & do the right thing in terms of the accessibility tree. > This is a common mistake in standards discussion - a mistake I've made many times before. You cannot compare the current state of things, beholden to reality, with a utopian implementation of some currently non-existent thing. Ugh, yes, this happens so often: something is implemented badly, so we propose to add the same thing again under a different name and with subtle differences, assuming it'll be implemented right this time. If possible, it's better to try and get the implementations fixed. That may not even require changes to the standard.
- sjwright 10y ago> > You cannot compare the current state of things, beholden to reality, with a utopian implementation of some currently non-existent thing. This feels like a fallacy worthy of a name. Does it have one?
- jaffathecake 10y agoMaybe https://en.wikipedia.org/wiki/Nirvana_fallacy https://en.wikipedia.org/wiki/Nirvana_fallacy is closest?
- huskyr 10y ago"A choice between one realistic achievable possibility and another unrealistic solution that could in some way be better" is the definition on Wikipedia. Sounds pretty much spot-on.
- franciscop 10y agoXKCD's Standards is the closest I know: https://xkcd.com/927/ https://xkcd.com/927/
- sjwright 10y agoThe closest thing I can think of is "version 2 syndrome" or what Mythical Man Month described as "second-system effect". But it's not quite that. This cognitive problem tends be a cause of second-system effect.
- deleted 10y ago[deleted]
- return0 10y ago... that thing about the answer to titles ending in question marks.
- jaffathecake 10y agoWhat's the general issue with this? I've heard it before in relation to https://en.wikipedia.org/wiki/Betteridge's_law_of_headlines https://en.wikipedia.org/wiki/Betteridge's_law_of_headlines, but that doesn't seem to apply here.
- return0 10y agoJust my opinion, but why do we need an <h> element since we already have 6 of them?
- jaffathecake 10y agoCheck out the article, it essentially claims we might not.
- 7Z7 10y agoIsn't that the point? Betteridge's Law worked again.
- jaffathecake 10y agoHah, kinda. I think in Betteridge's Law the author intends to suggest the answer is "yes", but uses a question to avoid making a claim, so the real answer is usually "no". In this case, it's the author's (me) intention to leave the reader thinking the answer is "maybe" or "probably not".
- tyingq 10y agoSurprised it wouldn't come with a new attribute, like level, in case you don't trust the browser to autocalc... <h level=1>
- jaffathecake 10y agoThis kinda already exists https://www.w3.org/TR/wai-aria/states_and_properties#aria-level https://www.w3.org/TR/wai-aria/states_and_properties#aria-le...
- tyingq 10y agoThat's mentioned in the github thread. Would it be, though, the first time changing an aria-whatever attribute would have a visual effect on the page (without specific css)?
- jaffathecake 10y agoHuh, good point. I can't find any pseudo-class that's affected by aria.
- mamadrood 10y agoThen what would be the difference between <h level=1> and <h1> ? Or is that sarcasm ?
- tyingq 10y agoBecause you can manipulate attributes without destroying and recreating elements. Changing <h level=1> to <h level=2> is a much simpler and different thing to changing <h1> to <h2>. An alternative approach to 100% trusting the browser to calculate the level. You can calculate and adjust as needed.
- esrauch 10y agoCan you explain in what ways it is simpler to change 1 to 2 in the first case? Is it that you are mutating them via script and it seems more "normal" to mutate a property of a tag instead of the tagname? Or is it because it might have a named closing tag and you have to update both?
- crazygringo 10y agoHeading styles (whether in HTML or word processors) have long been a source of annoyance for me, because they constantly have to be redone. Current models all follow the top-down approach -- assume you know your top sections when you start (H1), then drill down into H2, H3, etc. But just as often you want to do bottom-up -- start with a short article with a single heading (H1), then add a sibling section (turn both H1's into H2's, add the "real" H1), then put those both under a larger section (H2's become H3's, H1's turn into H2's, new H1), and so on. Any manual choice of heading levels is just dumb, frankly. <h> is a great solution -- I just want to see something similar for word processors as well!
- jaffathecake 10y agoWhy do you think <h> is a better solution compared to what HTML5 proposed?
- RubyPinch 10y agoMaybe its best use would be a pre-processor feature? Best of both worlds, controllable auto-calculation, plus backwards compatibility
- deleted 10y ago[deleted]
- didgeoridoo 10y agoThis problem was solved (although apparently not fully implemented) through the "document outline" approach using semantic section elements: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin...
- sjwright 10y agoMost word processors' paragraph styles are an arbitrary list. You can define your own "Heading 1.5" style if you wish.
- jessaustin 10y ago
- jpttsn 10y agoI like to use <h1> in exactly this (proposed <h>) fashion, and just pretend <h2> etc. don't exist. Always have been curious if there are non-obvious drawbacks.
- jaffathecake 10y agoThis is covered in the article - it isn't represented in the accessibility tree.
- sparkling 10y agoBeen writing HTML for 10+ years and never encountered <h>, really makes you question your understanding haha
- Ajedi32 10y agoThat's because it's effectively never existed, as it was never implemented in any popular browsers.
- Raphmedia 10y agoSimply use <strong> or <em> to let the browser know that your heading is important.
- Ajedi32 10y agoI'm not sure if this is supposed to be a joke, or...?
- Raphmedia 10y agoNot a joke at all. It should look like: <header> <h1>My page title</h1> <strong>My page is the best page on this website.</strong> <header> If your heading is a paragraph you should use a <p> instead. That's what we have been doing for ages. I don't see the need for a new tag. HTML5 already add semantic tags. Before, it would have been the same as this snipped I posted but without the <header> tag. Now that this tag exists there is no confusion at all. Web crawlers should be smart enough to know that the <strong> that that is in a header right next to a title is a heading. Hell, even <hgroup> has been deprecated because we don't need those tags.
- Ajedi32 10y agoBut what does that have to do with the original article? The problem it's discussing is the lack of a context-dependent outline algorithm for h1-6 elements in modern browsers.
- Raphmedia 10y agoIt already does that. If you do : <body> <h1>My website</h1> <section> <h1>My section</h1> </section </body> The second <h1> will act as a <h2>. Edit: I think I'm missing the point here. Ignore those posts.
- Kinnard 10y agoNo, we need to be able to create our own custom elements as needed and share them in an ecosystem of components.
- chopin 10y agoI think that's what Javascript is for...
- gkya 10y agoI thought that's what XSLT was for (All I know about XSLT is that it's a fearsome thing, so maybe I'm wrong).
- dcwca 10y agoGreat news, that's exactly what we have!
- nashashmi 10y agoThe problem is trying to get browsers and readers to give them appropriate treatment.
- jaffathecake 10y agoIf a new element is proposed I think it should be trialed as a custom element. And of course, once something is decided, we should have a polyfill to set the correct heading level (via aria-level) for older browsers.
- xg15 10y agoMaybe I'm mistaken, but weren't the <h1>, <h2>, etc elements defined to be essentially equivalent in HTML5, with the number being there for legacy agents only? I.e., non-legacy browsers should already ignore the number and only take nested <section> elements into account when building the tree and calculating the heading level. So the following: <h1>Heading</h1> <section> <h1>Sub heading</h1> ... </section> would be perfectly valid.
- extra88 10y agoBrowsers haven't implemented it.
- deleted 10y ago[deleted]
- adiabatty 10y agoNot quite. You can do things like this, and the `section > h2` will properly be a subheading of the `section > h1`, which will be a subheading of `article > h1`: <article> <h1>Why Fancy Keyboards Are Great</h1> <section> <p>Fancy keyboards are wonderful. Here's why:</p> <h1>Ergonomics</h1> <p>Not contorting your body into a pretzel is wonderful.</p> <h2>Low-force keys</h2> <p>You can get fancy keyboards with Gateron Clears to make typing easier.</p> ... </section> </article> This sort of thing is handy if your blog software (Jekyll, Hugo, etc.) mechanically pastes the output of a Markdown processor into a space reserved for blog posts. Particularly if you want to use h1 elements in your Markdown source and have things turn out right without rewriting header levels. Like with a lot of document-markup doodads, there's an automated checker for this sort of thing: https://gsnedders.html5.org/outliner/ https://gsnedders.html5.org/outliner/
- deleted 10y ago[deleted]
- jasonpeacock 10y agoA good editor can automatically fix <hN> values if needed. But if you're writing an html page, you should already know what you're writing (outline, editing, review, etc). How often are you re-scoping everything? Any discussion like this needs a Tufte reference: It is also notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of sentences which then cumulate sequentially into paragraphs, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn't require an elaborate hierarchy to organize. A useful decision rule in thinking and showing is "What would Feynman do?" https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000hB https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=...
- throwanem 10y ago> How often are you re-scoping everything? Potentially very often, if you're using Angular 2/React components or Angular 1 directives in various locations on a page. On the other hand, if that's what you're doing, using heading tags is arguably the wrong thing in any case, since their semantic meaning is not likely to be preserved.
- adiabatty 10y ago> How often are you re-scoping everything? Often twice. Once for when a post shows up on example.blog/ and again for example.blog/2017/post/. It's nice to not have to rewrite the headers inside my blog entries depending on where the post shows up. I really like the newfangled outline algorithm for that.
- combatentropy 10y agoIndeed. Several times I tried to style the tags h1 through h6 so that they were distinguished while not getting too extreme. So I used a combination of font size, weight, underline, and color. When at last I thought I succeeded, I began to ask myself if it mattered. For what reader could really keep track of six levels of headings in single page anyway? Several levels of headings, along with bullet points and numbered lists, benefit the writer, while you plan your work. But they are not ideal for the reader. I think the best form for the reader is ironically the well-told yarn: a series of well-composed "sentences which then cumulate sequentially into paragraphs," as the venerable Mr. Tufte says.
- SCdF 10y agoWait. I'm not a HTML/CSS wiz by anyone's stretch of anyone's imagination, but isn't H1 the semantically correct thing to use here? So using his first example, instead of using <h2> just use <h1>, and then style it differently (if you want) with .promo>h1? /me braces for thunderous scorn edit: oh, I see, that breaks accessibility readers. Well that's unfortunate.
- aphextron 10y ago>Do we need a new heading element in HTML? No.
- andybak 10y agoI still get SEO 'experts' giving reports on sites I've worked on that claim that skipping from a h1 to a h3 without an intervening h2 will cause lower Google rankings. If this is actually true then I truly despair of this life. But I strongly suspect it's the fact that the SEO community seems to only learn new factoids and never discards old ones.
- RobertKerans 10y agoWe just had "Every discrete page must have an h1 tag with the page title". Even though that isn't appropriate for this site, and the head meta already has page titles and description. So now we implement customizable h1 tags on each page that are all then hidden using `display:none` (which I think is penalised by Google, not that it matters much). Multiple H1 tags as well, Seo guys did not like that, so we had to fork the off the shelf modules in the CMS to make them non-spec compliant. I love Seo consultants and their fantastic suggestions
- jaffathecake 10y agoI have no insight, but I'm pretty confident this is nonsense. A lot of sites have broken heading structures - it'd be a mistake to downrank otherwise good results because of this.
- duskwuff 10y agoRemember -- these are the same "SEO experts" that will happily tell you that you need to host every web site on its own IP address, even though a Google employee has said unequivocally (over 10 years ago!) that this has no impact on ranking.
- pbhjpbhj 10y agoI think you'll find the SEO community to be pretty scientific. Presumably it's Matt Cutts you're referring too - I'm pretty sure he's lied before about optimisations; Google after all don't want people to know all the details to avoid gaming the algos. If shared IP is a strong signal for low quality sites then it's to Google's benefit to avoid confirming that.
- phragg 10y agoCorrect me if I'm wrong but that's what <header> is for. You can use this tag in articles, figcaptions, et al
- amelius 10y agoThis would be a huge improvement. Still it remains somewhat ugly that you can specify a heading anywhere inside a section (not just at the top).
- oever 10y agoIn OpenDocument Format it's <text:h text:outline-level="1"> etc.
- jt2190 10y ago> Unfortunately, no browser implements the outline when it comes to the accessibility tree, meaning screen readers still see an <h1> as a level 1 heading no matter how many sections it's within. > This sucks. The outline was kinda the whole point. But is the point still _relevant_? Most of the world has essentially ignored semantic markup for decades. How is improving the semantics helping anything if most people don't use it? (aside: Semantics crusaders remind me of Douglas Adams' character Slartibartfast in "The Restaurant at the End of the Universe". In the book, travel through time to change the outcome of historical events has become so rampant that Slartibartfast joins what is called The Capmain for Real Time in order to preserve the "original" historical record. Nobody pays any attention to him of course, and they just keep on changing history as benefits them.)
- wtbob 10y agoSometimes virtue is its own reward. Its funny that you bring up Slartibartfast's Campaign for Real Time, which was based on the real life Campaign for Real Ale. Sure, CAMRA didn't put an end to awful mass-market lagers: but they were able to keep real ale available, and continue to do so today. Perhaps those of us who appreciate semantic markup can do the same.
- bmon 10y agoThe app I used to read this article relies on well formed markup like this. There is significant value in using descriptive markup compared to the cost.
- dubin 10y agoSomething cool you can do with React is create an intelligent `Heading` component that wires into context to determine where it is at in the tree. It could then adjust it's actual HTML heading element accordingly. So for example, when you have a `Heading` inside another `Heading`, they render to `h2` and `h1` respectively.