실제 h1 대신 .h1을 사용하는 이유는 무엇입니까?
Bootstrap CSS 프로젝트 내에서 제목 태그 (H1, H2, H3, H4, H5, H6)에 대한 스타일이 제공되지만 제목을 기반으로하는 일련의 클래스 이름도 있습니다 (.h1, .h2, .h3). , .h4, .h5, .h6). H1 태그를 올바르게 사용하지 않고 H1의 클래스 이름을 사용하면 어떤 이점이 있습니까? 나는 당신이 항상 당신의 HTML이 당신의 시각적 중요성을 반영하는지 확인하고 싶다고 생각합니다.
h1 태그를 사용하는 대신 .h1을 사용하는 좋은 이유를 설명하는 모든 생각을 주시면 감사하겠습니다.
물어:
왜
.h1실제 대신 사용h1합니까?
짧은 답변:
목표는 두 가지를 함께 사용하는 것입니다.
.h*클래스 의 유용성은 디자인의 타이포그래피 크기가 의미 상 적절한 제목 수준과 관련이 없을 때 작용합니다. 문제를 둘로 나누면 두 가지 모두를 깔끔하게 해결할 수 있습니다.
첫 번째 비트는 요소 / 태그입니다. ' <h*>'는 의미론, 접근성 및 SEO를 처리합니다.
두 번째 비트는 클래스입니다. ' .h*'는 시각적 의미와 인쇄 계층 구조를 처리합니다.
긴 대답 :
이 클래스의 기원은 OOCSS 프로젝트에서 비롯된 것이라고 생각합니다.
내가 마지막으로 그것을보고 이후 OOCSS의 최신 반복은 조금 변경되었습니다,하지만 여기에 관련이 heading.css나이가 커밋에서 파일을 가지고 그, .h1- .h6나는 잘 알고 있어요 것을 클래스를 :
6e481bc18f oocss / 코어 / 제목 / heading.css
댓글에서 :
.h1-.h6- 클래스는 의미 적절한 제목 수준을 유지하는 데 사용되어야 비 제목에 사용하지
...
추가 머리글이 필요한 경우가 결코 위치에 따라 스타일을 통해 추가 클래스를 통해 작성해야
위 의 강조점에 유의하십시오 .
이 클래스를 사용하는 이유에 대한 좋은 설명은 다음을 참조하십시오.
- stubbornella.org : HTML5 섹션을 사용하여 제목 스타일을 지정하지 마십시오 (이 게시물의 작성자 인 Nicole은 OOCSS의 작성자입니다).
- csswizardry.com : CSS에서 실용적이고 실용적인 글꼴 크기 조정
- Google 그룹스›객체 지향 CSS›제목 질문 : 기본 개념 / 사용법? ('12 년 9 월에 내가 다시 한 질문)
위 링크의 관련 인용문 :
1. stubbornella.org
... [HTML5] 섹션 요소는 브라우저가 제목이 실제로 어떤 수준인지 파악하는 데 도움을주기위한 것이지만 스타일을 지정하는 데 반드시 필요한 것은 아닙니다.
그렇다면 HTML5 세계에서 제목 스타일을 어떻게 지정합니까?
... 스타일링에 단면 요소를 사용해서는 안됩니다. 문서 트리를 분류하는 용도로 설계된 작업을 수행하고, 목표를 더 잘 충족하는 다른 방식으로 스타일 문제를 해결하도록해야합니다. 아무리 깊은 제목에도 적용 할 수있는 재사용 가능한 간단한 클래스 이름을 사용합니다. 섹션 콘텐츠에있을 수 있습니다.
사이트 전체 제목을 클래스로 추상화하는 것이 좋습니다. 그러면 이식 가능하고 예측 가능하며 건조하기 때문입니다. 당신이 좋아하는 무엇이든 그들을 부를 수 있습니다.
2. csswizardry.com
[Nicole Sullivan이] 우리에게 준 또 다른 절대적으로 뛰어난 지혜 덩어리는 내가 이중 가닥 표제 계층 구조라고 부르는 것입니다. 이것은 CSS에서 제목을 정의 할 때마다 클래스를 정의하는 관행입니다.
... 각 제목 스타일과 함께 클래스를 할당함으로써 이제는 매우 구체적이고 움직일 수없는 것이 아닌 어디로 든 이동할 수있는 매우 유연한 선택기에 해당 스타일을 첨부했습니다.
3. groups.google.com
다음은 pseudo-html5 사용 예입니다 (h / t Jamund Ferguson ).
<body>
<div class="main">
<h1>Main Heading</h1>
<section>
<h1 class="h2">Section Header</h1>
</section>
</div>
<aside class="side">
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
</aside>
</body>
이 질문 / 주제와 관련된 자세한 정보는 위의 링크를 통해 전체 기사 (및 스레드)를 읽으십시오.
Most stylesheets have a set of font-sizes that correspond with heading styles 1 through 6. Sometimes, elsewhere on the page, web designers want to use those same font sizes on text which should not be a part of an actual heading element, for semantic reasons. Rather than providing names for each of those sizes like .size-12, .size-14, .size-16, etc, it's easier just to name them all with class names similar to your headings. That way, you know that the text will be the same size as an H1 element, even though it's not actually an H1 element. I've done this a few times myself.
A few reasons I can think of:
- Using div instead of proper tag to get the visual of a header without an impact on SEO
- To avoid complications from browser inconsistencies
- Compatibility with other libraries and frameworks that choose to do the same for reasons 1 and 2
- Design flexibility (as noted by @scrappedcola in the comments)
This allows for a separations of visual hierarchy form semantic hierarchy. eg, I want to tell the viewer one thing, while telling a computer (search engines) something else.
<article>
<h1 class="h1">Page Title</h1>
<p>Some content</p>
<section>
<h1 class="h2">Section Heading</h1>
<div class="h6">Sub Heading</div>
<p>Some content</p>
</section>
<section>
<h1 class="h2">Section Heading 2</h1>
<div class="h6">Sub Heading 2</div>
<p>Some content 2</p>
</section>
</article>
See:
- http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections (toward the botton of section)
- http://html5doctor.com/html5-seo-search-engine-optimisation/
- http://www.youtube.com/watch?v=GIn5qJKU8VM
The only thing I can think of offhand is for search engines. Many will look at an actual h1 tag as the title or subject of a page and use that for searches, etc. Having multiple h1 tags can confuse the search engine spiders and may screw up searches that would return results for your site (I've also heard it may get you on the "bad site" list with some spiders like Google).
Having the styles allows you to have the same visual look to an element without screwing up search engines.
Another reason I have come across recently... this is not particular to Angular but it serves as a good example:
I want to create dynamic/declarative forms in Angular (see Dynamic Forms in the Angular Cookbook) and allow styled text elements. Maximum flexibility would call for allowing me to declaratively add arbitrary HTML elements to my forms, but this is open to scripting attacks, and requires explicit subversion of the Angular compiler to even allow it. Instead, I allow text elements to be added to forms, along with a class for controlling style. So I can use the .h1 style but not the h1 element.
This would definitely help in-terms of SEO and google crawlers to understand your page better. When it reads h1, it assumes that whatever is in there must be the focal point of the page. H2, would be the second components and so on. This way Google can understand the "scope" of what your page is covering in-terms of content.
Not entirely sure, but a big variable in my opinion would be the "read" mode of pages. This would allow devices and readers to organize content especially for devices used by visually impaired people.
Also it provides structure to the page and a sense of order.
참고URL : https://stackoverflow.com/questions/19099401/why-use-h1-instead-of-actual-h1
'IT Share you' 카테고리의 다른 글
| FormsAuthentication 쿠키 이름을 변경할 수 있습니까? (0) | 2020.12.04 |
|---|---|
| 커밋 후 SVN 패치 생성 (0) | 2020.12.04 |
| Visual Studio Code 휴지통에서 삭제 된 파일 복원 (0) | 2020.12.04 |
| RxJava API와 Java 9 Flow API의 차이점 (0) | 2020.12.04 |
| 신속하게 새 라인을 만드는 방법 (0) | 2020.12.03 |