최근에 html5를 배우고 있는데, 일부 태그가 바뀌어서 조금 불편한 느낌이 듭니다. 특히 3개의 태그 div와 섹션 기사를 확인하고 웹페이지 레이아웃을 html5와 css3로 사용해 보았습니다. 아래는 여러분의 참고를 위해 방금 마련한 간단한 웹 페이지입니다. 먼저 살펴보고 최소한 html5의 구조에 대해 알아보세요.
div
HTML 사양: "div 요소는 전혀 특별한 의미가 없습니다."
이 태그는 우리가 보고 사용하는 태그입니다. 대부분의 라벨입니다. 그 자체로는 의미가 없으며 레이아웃과 스타일 또는 스크립팅을 위한 후크로 사용됩니다.
section
HTML 사양: “섹션 요소는 문서 또는 애플리케이션의 일반적인 섹션을 나타냅니다. 이 맥락에서 섹션은 일반적으로 다음과 같은 주제별 콘텐츠 그룹입니다.
div의 의미와 반대로 간단히 말하면 section은 의미를 갖는 div이지만 실제로는 그렇게 간단하다고 생각하지 않습니다. 섹션은 일반적으로 제목이 있는 주제별 콘텐츠를 나타냅니다. 이것을 보면 블로그 게시물이나 별도의 댓글에서 섹션을 사용하면 된다고 생각할 수도 있습니다. 계속 읽어보세요:
“저자는 요소의 내용을 배포하는 것이 타당할 경우 섹션 요소 대신 기사 요소를 사용하는 것이 좋습니다. 관련이 있는 경우 섹션을 대체하기 위해 기사를 사용해야 합니다.
그럼 섹션은 언제 사용해야 할까요? 그런 다음 다음을 보십시오.
“섹션의 예로는 장, 탭 대화 상자의 다양한 탭 페이지 또는 웹 사이트의 홈 페이지를 소개를 위한 섹션으로 나눌 수 있습니다. 뉴스 항목 및 연락처 정보.”
일반적인 적용 시나리오에는 기사의 장, 태그 대화 상자의 탭 또는 논문의 번호가 매겨진 섹션이 포함됩니다. 웹사이트의 홈페이지는 소개, 뉴스, 연락처 정보 등의 섹션으로 나눌 수 있습니다. 사실 저는 여기서 전달되는 정보에 매우 관심이 많습니다. 왜냐하면 아래에 소개할 섹션과 기사가 모듈형 애플리케이션에 더 적합하다고 생각하기 때문입니다. 이 주제는 향후 특별 기사에서 논의될 것이므로 여기서는 건너뛰겠습니다. 지금은.
W3C에서는 다음과 같이 경고합니다.
“섹션 요소는 스타일 지정 목적이나 스크립팅 편의를 위해 요소가 필요한 경우 작성자가 사용하는 것이 좋습니다. 대신 div 요소를 사용하세요. 섹션 요소는 요소의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합합니다."
섹션은 단순한 컨테이너 태그 그 이상입니다. 태그가 단지 스타일을 지정하거나 스크립팅을 용이하게 하기 위한 것인 경우 div를 사용해야 합니다. 일반적으로 섹션은 요소의 콘텐츠가 문서 개요에 명시적으로 나타날 때 적합합니다.
article
HTML 사양: “article 요소는 문서, 페이지, 애플리케이션 또는 사이트에서 독립적인 구성을 나타내며 원칙적으로 독립적으로 배포하거나 재사용할 수 있습니다. , 예를 들어 신디케이션에서.”
article은 섹션보다 더 명확한 의미를 가지며 관련 콘텐츠의 독립적이고 완전한 블록을 나타내는 특수 섹션 태그입니다. 일반적으로 기사에는 제목 섹션(보통 머리글에 포함됨)이 있고 바닥글이 있는 경우도 있습니다. 섹션은 주제별 콘텐츠이기도 하지만 기사 자체는 구조와 콘텐츠 측면에서 독립적이고 완전합니다.
HTML 사양에는 기사에 적용 가능한 몇 가지 시나리오가 나열되어 있습니다. "포럼 게시물, 잡지나 신문 기사, 블로그 항목, 사용자가 제출한 댓글, 대화형 위젯이나 가젯 또는 기타 독립적인 콘텐츠 항목이 될 수 있습니다.
기사가 삽입된 경우." 기사 내부 기사의 내용은 외부 기사의 내용과 연관되는 것을 원칙으로 합니다. 예를 들어, 블로그 게시물에서 사용자가 제출한 댓글이 포함된 기사는 포함된 블로그 게시물 기사 내에 숨겨야 합니다.
질문은 무엇이 "완전한 독립 콘텐츠"로 간주되는가 하는 것입니다. 가장 쉽게 알 수 있는 방법 중 하나는 RSS 피드에서 콘텐츠가 완전한지 확인하는 것입니다. 콘텐츠가 맥락 없이 완전하고 독립적인지 확인하세요.
예:
html 페이지: