发表新帖
发表新帖

H1 in article page - site title or article title?

前端 未结
关注
8 739
天涯浪人
天涯浪人 2021-02-01 00:27

Within an article-oriented page (such as a blog post), the

element (level 1 heading) is commonly used to markup either:

  • the blog title (i.e

相关标签:
8条回答
  • 天涯浪人
    2021-02-01 01:00

    The <head> part of a HTML page has an element named <title>. As the name implies, this is for the site title.

    HTML is used to structure a page into a machine parse-able form, not for layouting. If it was only about layouting, you could only use <div> and <span> blocks with different classes/ids and apply CSS to them. Instead of 

    <h2>Sub Header</h2>

    I could use

    <div class="header2>Sub Header</div>

    and somewhere have some CSS code that will make this <div> look like h2 (font size, bold font, etc.). The difference is that a computer can't know that my <div> is in fact a second level header in the first example (how should it know that? I might name it differently than "header2"), however in the first case, it knows that it is a second level header by the fact that it is a <h2> element and if it wants to show the user a structured list of head-lines of a page, it can do so

    • Top Level Header
      • Sub Header
        • Sub Sub Header
      • Sub Header
      • Sub Header
    • Top Level Header
      • Sub Header
        • Sub Sub Header
        • Sub Sub Header
      • Sub Header
        :

    by searching for the H1/H2/H3/... elements and structuring them as above. So if a computer tries to find out the title of a page, where will it look for it? In an element named <title> or in an element named <h1>? Think about that for a moment and you have your answer.

    Of course you might say "But the title is not visible on the page". Well, it is usually visible in the browser window somewhere (window title or at least tab title) - however, you may want it to be visible on the page as well - I can understand that. However, what speaks about doing that? Who says you may not repeat it? But I wonder if you should use a h1 element for that.

    <html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>

    Use CSS to style #title the way you like. Make it super big and super bold and have an eye catching color if you like, nothing speaks against it. Automatic page parsers usually ignore div and span to some degree, as it tells them nothing (these are elements used to layout the page for the reader, but they say nothing about the structure of the page. LAYOUT is not STRUCTURE, you can only apply style to certain structural elements to generate a layout, but one should not be confused with the other one). Still a computer will know what the title of the page is, it knows it thanks to the title element.

    0 讨论(0)
  • 灰色年华
    2021-02-01 01:04

    H1 in article page - site title or article title?

    Both. This article is informative: The Truth About Multiple H1 Tags in the HTML5 Era.

    0 讨论(0)
  • 傲寒
    2021-02-01 01:09

    There should only be one, and there must be one only 

    h1
    ; usually this is the page title. Then it should follow h2, h3 etc.

    So your page can look like this (without all the other html tags)

    h1
  h2
  h2
    h3
..etc
    0 讨论(0)
  • 伪装坚强ぢ
    2021-02-01 01:10

    As a screen reader user the heading level doesn't matter as long as it's consistent. Different blogs use different conventions, so there is no standard way to make it more accessible. Making sure the headings match to the content level is more important then what level of heading is used. For example if displaying a series of blog posts with comments all the blog posts could have heading level 2 and at the start of the comments you could have heading level 3. For an example of easy to navigate headings find any Wikipedia article with multiple sections and subsections. I can easily skip around main sections by using my screen readers navigate by heading feature to jump to any level 2 heading, and if I want to move to subsections of a given sections I will navigate to the next heading.

    0 讨论(0)
  • 无人共我
    2021-02-01 01:12

    For a typical website, e.g. a blog, the h1 should contain the site title. Yes, on every page of the site.

    Why? In a website, there are various parts that are shared for all its webpages. Let’s take navigation as example:

    <ul id="site-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About me</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

    This #site-navigation is repeated on every page of the site. It represents the site navigation, not the page navigation. The difference is important! {The page navigation could be a table of contents (like in a Wikipedia article) or a pagination for a long article.}

    If you’d use the article title as h1, the site navigation would be in scope of this heading.

    <body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

    So this markup conveys: The navigation (→ started by the h2) is part of the article (→ started by the h1). But this is not true, this navigation is not the navigation for the article. The links really are part of the whole site, and the site is represented by the site heading.

    The problem becomes clearer when the article contains subheadings, too:

    <body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Why I’m blogging</h2>
  <p>…</p>
  <h2>Why you should read my blog</h2>
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

    As you can see, there is no way to differentiate the article sub-headings from the navigation. It looks like the article has three sub-headings: "Why I’m blogging", "Why you should read my blog" and "Navigation".

    So if we instead use h1 for the site title and h2 for the article title, the navigation can be in scope of the site heading, by using h2, too:

    <body>
  <h1>John’s blog</h1> <!-- the site title -->
  <h2>My first blog post</h2> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

    Now this markup conveys: There is a site titled "John’s blog" (→ started by the h1) and it contains an article (→ started by the first h2) and a site navigation (→ started by the second h2). Sub-headings of the article would be h3 now, of course.

    Another problem by using h1 for the article title is that then there is typically content before the first heading, e.g. the site header including the site title and other stuff. For users that navigate via headings, this first content would be "invisible". So it’s good practice to give every separate block an own heading.

    HTML5 formalizes this with the sectioning/outlining algorithm. It solves many outlining problems you might have had with HTML 4.01, because the content order can be (mostly) free now and you don’t have to "invent" actual headings if you don’t want to, thanks to section/article/nav/aside. But also in HTML5 the site heading should be the h1 that is a child of body but not a child of any sectioning element/root. All other sections are in scope of this site heading.

    0 讨论(0)
  • 半阙折子戏
    2021-02-01 01:14

    On your blog's home page, I would use H1 to denote the site title and H2 for the titles of the individual blog posts that are published on the front page.

    When entering a particular article, though, I would use H1 for the article title and an anchor for the site title.

    This is a nice and semantic setup that will also be appreciated by Google when it crawls your site.

    0 讨论(0)
 看不清?
提交回复
热议问题