왜 적절하고 의미 적으로 마크 업을 방해할까요?

_{나는 그들이 외형과 느낌을 좋아하기 때문에 가능한 한 의미 론적으로 표시하려고 시도하지만 다른 놀라운 이점을 알고 있기 때문에 아닙니다. 내 질문의 요점은 다른 사람들을 교육 할 수 있다는 것입니다}

글쎄, 나는 종종 "가장 의미론적인 방법으로 이것을 마크하자"는 기사와 튜토리얼을 많이 보았다.

그런데 왜 이상한 생각이 들었 습니까?

올바른 의미 론적 의미를 전달하는 특정 요소를 귀찮게해야하는 이유는 무엇입니까? 특히, 나는 같은 새로운 HTML5 요소를 말하는 겁니다 <time>, <output>또는 <address>. 특히 페이지가 "작동하는"경우 (모든 브라우저에서 멋지게 렌더링 됨).

왜 내가 좋아하는 요소를 사용하고자하는 것 <time>또는 <address>아무것도 전혀 (또는 최악의 경우에, 일반은 <span>) 그냥 잘 작동하지를?

이 소위 모범 사례를 따르지 않는 수많은 (매우 인기있는) 웹 사이트 (이 웹 사이트 포함)를보고 있기 때문에 이것을 묻습니다.

무료 기능

<label>s를 올바르게 사용 하면 레이블을 클릭하여 텍스트 필드를 입력 할 수 있습니다. 많은 브라우저가 공식 사양에 따라 많은 태그에 논리적 기본 기능을 추가하므로 JavaScript 플러그인을 더 적게 사용하고 완전히 <div>s 및 <span>s 로 만들어진 사이트보다 적은 코드를 작성할 수 있습니다 .

접근성

무료 기능과 관련하여 시맨틱은 화면 판독기 소프트웨어에 많은 의미가 있습니다. 입력 필드 앞의 텍스트는 유언장과 같은 방식으로 읽히지 않습니다 <label>. 스크린 리더는 대부분의 CSS를 무시하므로 대부분 HTML 구조에 달려 있습니다.

논리적 CSS

and 스타일을 직접 div #header사용할 수 있는 경우 왜을 사용 <header>합니까? 시맨틱 태그를 사용하면 물건을 더 쉽게 표시하고 스타일을 훨씬 더 휴대하기 쉽게 만들 수 있습니다. 스트라이크 아웃에 특정 스타일이 있고 항상 <del>요소를 사용 하는 경우 스타일이 훨씬 더 이식 가능합니다. <del>모두에게 같은 것을 의미하지만 모두가.deletedText 수업 다르게 입니다.

또한 대규모 프로젝트에서 모든 사람이 같은 페이지에 있도록합니다. 아무도 다른 사람들의 난해한 클래스 명명 규칙을 배우는 것을 좋아하지 않습니다.

SEO

구글과 같은 검색 엔진은 시맨틱 HTML과 메타 데이터를 더 많이 사용했다 . Google의 리치 스 니펫은 시맨틱 콘텐츠를 전달하기위한 특수 메타 데이터도 사용합니다.

왜 그렇게 공통적이지 않습니까?

작업이 필요하고 사람들은 웹 사이트의 모양과 작동 방식을 판단하는 데 익숙 합니다 . 앱의 비즈니스 사례를 작성하는 사람들이 이해 하지 못 하기 때문에 의미에 대한 설명이없는 경우가 종종 있습니다. 하거나 중요한 이유 .

비 기술적 인 사람들이 HTML 의미를 이해하거나 평가하는 것은 매우 어렵습니다.

웹 사이트가 좋아 보이고 작동하는 것처럼 보이는 이유는 무엇입니까? 많은 사람들은이 알 수 없습니다 입니다 그것은 더 아무것도. 내게 필요한 옵션과 비슷하게 팀의 누군가가 실제로 이것을 이해할 때까지 무시되는 경향이 있습니다.

당신은 의미 HTML 프로젝트에 우선적으로 할 경우, 당신은 그것을 위해 케이스를 제시 할 필요가있다. 스크린 리더에서 웹 사이트의 작동 방식을 팀 / 보스에게 보여주는 것도 유용한 도구입니다.

이에 대한 대답은 단순히 정보를 전달 하고 문서를 구성하는 것 입니다.

범위와 div를 사용하면 문서에 구조가 없습니다. 목록, 단락, 테이블, 하이퍼 링크가 없습니다. 아무것도. HTML을 마크 업 언어로 선택한 다음 콘텐츠를 표현하고 구성하기 위해 제공하는 어휘를 무시할 필요는 없습니다. 여기서 구조는 중요한 단어입니다. HTML은 구조화가 표시되지 않습니다. 이것이 CSS의 목적입니다.

코드를 의미 적으로 마크 업하면 인간 독자뿐만 아니라 기계에게 요소 내부의 데이터를 이해할 수있는 기회를 제공합니다. span 및 div 요소를 항상 사용하면이 추가 정보가 없으므로 값만으로 추론 할 수 없습니다.

