왜 div를 사용해야합니까?

오늘 아침에 html과 haml을 작성하면서 div가 사용되는 방식이 어리 석다는 생각이 들었습니다. div가 암시되지 않는 이유는 무엇입니까? 이 경우를 상상해보십시오.

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

이것이었다 :

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

요소의 "div class"부분이 가정되면 HTML은 더 의미적이고 일치하는 닫는 태그로 훨씬 더 읽기 쉽습니다!

이것은 다음과 같은 HAML과 유사합니다.

.content Hello, World!

다음이된다 :

<div class='content'>Hello, World!</div>

이것이 브라우저에서 작동하기 위해 발생해야 할 유일한 것은 브라우저가 기존 html 요소 정의가 암시하는 것처럼 모든 요소를 ​​해석하기 시작할 수 있다는 것 <div class="<element name>">입니다.

이것은 이전 버전과 완전히 호환 될 수 있습니다. CSS 및 jQuery 선택기 등의 경우 "div.hero-img"가 여전히 작동 할 수 있으며 요소를 선택하는 데 필요한 구문이됩니다.

새로운 웹 구성 요소 사양에 대해 알고 있지만 여기에 제안 된 것보다 훨씬 더 복잡합니다. 웹 사이트의 소스를보고 html을 보는 것이 얼마나 즐거운 지 상상할 수 있습니까?!

그렇다면 왜 div를 사용해야합니까?

당신이 보면 모질라의 HTML5 요소 목록 , 모든 요소는 의미 론적 의미를 가지고 있으며, 우리는에 도착 <div>하고는 말합니다 :

"특별한 의미가없는 일반 컨테이너를 나타냅니다."

.. 그리고 그들은 html5에 추가하는 임의의 요소를 나열합니다 <details>.

물론 이러한 암시 적 div 개념이 HTML 사양에 추가 된 경우 표준이 되려면 10 년이 걸리며 이는 웹 시간이 백만 년입니다.

그래서 나는 이것이 아직 일어나지 않은 좋은 이유가 있어야한다고 생각합니다. 제발, 설명해주세요!

문제 1 : 공백

나는 이것이 일반적으로 나타나지 않았다고 생각합니다. 비록 이것이 일어나지 않아야 할 아마도 좋은 이유 white-spaces는 CSS classes에서 요소에 대해 여러 클래스를 정의하고 HTML에서는 정의하기 때문 attributes입니다.

다음 코드를 설명하거나 브라우저에 구문 분석하도록 요청하십시오.

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

가 family두 번째 클래스의 정의 또는 HTML 요소에 대한 속성은? 이 사이트의 파서에서 볼 수 있듯이 속성이라고 생각합니다.

따라서 내가 원한다면 <div class="pet family">실제로 두 개의 클래스를 정의 할 수있는 방법이 없습니다. 이것은 어쨌든 id 대신 클래스를 사용하는 두 가지 주요 이유 중 하나입니다.

문제 2 : 순방향 호환성!

<div>현재 s를 사용하면 (적어도 우리 중 일부는) 코드 주위를 올바르게 들여 쓰고 주석을 달아야합니다. 이는 모든 프로그래밍 언어에 좋은 방법입니다.

대신 HTML 블록을 변수로 바꾸면 새로운 프로그래머에게 HTML에서 특정 작업을 수행하지 않는 것과 수행하지 않는 것에 대해 큰 혼란을 초래할 수 있습니다 .

또한 이전 코드를 새로운 HTML5 태그와 비교하기 시작 하는 재미있는 부작용을 유발할 수 있습니다. 단지 div 클래스와 동일한 이름이 나오지 않도록하십시오 ...

같은 문제에 적용 variables하여 reserved words일부 언어에서. PHP는 달러 기호 로이 문제를 해결 했으므로 HTML의 비슷한 접근 방식은 현재 사용법보다 훨씬 좋지 않은 결과를 초래 <div class="something">합니다.

우리 <div>는 브라우저가 처리하고 렌더링하기가 더 쉽기 때문에 당신의 공상을 간질이 는 대신에 사용 합니다.

반례로서, XML을 사용하면 원하는 태그 이름을 작성할 수 있습니다. 임의의 태그 이름을 생성하는 기능에는 처리 비용이 따릅니다. XML 파서는 문서를 파싱하는 동안 /의 일부로 문서 내에서 사용되는 태그 사전을 만들어야합니다.

