div 대신 HTML5 시맨틱 태그를 사용하는 이유는 무엇입니까?
이 질문에 이미 답변이 있습니다.
사용 HTML5 의미 태그를 좋아하는 이유는 headers, section, nav, 및 article대신 단순히의 div(가) 선호와 css그것?
웹 페이지를 만들고 해당 태그를 사용했지만 div. 그들의 주요 목적은 무엇입니까?
태그를 사용하는 동안 적절한 이름을위한 것입니까, 아니면 그 이상입니까?
설명 해주십시오. 여러 사이트를 살펴 봤지만 이러한 기본 사항을 찾을 수 없습니다.
이름에서 알 수 있듯이 이것은 의미 론적 목적으로 만 사용됩니다. 문서의 자동화 된 처리를 개선하기위한 것입니다. 자동 처리는 여러분이 생각하는 것보다 더 자주 발생합니다. 검색 엔진의 각 웹 사이트 순위는 모든 웹 사이트의 자동 처리에서 파생됩니다.
웹 페이지를 방문하면 독자로서 모든 페이지 요소를 즉시 (시각적으로) 구분할 수 있으며 더 중요한 것은 콘텐츠를 이해할 수 있습니다.
그러나 기계는 멍청하고이를 수행 할 수 없습니다. 웹 크롤러 나 스크린 리더가 모든 곳에서 div로 웹 페이지를 분석하려고한다고 상상해보십시오. 문서의 어떤 부분이 내비게이션이나 주요 기사가 될 것인지 또는 그다지 중요하지 않은 사이드 노트가 될 것인지 그들은 어떻게 알 수 있습니까? 특정 요소에 대한 힌트 인 몇 가지 공통 기준을 사용하여 문서 구조를 분석하여 추측 할 수 있습니다. 예를 들어 ul내부 링크 목록은 일종의 페이지 탐색 일 가능성이 높습니다. 그러나 대신 nav요소가 사용되는 경우 기계는이 요소의 목적이 무엇인지 즉시 인식합니다.
예 : 사용자로서 (실제 마크 업을 보지 않고 페이지를 읽는 경우) 요소가 <i>또는 <em>태그로 묶여 있어도 상관 없습니다 . 아마도 대부분의 브라우저에서 이탤릭체로 렌더링 될 것이고 쉽게 인식 할 수 있도록 텍스트에서 눈에 띄는 한 괜찮습니다.
그러나 의미론 측면에서 더 큰 차이가 있습니다. <i>단순히 기울임 꼴 을 의미합니다. 브라우저에 대한 표현 힌트이며 반드시 더 깊은 의미 정보를 포함 할 필요는 없습니다. <em>그러나 의미 상 중요한 정보를 나타내는 강조를 의미합니다. 이제 브라우저는 기울임 꼴로 묶이지 않습니다. 이탤릭체, 굵은 체, 밑줄 또는 다른 색상으로 시각적으로 표현할 수 있습니다. 시각 장애가있는 사람의 경우 스크린 리더가 음성을 높일 수 있습니다.이 중요한 정보를 강조하기 위해 특정 상황에 가장 적합한 방법은 무엇이든 상관 없습니다.
// machine: okay, this structure looks like it might be a navigation element?
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>
// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>
HTML5Doctor의 HTML5 의미론에 대한 멋진 기사가 있습니다.
의미론은 어떤 형태로든 HTML의 일부였습니다. 페이지에서 무슨 일이 일어나고 있는지 이해하는 데 도움이됩니다.
<div>거의 모든 것에 사용 되었을 때 우리는 여전히 "의미 적"클래스 이름이나 ID 이름을 제공하여 의미론을 구현했습니다.
이러한 태그는 레이아웃을 올바르게 구성하고 이해하는 데 도움이됩니다.
그렇게한다면
<div class="nav"></div>
반대로
<nav></nav>
또는
<div class="sidebar"></div>
반대로
<aside></aside>
잘못된 것은 없지만 후자는 크롤러, 독자 등의 가독성을 높이는 데 도움이됩니다.
에서 div태그 당신은 등이 보유 콘텐츠의 종류 무엇이든 몸, 머리글, 바닥 글에 대해 알려주는 ID를 제공해야
HTML5의 의미 요소의 경우 이름은 보유하고있는 코드의 종류와 웹 사이트의 어느 부분을위한 것인지 명확하게 정의합니다.
의미있는 요소 <header>, <footer>, <section>, <aside>, 등
참조 URL : https://stackoverflow.com/questions/17272019/why-use-an-html5-semantic-tag-instead-of-div
'program tip' 카테고리의 다른 글
| HTML 버튼이 POST 요청을 수행 할 수 있습니까? (0) | 2020.12.25 |
|---|---|
| JUNIT 테스트 무효 메서드 (0) | 2020.12.25 |
| Mysql Workbench GUI에서 테이블 내용을 보는 방법은 무엇입니까? (0) | 2020.12.25 |
| SELECT… FOR XML PATH ( ''), 1,1)의 의미는 무엇입니까? (0) | 2020.12.25 |
| ErrorType을 NSError로 변환하면 관련 객체가 손실됩니다. (0) | 2020.12.25 |