div 태그 대신 HTML5 시맨틱 태그를 선택하는 이유는 무엇입니까?

Question

headers, section, nav 및 article 단순히 div를 사용하여 선호하는 css로 설정하는 대신?

페이지를 만들어서 이 태그들을 사용했는데 div와 다르지 않습니다. 그들의 주요 목적은 무엇입니까?

사용 시 적절한 라벨 이름만 제공하는 건가요, 아니면 다른 기능을 하는 건가요?

설명해주세요. 많은 웹사이트를 확인해 보았지만 이러한 기본 사항을 찾을 수 없었습니다.

Answer 1

HTML5Doctor에는 HTML5 의미론에 대한 훌륭한 기사가 있습니다.

의미론은 어떤 형태로든 항상 HTML의 일부였습니다. 페이지에서 무슨 일이 일어나고 있는지 이해하는 데 도움이 됩니다.

예전에는 거의 모든 것이 사용되던 <div> 여전히 "의미론적" 클래스 이름이나 ID 이름을 지정하여 의미론을 달성했습니다.

이 태그는 레이아웃을 올바르게 구성하고 이해하는 데 도움이 됩니다.

만약 그렇다면:

으아아아

그리고

으아아아

또는

으아아아

그리고

으아아아

어느 쪽에도 문제가 없지만 후자가 사용자와 크롤러, 독자 등에게 더 나은 가독성을 제공합니다.

Answer 2

Oxford 사전에는 다음과 같은 내용이 나와 있습니다.

이름에서 알 수 있듯이 이 태그는 웹페이지의 의미를 향상시키도록 설계되었습니다. 좋은 의미론은 문서 자동 처리에 중요한 역할을 합니다. 이러한 자동 처리는 여러분이 생각하는 것보다 더 자주 발생합니다. 검색 엔진에 의해 순위가 매겨진 모든 웹사이트는 모든 웹사이트의 자동 처리에서 파생됩니다.

(잘 디자인된) 웹 페이지를 방문하면 인간 독자로서 모든 페이지 요소를 즉시 (시각적으로) 구별할 수 있으며 더 중요하게는 내용을 이해할 수 있습니다. 왼쪽 상단에는 회사 로고가 있고, 사이트 탐색 옆에는 검색창과 회사에 대한 일부 텍스트, 구매할 수 있는 제품에 대한 링크, 하단에 법적 고지 사항이 있습니다.

그러나 기계는 멍청해서 이런 일을 할 수 없습니다: 귀하와 동일한 페이지를 보면 웹 크롤러는 이미지, 일련의 앵커 태그, 텍스트 노드, 입력 필드 및 링크가 있는 이미지만 볼 수 있습니다. 하단에 또 다른 텍스트 노드가 있습니다. 이제 문서의 어느 부분이 탐색, 주요 기사 또는 덜 중요한 각주가 될 것인지 어떻게 알 수 있습니까? 몇 가지 공통 기준을 사용하여 문서 구조를 분석하여 특정 요소에 대한 힌트를 추측할 수 있습니다. 예를 들어

내부 링크 목록은 일종의 페이지 탐색일 가능성이 높으며 문서 끝 부분의 텍스트는 필요하지만 일상적인 시청자에게 그다지 중요한 콘텐츠는 아닙니다(법적 고지 사항).

이제

요소 대신 일반

이 사용되었다고 상상해 보세요. 기계는 이 요소의 목적이 무엇인지 즉시 알 수 있습니다. 으아아아

이제

태그 안의 텍스트는 페이지에서 가장 중요한 정보입니다! 왼쪽에는 해당 텍스트 노드, 이미지 및 앵커 노드가 모두

태그로 그룹화되어 있기 때문에 모두 동일한 그룹에 속하고, 아래쪽에는

요소에 일부 텍스트가 있습니다(아직도 알지 못합니다). 그 텍스트가 무엇을 의미하는지 알 수 있지만 이제 그들은 그것이 일종의 작은 글씨라는 것을 추론할 수 있습니다).

예:
사용자(실제 마크업을 보지 않고 페이지 읽기)로서 요소가 또는 태그 내에 포함되어 있는지 여부는 신경 쓰지 않습니다. 대부분의 브라우저에서 두 탭은 모두 이탤릭체 텍스트로 동일하게 렌더링되며 주변 텍스트 사이에 강조 표시되어 있는 한 해당 목적을 달성합니다.

그러나 의미론적 관점에서는 큰 차이가 있습니다.
는 이탤릭체를 의미합니다. 브라우저가 이를 렌더링하기 위한 힌트일 뿐(기울임꼴로) 더 깊은 의미 정보를 포함할 필요는 없습니다.
는 강조를 의미하며 중요한 정보를 나타냅니다. 이제 브라우저는 더 이상 기울임꼴 지침에만 국한되지 않고 기울임꼴, 굵게, 밑줄 또는 다른 색상으로 렌더링할 수 있습니다. 시각 장애인을 위해 화면 판독기는 주어진 상황에 가장 적합하다고 생각되는 방법으로 음성을 증폭시킬 수 있습니다. 이 중요한 메시지를 강조하기 위해.

최종 생각:
의미론적 태깅이 끝이 아닙니다. 또한 메타데이터, 온톨로지, 리소스 설명 언어 등이 있어 서로 다른 웹 페이지 간에 데이터를 연결하는 데 도움이 되고 새로운 지식을 생성하는 데도 도움이 될 수 있습니다!

예를 들어 Wikipedia는 데이터를 의미론적으로 표현하는 데 있어 형편없는 작업을 수행합니다.

https://en.wikipedia.org/wiki/Barack_Obama
https://en.wikipedia.org/wiki/Donald_Trump
https://en.wikipedia.org/wiki/Joe_Biden

이 세 사람은 모두 어느 시점에서 미국의 대통령을 역임한 캐릭터입니다.

세 기사 모두 이 정보를 표시하는 사이드바를 포함하고 있어 비교할 수 있지만(두 페이지를 모두 열고 앞뒤로 전환) 의미론적으로 설명되지는 않습니다. 대신 Wikipedia가 사람을 설명하기 위해 온톨로지를 사용하는 경우: http://dbpedia.org/ontology/Person

으아아아

이제 여러분(및 기계)은 이 세 가지를 직접(동적으로 생성된 페이지에서!) 비교할 수 있으며 모든 미국 대통령 목록을 표시하는 등 새로운 지식을 생성할 수도 있습니다. 꽤 지루하지만 현재 세계 지도자와 같이 멋지기도 합니다. 사람들이 있는지, 세계의 여성 지도자는 몇 명인지, 가장 어린 지도자는 누구인지, 지도자 유형(대통령/황제/여왕/독재자)은 몇 명인지, 가장 오랫동안 재임한 사람은 몇 명인지, 키가 175cm 이상이고 갈색 눈 등

결론적으로 좋은 의미 체계는 매우 훌륭합니다(그러나 구현 및 유지 관리가 기술적으로 어렵습니다).