마찬가지로, 웹 사이트를 긁어 내고 제목 만 추출하여 목차를 만들려면 스파이더가 제목이 무엇인지 알아야합니다. 적절한 요소가 없으면 그렇게 할 수 없습니다.

마지막으로, div와 span 만 사용하면 CSS로 스타일을 지정하는 데 어려움을 겪을 수 있습니다. CSS 선택기는 문서의 구조에서 작동하며 대부분 모호한 구조 인 경우 CSS 규칙이 적용됩니다. 당신 div div div은 실제로 table tr td또는 여부를 어떻게 결정 body ul li합니까? 그런 다음 클래스와 ID를 추가해야하지만 바퀴를 다시 발명해야합니다.

W3C 의 권장 사항 도 참조하십시오

적절한 의미 요소를 사용하면 사용자 에이전트가 구조를 사용할 수 있습니다. 여기에는 콘텐츠의 의미를 이해하는 데있어 다른 단위의 역할을 명시 적으로 나타내는 것이 포함됩니다. 단락, 머리글, 강조된 텍스트, 표 등의 컨텐츠의 특성을 모두 이와 같이 표시 할 수 있습니다. 경우에 따라 제목과 부제목 또는 표의 셀과 같은 콘텐츠 단위 간의 관계도 표시해야합니다. 그 후, 사용자 에이전트는 예를 들어, 상이한 유형의 구조에 대해 상이한 시각적 프리젠 테이션을 사용하거나 청각 프리젠 테이션에서 상이한 음성 또는 피치를 사용함으로써 사용자에게 구조를 인식 할 수있게 할 수있다.

여기에 이미 좋은 답변을 추가하기 위해 언급하지 않은 한 가지는 순방향 호환성 입니다. 사양이 발전함에 따라 특정 의미 요소에 대해 추가 기능이 지정 될 수 있습니다. 코드가 의미 적으로 정확하면 최소한의 유지 관리만으로이 기능을 활용할 수 있습니다.

의미론을 완벽하게 따르는 많은 사이트가 보이지 않는 한 가지 이유는 많은 비즈니스 사례가 없기 때문입니다. 그것이 판매 (또는 노출과 같은 관련 범주)를 유도한다면 의미 론적 HTML을 작성하는 것이 가치가 있습니다.

태그를 의미 적으로 사용하기 위해 할 수있는 가장 좋은 경우는 도구를 사용하여 HTML을 사용하거나 사용할 때입니다. 예를 들어 시맨틱 태그를 사용하면 다른 스타일을 추가하거나 제거 할 염려없이 요소에 직접 스타일을 지정할 수 있습니다. 또한 스크레이퍼 또는 이와 유사한 것을 사용하여 HTML을 구문 분석 해야하는 경우 XPath 및 DOM 쿼리를 작성하여 필요한 것을 찾기가 더 쉬워 짐에 따라 올바르게 구성된 의미 론적 HTML을 높이 평가할 것입니다.

클래스는 시맨틱 태그를 직접 대체하지 않습니다. [error, information, warning]다른 의미를 전달 하는 재사용 가능한 클래스 가 있으므로 첨부 된 태그를 기반으로 스타일이 있습니다.

크롤러 및 웹 서비스 (컴퓨터와 통신하는 AKA 컴퓨터)에 유용하거나 필요할 수 있기 때문입니다. 당신이 쓰는 경우 :

<span class="time">Sep 16 at 2:17</span>

... 웹 크롤러는이를 날짜, 시간으로 이해할 필요가 없습니다. 또는 날짜 정보로 찾기가 훨씬 더 어려울 것입니다.

사용하는 경우 :

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

크롤러가 물건을 찾고 분석하는 것이 훨씬 쉬울 것입니다.

크롤러를 말할 때 검색 엔진을 반드시 의미하는 것은 아닙니다. :)

소규모 웹 컨설팅 회사를 운영하고 있으며 현재 접근 방식은 여러 요소의 균형을 맞추기 위해 새로운 HTML5 태그를 사용하지 않는 것입니다. 이 경우 균형은 유용성, 유용성 및 SEO 사이에 있습니다.

• SEO : 다른 답변은 여기에 있습니다. SEO에 대한 전략이 분명하지만 내 경험에 따르면 도움이 될 가능성은 적습니다.

• 유용성 # 1 : HTML5 태그가 일종의 유용성 이점을 제공한다고 가정하는 것이 합리적입니다. 맹인 사용자에게는 액세스 가능한 브라우저가 제공하는 폴 백이 무엇이든 내가 제공 할 수있는 것보다 낫습니다. 일반적인 사용자에게는 훨씬 더 논쟁의 여지가 있습니다. 어쩌면 브라우저에 제공되는 스킨이없는 미디어 플레이어를 사용하는 것이 내가 익숙하지 않은 위젯보다 사용하기가 더 쉽습니다. 또는 Chrome의 기본 MP3 플레이어가 주기적으로 작동을 멈추는 것과 같이 브라우저의 기본값이 잘못되었을 수도 있습니다.

