TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

The ﹤main﹥ element

164 点作者 thomasbachem超过 11 年前

18 条评论

SCdF超过 11 年前
Has anyone used all of the HTML5 tags in anger? I&#x27;ve tried a couple of times to build something fully &quot;semantic&quot;. 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.<p>There seem to be lots of situations, even in just mildly complicated web pages, where you need to write HTML code solely for graphics &#x2F; layout reasons that completely breaks the idea of having a purely semantic document.<p>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 &quot;semantic&quot; document ideal and smash divs around.<p>I&#x27;m ready to fully accept that this is the tables-&gt;css revolution all over again and I&#x27;m just crap, though, if that&#x27;s the case.
评论 #6366334 未加载
评论 #6366366 未加载
评论 #6368921 未加载
评论 #6367227 未加载
评论 #6366357 未加载
评论 #6369256 未加载
评论 #6366554 未加载
评论 #6366293 未加载
crazygringo超过 11 年前
Question: is there any evidence that search engines actually use&#x2F;respect semantic tags like &lt;main&gt;, &lt;footer&gt;, &lt;article&gt;, etc.? Or anyone here who knows firsthand from Google?<p>Just because, if I were writing a search engine, I would already have a bunch of &quot;AI&quot;&#x2F;heuristics logic to tease these things out, since most sites don&#x27;t use semantic HTML5 -- and it would probably do a solid job, since it&#x27;s easy to compare a bunch of pages from a single site and figure out what parts are changing.<p>Then, if I actually started assuming that &lt;main&gt; or &lt;article&gt; was always the main&#x2F;article part, it makes it easier for people to &quot;game&quot; the search engine with keyword-stuffing, etc. So, if I ran a search engine, I&#x27;d probably just ignore them completely and rely on my own heuristics.<p>(For example, Google completely ignores HTML language attributes: &quot;Keep in mind that Google ignores all code-level language information, from “lang” attributes to Document Type Definitions (DTD). Some web editing programs create these attributes automatically, and therefore they aren’t very reliable when trying to determine the language of a webpage.&quot; [1] So I wouldn&#x27;t be surprised if semantic HTML is the same deal.)<p>I&#x27;ve heard it endlessly repeated that semantic HTML helps SEO, and that&#x27;s why you should use it. But I&#x27;ve never seen concrete evidence of this -- is there anything that actually backs it up?<p>[1] <a href="http://googlewebmastercentral.blogspot.com/2010/03/working-with-multilingual-websites.html" rel="nofollow">http:&#x2F;&#x2F;googlewebmastercentral.blogspot.com&#x2F;2010&#x2F;03&#x2F;working-w...</a>
评论 #6368533 未加载
评论 #6368568 未加载
评论 #6368446 未加载
评论 #6371059 未加载
WickyNilliams超过 11 年前
Why are people hating on HTML semantics? I fear it is out of some fundamental misunderstanding of how semantics work on the web...<p>First let me be clear that there are (at least) two types of semantics on the web, one for machines (bots and screen readers) and one for meat (humans!).<p>In writing HTML, the goal is not to use every semantically-rich tag available and avoid everything else like the plague. Where you can convey extra semantic meaning, use the most appropriate tag available; where you cannot, use a div or a span or something else. Use of divs does not make your page less semantic - it is not deductive. However use of the correct semantic tags will make your page more semantic - it is additive!<p>In writing CSS, the goal is not to avoid classes&#x2F;IDs altogether to keep your HTML &quot;clean&quot;. The machines care not if your HTML is rammed full of classes; though you will certainly care when it comes to maintaining your pristine HTML. When writing CSS the goal isn&#x27;t even to strive for &quot;semantic&quot; class names. CSS classes convey no semantics, at least not to machines. CSS classes should be used to convey semantics to the meat bags reading the code - devs, interested users etc. Nothing else matters with CSS, write it how you like, in as maintainable a fashion as possible and forget semantics in that domain.<p>Excellent article discussing the fallacies around semantics: <a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/" rel="nofollow">http:&#x2F;&#x2F;nicolasgallagher.com&#x2F;about-html-semantics-front-end-a...</a>
codeka超过 11 年前
Somewhat interesting, perhaps, is the fact that this page itself has the following markup:<p><pre><code> &lt;main id=&quot;content&quot; class=&quot;group&quot; role=&quot;main&quot;&gt; &lt;div class=&quot;main&quot;&gt; ... </code></pre> I, too, have tried to use semantic markup. Unfortunately, except for the most straight-forward of layouts, it&#x27;s very hard to do. Though I guess there was also a time when non-table-based layouts was considered harder than it was worth...
评论 #6367487 未加载
评论 #6366503 未加载
brokenparser超过 11 年前
I&#x27;m still waiting for some sort of &lt;bull&gt; or &lt;hogwash&gt; element to markup comments and other such tripe. E.g.:<p><pre><code> &lt;user class=&quot;spam&quot;&gt;Buy my pills!&lt;&#x2F;user&gt; </code></pre> It would be even more useful if something like this works:<p><pre><code> &lt;user rel=&quot;nofollow&quot;&gt;Buy pills &lt;a href=&quot;fizz:&#x2F;&#x2F;example.net&#x2F;pills&quot;&gt;here!&lt;&#x2F;a&gt; &lt;&#x2F;user&gt; </code></pre> This is cleaner than putting the attribute on every anchor, I wouldn&#x27;t mind crawlers skipping marked comment sections entirely either.
评论 #6366502 未加载
nilved超过 11 年前
I was honestly a little baffled to come into this thread and discover people were having trouble with semantic HTML. It&#x27;s not hard to use, you just need to be inventive with your CSS. A page without divs, spans, strongs and bigs should be everyone&#x27;s goal.
评论 #6366741 未加载
chrisfarms超过 11 年前
The ARIA roles ideas seem to address the semantics&#x2F;accessibility issues much better than semantic tags.<p>Plus with the direction that the Web Components stuff is going, I think they should probably scrap all the semantic elements, just stick to a smaller set of HTML elements that are &quot;functionally&quot; different. Then tell everyone to create their own tag-semantics by extending the basic elements for their use-case and use the standard roles taxonomy to describe the intent of the user-created tags.<p>It feel a bit like parts of the groups are not talking enough :)
mvzink超过 11 年前
This is great news. However, all this discussion of &quot;semantic this-or-that makes my site look like shit&quot; or &quot;semantic tags are just for template clarity&quot; and &quot;well at least web crawlers and Readability can make use of it&quot; is really annoying.<p>If you think &lt;main&gt; exists to make SEO easier for you, I&#x27;m willing to bet that around 7 million blind people in the US alone won&#x27;t bother trying to use your site. Why? Because their screen reading software won&#x27;t be able to make it through your mess of markup and get to the part that matters, for one.<p>It&#x27;s hard enough getting people to care about accessibility at all, but trying to drive ARIA adoption must be a complete nightmare. &lt;main&gt; is taking one of the most obvious, simple, and useful pieces from ARIA, which just happens to fit in quite sensibly with existing &quot;semantic&quot; tags, and allowing you to remove an important accessibility hurdle without even knowing about ARIA!<p>I, for one, am extremely glad that I can now make my sites a bit more accessible with almost no extra effort.
Kiro超过 11 年前
I still haven&#x27;t found one good reason to use any of the semantic HTML5 tags instead of just good old divs. This didn&#x27;t convince me.
评论 #6366683 未加载
评论 #6366617 未加载
评论 #6366459 未加载
peferron超过 11 年前
Thanks for posting this. I just replaced the &lt;section&gt; I was using on one of my projects by a &lt;main&gt;. In the context of this project, this particular container was always meant to be unique anyway; and it had been bothering me a bit these past few days to know that I wasn&#x27;t using &lt;section&gt; quite as intended. Using a &lt;div class=&quot;main&quot;&gt; wasn&#x27;t a very sexy alternative either.<p>Quite sure that when I read the list of HTML5 elements a while back, &lt;main&gt; wasn&#x27;t in the list! Glad it got added.
jpswade超过 11 年前
Firefox 21, Chrome 26, and a WebKit r140374 have all implemented basic support for &lt;main&gt;.<p>They have all mapped the ARIA role=&quot;main&quot; to the &lt;main&gt; element so assistive technologies can now recognise the &lt;main&gt; element without issue.
wiradikusuma超过 11 年前
The good thing is it&#x27;ll be easier for robots to crawl pages to find the, well, main content. E.g. scrapers for websites without RSS support.<p>The bad thing is if the robot is a search engine spider, people will use try to serve different &#x27;main&#x27;.
jebblue超过 11 年前
The header goes inside of body now? If so then now header no longer means header. For that matter, main seems to be doing what body is supposed to do? Personally I think it should be:<p><pre><code> &lt;header role=&quot;banner&quot;&gt; [...] &lt;&#x2F;header&gt; &lt;body id=&quot;content&quot; class=&quot;group&quot; role=&quot;main&quot;&gt; &lt;div id=&quot;divcontent1&quot; class=&quot;aclass&quot; role=&quot;arole&quot;&gt; [...] &lt;&#x2F;div&gt; &lt;&#x2F;body&gt; &lt;footer role=&quot;contentinfo&quot;&gt; [...] &lt;&#x2F;footer&gt; </code></pre> Why change the expectations for where a header goes after around two decades?
评论 #6370384 未加载
thezilch超过 11 年前
Sure I do, and there are many more HTML5 tags not mentioned by the article (eg. figure and figcaption). MDN does a great job listing, describing, and stating browser support, for each: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;HTML&#x2F;HTML...</a>
phpnode超过 11 年前
it&#x27;s annoying that it can&#x27;t be used more than once per page. It would be useful to also have a &lt;content&gt; element, e.g.<p><pre><code> &lt;article&gt; &lt;header&gt;...&lt;&#x2F;header&gt; &lt;content&gt;...&lt;&#x2F;content&gt; &lt;footer&gt;...&lt;&#x2F;footer&gt; &lt;&#x2F;article&gt;</code></pre>
评论 #6366368 未加载
评论 #6367625 未加载
Andrex超过 11 年前
This is completely off-topic, but I wanted to say I love the font used for the headings on this site. &quot;Quicksand,&quot; is it? Nice and playful without being completely unprofessional, very good pick.
derefr超过 11 年前
Sounds convenient for one major use: letting web-scraping and readability-like tools know that everything <i>outside</i> of &lt;main&gt; is alright to throw away.
评论 #6366313 未加载
robinduckett超过 11 年前
Down?
评论 #6366271 未加载