<div>브라우저 를 사용 하면 컨테이너가 있고 컨테이너를 무시하거나 컨테이너에서 무언가를 수행 할 수있는 체인의 다른 도구로 컨테이너를 전달할 수 있음을 알 수 있습니다.

웹 작성자가 비공개 (표준화되지 않은) 목적으로 HTML에 임의의 요소 이름을 추가 할 수 있도록 제안하고 있습니다. 이것은 큰 문제가 있습니다. 여러 작성자가 이미 같은 목적으로 동일한 요소 이름을 사용하여 HTML의 표준에 새 요소를 추가하는 것이 위험하므로 페이지의 의미를 소급해서 변경하기 때문입니다. 새로운 버전의 브라우저가 기존 웹 페이지를 깨뜨릴 때 사람들은 기뻐하지 않기 때문에 이는 결코 쉬운 일이 아닙니다.

개인용으로 임의의 속성 이름을 사용하는 것과 같은 문제가 있습니다. 이것이 HTML5가 개인용 속성에 대해 "data-"접두사를 요구하는 이유이므로 표준의 새로운 속성과 충돌하지 않습니다.

div 및 span은 의미 적으로 중립적 인 요소로 정의되므로 향후 브라우저에서 시맨틱이 변경 될 염려없이 개인 용도로 사용할 수 있습니다. 물론 클래스 이름을 추가하려면 몇 문자가 더 필요하지만 앞으로 호환성이 있으면 가치가 있습니다.

귀하의 예는 div가 그렇게 어리석지 않은 이유 중 하나를 표시합니다.

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

img태그를 올바르게 닫지 않았습니다 . 일부 태그, 등 img, br, hr, 등 모든 콘텐츠가없는, 따라서 닫을 수 없습니다. 파서는 이것을 알고 있습니다.

반면에 div태그에는 내용이 포함되어 있으므로 닫혀 있어야합니다. 태그를 직접 채웠다면 파서는 태그를 닫을 지 여부를 알 수 없습니다.

일부 요소가 닫히고 다른 요소가 닫히지 않는 이유는이 블로그 게시물에서 잘 설명하는 SGML 유산에서 비롯된 것입니다. http://www.colorglare.com/2014/02/03/to-close-or-not- to-close.html

그것은 정의의 문제입니다. 순수 XML 인 XHTML을 사용하여 완전히 정의 된 경우 여기에서 접두사를 통해 고유 한 네임 스페이스를 사용할 수 있습니다 q:.

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

XML을 사용하여 (X) HTML로 변환하는 경우 자유 태그 "HTML"실제 HTML에서을 (를) 사용하여 완전히 자유롭게 생성 할 수 <div class="hero-img">있습니다.

일부 태그에는 고유 한 (더미) URL이있는 네임 스페이스 속성이 있습니다.

xmlns:q="http://..."

HTML의 핵심 요소 중 하나는 실제로 사전 정의 된 태그 요소를 갖는 것입니다. 그 이유입니다.

div class =는이 "제한"을 해결하는 방법입니다.

그렇기 때문에 "암시적인"구성이 보이지 않습니다.

div 요소의 목적은 구조 만입니다. 하나의 공통 요소 아래에 요소를 그룹화 할 수 있습니다. 공백, 속도, 렌더링, 의미 및 기타와는 관련이 없습니다. 스타일링 측면에서 CSS를 사용하고 선택기 측면에서 Javascript를 도와줍니다. 다른 요소로 변경하면 목적이 변경됩니다.

표시된대로 자신 만의 명명 된 요소를 만들려면 검색 엔진 및 기타 도구에서 요소의 의미가 무엇인지 알 수 없다는 문제가 있습니다. "hero-img"란 무엇이며 내 "hero-image"와 다른 점은 무엇이며 API가 페이지를 방문 할 때 어떻게 처리해야합니까? 브라우저가 해당 요소를 어떻게 처리해야합니까? 블록 레벨입니까 아니면 인라인입니까? 너무 많은 질문들.

일반적으로 div 태그는 웹 페이지에서 나누기 또는 섹션을 적용 할 때 유용합니다. 다른 요소를 적용 할 수있는 컨테이너로 div 태그를 사용할 수 있습니다. 또한 특정 요소에 CSS 및 일부 스크립트를 적용하는 데 도움이됩니다.