• 사용성 # 2 : 오래된 IE. 이전 IE에서는 이러한 태그가 작동하려면 페이지를 부 풀리는 HTML5 심이 필요합니다. 사용중인 모든 HTML5 태그에서 루프로 CreateElement ()를 호출하는 헤드 태그에 스크립트를 추가해야합니다. 사용중인 태그에 대해 각 페이지를 빗질하지 않으려면 모든 HTML5 태그를 의미합니다. 이것은 모든 단일 페이지에서 인라인으로 실행되어야하며 캐싱이 필요 없습니다. 그리고 나쁜 소식 : 오래된 IE는 Javascript를 실행하는 것이 가장 느리기 때문에로드하는 동안 멋진 작은 lurch를 만듭니다. 그런 다음 지원되지 않는 모든 최신 요소를 올바르게 렌더링하기 위해 오래된 IE 전용 Javascript 및 CSS와 종종 Flash를 사용해야합니다. 이전 IE 코드를로드하기로 결정하기 전에 감지 기능을 사용할 수 있지만 이전 IE 사용자는 해당 기능을 수행하기에 충분한 스크립트가로드 될 때까지 기다렸다가 해당 태그를 작동시키는 모든 것을 요청하기 시작합니다. 브라우저는 브라우저를 사용하여 이전 IE 항목을 감지하고 사용자에게만 보낼 수 있지만 플랫폼에 따라 캐싱을 어렵거나 불가능하게 만들 수 있습니다. 다른 사용자에게 다른 코드를 제공한다는 것은 테스트가 더 복잡하다는 것을 의미합니다. 비동기 버그가 있습니까? 특정 브라우저에서만 발생하는 것은 어떻습니까? 그리고 생산에만? 가입하세요 그래서, 당신은 아마 그 팽창을 모든 사람에게 보낼 것입니다. 다른 사용자에게 다른 코드를 제공한다는 것은 테스트가 더 복잡하다는 것을 의미합니다. 비동기 버그가 있습니까? 특정 브라우저에서만 발생하는 것은 어떻습니까? 그리고 생산에만? 가입하세요 그래서, 당신은 아마 그 팽창을 모든 사람에게 보낼 것입니다. 다른 사용자에게 다른 코드를 제공한다는 것은 테스트가 더 복잡하다는 것을 의미합니다. 비동기 버그가 있습니까? 특정 브라우저에서만 발생하는 것은 어떻습니까? 그리고 생산에만? 가입하세요 그래서, 당신은 아마 그 팽창을 모든 사람에게 보낼 것입니다.

IE8이 죽을 때까지이 새로운 HTML5 태그의 가치는 성능 문제가 충분히 높지 않습니다. 우리는 아직 죽음에 가까운 * 그러나 언젠가는 청중과 함께 일하지 않습니다.

* 최신 통계에 따르면 IE8 방문자가 가장 적은 사이트의 경우 IE8이 6 %, IE8 방문자가 가장 많은 사이트의 경우 24 %가 표시됩니다. 멀리서, 멀리서

짧은 대답은 "실제로 합당한 이유가 없습니다."입니다. "의미"마크 업에 찬성하여 제시된 거의 모든 주장은 유형의 것이 아니라 일어날 수 있거나 일어날 수있는 것에 대한 생각 일뿐입니다. 예를 들어, 검색 엔진은 종종 언급되지만 검색 엔진에 대한 관심이 가장 적 time거나 output또는 에 대한 공개 증거는 없습니다 address.

간접적으로 우리는 그들이 가까운 미래에 관심이 없을 것이라고 추론 할 수 있습니다. 일부 주요 검색 엔진 의 schema.org 사이트는 완전히 다른 무언가, 즉 마이크로 데이터 ( itemscope및 관련 속성)를 기반으로하는 "의미 적 마크 업"에 대한 특정 접근 방식을 분명히 선호합니다 . 그리고 실제로는 주로 대규모 상업 또는 커뮤니티 사이트에서이 작업을 수행합니다.

span또는 사용div후자는 스타일링의 목적으로도 이전 버전의 IE에서 인식되지 않기 때문에 HTML5 신기한 것보다 더 잘 작동합니다. 따라서 컨테이너 요소로도 작동하도록 약간의 속임수가 필요합니다.

그러나 브라우저, 보조 소프트웨어 또는 검색 엔진에 의해 실제 의미가 할당 된 일부 "의미"요소가 있습니다. h1이러한 이유로 주 제목에 사용 하는 것은 항상 좋은 습관이었습니다. label양식 필드 레이블에 사용하면 사용 성과 접근성에 실제로 영향을 미칩니다. 등등; HTML : Principles 실무 가이드를 참조하십시오 .

HTML은 단순한 UI 언어가 아니라 데이터 구조화 언어이기도합니다. 이기종 시스템이 서버에 제공되는 정보 유형을 식별하는 한 가지 공통된 방법을 갖도록 설계되었습니다. 따라서 매우 다양한 태그가 있습니다. HTML 페이지는 데이터 구조로 간주되어야합니다.