기사 페이지의 H1-사이트 제목 또는 기사 제목?
기사 지향 페이지 (예 : 블로그 게시물) 내에서 <h1>요소 (레벨 1 제목)는 일반적으로 다음 중 하나를 마크 업하는 데 사용됩니다.
- 블로그 제목 (즉 , 요소가 아닌 페이지 상단에있는 종종 큰 사이트 제목
<title>) 또는 - 기사 제목
최선의 선택은 무엇이며 그 이유는 무엇입니까?
사이트 소유자에게 사이트 / 블로그의 이름을 알리고 자하는 사이트 소유자에게는 사이트 제목 주위에 레벨 1 제목을 사용하는 것이 합리적 일 수 있습니다.
사용자에게 전달하려는 내용의 관점에서 볼 때 사이트 제목은 관련성이 낮습니다. 기사 내용은 전달하려는 내용이고 다른 모든 사이트 내용은 부차적입니다. 따라서 <h1>기사 제목에 사용하는 것이 가장 좋습니다.
<h1>요소가 사이트 제목이나 기타 콘텐츠가 아닌 기사 제목에 초점을 맞춰야한다고 생각합니다 . 이것은 결코 대중적인 관례 인 것 같지 않습니다.
예 :
- Joel Spolsky 는
<h1>기사 제목에 사용 하고 사이트 제목에 앵커를 사용합니다. - 제프 앳 우드는 사용하지 않습니다 더를
<h1>전혀 ,<h2>문서 제목과 사이트 제목에 대한 앵커 - 37 Signals의 SVN 은
<h1>사이트 제목에 사용 하고 기사 제목에는 앵커를 사용합니다.
이는 올바른 의미 마크 업에 대한 강력한 고려를 기대할 수있는 세 사이트에서 세 가지 다른 접근 방식입니다.
나는 Joel이 Jeff와 함께 옳다고 생각합니다. 37Signals 사람들의 마크 업 선택에 상당히 놀랐습니다.
나에게 그것은 아주 간단한 결정으로 보인다. 기사의 소비자와 가장 관련이있는 것은 무엇인가? 기사 제목입니다. 따라서 기사 제목을 <h1>요소로 감싸십시오 . 끝난.
내가 잘못? 내가 놓친 추가 고려 사항이 있습니까? 내가 맞아? 그렇다면 ' <h1>for article title'접근 방식이 더 일반적으로 사용되지 않는 이유는 무엇입니까?
<h1>요소 를 어디에 사용할 지에 대한 결정은 내가 넣은대로 변하지 않는가? 아니면 주관적으로 고려해야 할 몇 가지 사항이 있습니까?
업데이트 : 지금까지 모든 답변에 감사드립니다. <h1>사이트 제목 대신 기사 제목에를 사용하는 것이 유용성과 접근성 에 어떻게 도움이되는지 (또는 그렇지 않을 수도 있음) 어떤 각도에서 정말 감사하겠습니다 . 개인적인 가정이 아닌 사실에 근거한 답변은 많은 보너스 포인트를받을 것입니다!
가 W3C 품질 보증 팁 이 주제에 대한이 :
<h1>문서의 첫 번째 수준 제목에 대한 HTML 요소입니다.
문서가 기본적으로 독립형 인 경우 (예 : 제네바에서 볼거리 및 할 일) 최상위 제목은 제목과 동일 할 것입니다.
예를 들어 애완 동물에 대한 페이지 모음의 Dogs 섹션과 같이 컬렉션의 일부인 경우 최상위 제목은 일정량의 컨텍스트를 가정해야합니다. 바로 쓰기
<h1>Dogs</h1>- 애완 동물을위한 가이드 개를 : 제목은 어떤 맥락에서 작동합니다 동안.
스크린 리더 사용자로서 제목 수준은 일관성이있는 한 중요하지 않습니다. 블로그마다 다른 규칙을 사용하므로 더 쉽게 액세스 할 수있는 표준 방법이 없습니다. 제목이 콘텐츠 수준과 일치하는지 확인하는 것이 사용되는 제목 수준보다 더 중요합니다. 예를 들어, 댓글이있는 일련의 블로그 게시물을 표시하는 경우 모든 블로그 게시물에는 제목 수준 2가있을 수 있고 댓글 시작 부분에는 제목 수준 3이있을 수 있습니다. 탐색하기 쉬운 제목의 예를 들어 여러 섹션이있는 Wikipedia 기사를 찾고 하위 섹션. 내 스크린 리더를 사용하여 제목 기능으로 탐색하여 레벨 2 제목으로 이동하여 기본 섹션을 쉽게 건너 뛸 수 있으며, 특정 섹션의 하위 섹션으로 이동하려면 다음 제목으로 이동합니다.
블로그 홈 페이지에서 H1을 사용하여 사이트 제목을 나타내고 H2를 첫 페이지에 게시되는 개별 블로그 게시물의 제목으로 사용합니다.
그러나 특정 기사를 입력 할 때는 기사 제목에 H1을 사용하고 사이트 제목에 앵커를 사용합니다.
이것은 사이트를 크롤링 할 때 Google에서도 높이 평가할 멋진 의미 론적 설정입니다.
Wikipedia에서 h1-Tag에는 문서의 글 이름과 제목이 h2로 시작합니다. Wikipedia라는 이름은 html-header에있는 title-tag의 일부입니다. 나는 또한 그것이 갈 길이라고 생각합니다. 따라서 블로그의 경우 귀하가 제공 한 예제에서 Joel Spolsky를 좋아합니다.
그리고 나는 항상 가장 높은 수준에서 시작할 것이므로 h1을 내보내는 것은 나쁜 선택이라고 생각합니다.
<head>HTML 페이지 의 일부에는라는 요소가 <title>있습니다. 이름에서 알 수 있듯이 이것은 사이트 제목입니다.
HTML은 페이지를 레이아웃이 아닌 기계 구문 분석 가능한 형식으로 구조화하는 데 사용됩니다. 레이아웃에 관한 것이라면 클래스 / ID가 다른 <div>및 <span>블록 만 사용 하고 CSS를 적용 할 수 있습니다. 대신에
<h2>Sub Header</h2>
나는 사용할 수있다
<div class="header2>Sub Header</div>
어딘가에 <div>h2 (글꼴 크기, 굵은 글꼴 등)처럼 보이게 하는 CSS 코드가 있습니다. 차이점은 컴퓨터가 내 <div>사실이 첫 번째 예에서 두 번째 수준 헤더 라는 것을 알 수 없다는 것입니다 (어떻게 알 수 있습니까? "header2"와 다른 이름을 지정할 수 있음). 그러나 첫 번째 경우에는 이것은 <h2>요소 라는 사실에 의해 두 번째 수준의 헤더 이며 사용자에게 페이지의 헤드 라인의 구조화 된 목록을 표시하려는 경우 그렇게 할 수 있습니다.
- 최상위 헤더
- 하위 헤더
- 하위 하위 헤더
- 하위 헤더
- 하위 헤더
- 하위 헤더
- 최상위 헤더
- 하위 헤더
- 하위 하위 헤더
- 하위 하위 헤더
- 하위 헤더
:
- 하위 헤더
H1 / H2 / H3 / ... 요소를 검색하고 위와 같이 구성합니다. 그렇다면 컴퓨터가 페이지 제목을 찾으려고하면 어디에서 찾을까요? 이름이 지정된 요소 <title>또는 이름이 <h1>? 잠시 생각해 보면 답이 있습니다.
물론 "하지만 제목이 페이지에 표시되지 않습니다"라고 말할 수 있습니다. 글쎄, 그것은 일반적으로 어딘가 (창 제목 또는 최소한 탭 제목) 브라우저 창에서 볼 수 있지만 페이지에도 표시되기를 원할 수 있습니다. 이해할 수 있습니다. 그러나 그렇게하는 것에 대해 무엇을 말합니까? 반복하지 않을 수 있다고 누가 말했습니까? 하지만이를 위해 h1 요소를 사용해야하는지 궁금합니다.
<html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>
CSS를 사용하여 #title원하는 방식 으로 스타일 을 지정하세요. 원하는 경우 매우 크고 대담하게 만들고 눈길을 끄는 색상을 가지십시오. 자동 페이지 파서는 보통 div를 무시하고 아무 것도 알려주지 않기 때문에 어느 정도까지 범위를 확장합니다 (이는 독자를 위해 페이지를 레이아웃하는 데 사용되는 요소이지만 페이지 구조에 대해서는 아무 말도하지 않습니다 . LAYOUT은 STRUCTURE가 아니므로 적용 만 할 수 있습니다. 레이아웃을 생성하기 위해 특정 구조 요소에 스타일을 적용하지만 하나를 다른 하나와 혼동해서는 안됩니다). 여전히 컴퓨터는 페이지의 제목이 무엇인지 알 수 있으며 제목 요소 덕분에이를 알 수 있습니다.
블로그와 같은 일반적인 웹 사이트의 h1경우에 사이트 제목을 포함해야합니다. 예, 사이트의 모든 페이지에서.
왜? 웹 사이트에는 모든 웹 페이지에 대해 공유되는 다양한 부분이 있습니다. 탐색을 예로 들어 보겠습니다.
<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>
이것은 #site-navigation사이트의 모든 페이지에서 반복됩니다. 페이지 탐색이 아니라 사이트 탐색을 나타냅니다. 차이가 중요합니다! {페이지 탐색은 목차 (예 : 위키 백과 기사) 또는 긴 기사의 페이지 매김 일 수 있습니다.}
기사 제목을로 사용하는 경우 h1사이트 탐색은이 제목의 범위에 포함됩니다.
<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>
따라서이 마크 업은 다음을 전달합니다. 탐색 (→로 시작 h2)은 기사의 일부입니다 (→로 시작 h1). 그러나 이것은 사실이 아닙니다.이 탐색은 기사에 대한 탐색이 아닙니다. 링크는 실제로 전체 사이트의 일부이며 사이트는 사이트 제목으로 표시됩니다.
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는이를 sectioning / outlining 알고리즘으로 공식화 합니다 . HTML 4.01에서 가질 수있는 많은 개요 문제를 해결합니다. 콘텐츠 순서는 (대부분) 현재 무료 일 수 있고 원하지 않는 경우 section/ article/ nav/ 덕분에 실제 제목을 "발명"할 필요가 없기 때문 aside입니다. 그러나 HTML5에서도 사이트 제목은 섹션 요소 / 루트의 하위 항목이 아닌 h1하위 항목 이어야합니다 body. 다른 모든 섹션은이 사이트 제목의 범위에 있습니다.
기사 페이지의 H1-사이트 제목 또는 기사 제목?
양자 모두. 이 기사는 유익합니다 : HTML5 시대의 여러 H1 태그에 대한 진실 .
하나만 있어야하고 하나만 있어야합니다
h1; 일반적으로 이것은 페이지 제목입니다. 그런 다음 h2, h3 등을 따라야합니다.
So your page can look like this (without all the other html tags)
h1
h2
h2
h3
..etc
ReferenceURL : https://stackoverflow.com/questions/268475/h1-in-article-page-site-title-or-article-title
'Programing' 카테고리의 다른 글
| Cordova는 무엇이며 PhoneGap과 어떤 관련이 있습니까? (0) | 2020.12.26 |
|---|---|
| JavaScript에서 로컬 함수 정의 : var 사용 여부? (0) | 2020.12.26 |
| Ninject는 무엇이며 언제 사용합니까? (0) | 2020.12.25 |
| 문자열과 문자의 연결 (0) | 2020.12.25 |
| 여러 CSS 필터를 동시에 사용 하시겠습니까? (0) | 2020.12.25 |