차례:
비디오: HTML5 - 02 [ HTML 문서 기초 2 ] 태그의 구조, 언어설정, 글자집합, Charset, 웹표준 검사 2024
웹 개발자는 부동 레이아웃 기술을 사용하기 시작하면서 거의 항상 nav, header 및 footer라는 div를 만들었습니다. HTML5 개발자는 이러한 이름으로 새 요소를 만들기로 결정했습니다. 의미 론적 태그가 실제로 작동하는지 보려면 다음 코드를 살펴보십시오.
시멘틱 헤더 {border-bottom: 5px double black}} nav {float: 왼쪽; 너비: 20 %; 맑음: 왼쪽; 최소 높이: 400px; border-right: 1px 검정색}} {float: 왼쪽; 너비: 75 %; padding-left: 1em;} 기사 {float: 왼쪽; 너비: 75 %; padding-left: 1em;} 바닥 글 {clear: 둘다; border-top: 5px 더블 블랙; text-align: center;}
이것은 내 머리글입니다
탐색
- 링크 a
- 링크 b
- 링크 c
- 링크 d
- 링크 e
섹션 1
섹션 본문 …
섹션 2
섹션 바디 …
기사
기사 본문 …
바닥 글
Andy Harrisandy @ aharrisbooks. net
HTML5에는 새로운 의미 론적 마크 업 태그가 많이 있습니다.
-
header: 이것은 h1-h6 태그와 동일하지 않습니다. 페이지의 헤더를 포함 할 페이지 청크를 나타냅니다. 종종 헤더가 페이지 너비를 채우며 일종의 배너 이미지를 갖습니다. 그것은 자주 h1 콘텐츠를 포함합니다.
- -
nav: 이 태그는 어떤 종류의 탐색 섹션을 나타냅니다. 특별한 스타일은 없지만 사이트 탐색을위한 가로 또는 세로 메뉴로 자주 사용됩니다.
-
섹션: 섹션은 페이지의 일반적인 부분을 지정하는 데 사용됩니다. 동일한 페이지에 여러 개의 섹션이있을 수 있습니다.
-
article: 기사는 섹션과 유사하지만 외부 리소스와 함께 사용하기위한 것입니다. 많은 페이지가 소프트웨어에 의해 자동으로 작성되며이 페이지가 다른 소스의 컨텐츠를 통합 할 때 article 태그를 사용하여이 컨텐츠를 통합하기위한 것입니다.
- -
바닥 글: 바닥 글은 페이지 하단에 바닥 글 내용을 표시하기위한 것입니다. 일반적으로 기본 동작은 아니지만 바닥 글은 페이지 바닥을 덮습니다.
이러한 요소 중 어느 것도 특정 형식을 가지고 있지 않음에 유의하십시오. CSS 코드를 통해 서식을 지정하는 것은 개발자의 몫입니다. 각 요소는 HTML 요소로 직접 형식을 지정할 수 있습니다 (그 이유는 그 요소이기 때문입니다). 모든 최신 버전 브라우저는 의미 론적 태그를 지원하지만 이전 버전의 브라우저 (특히 버전 8 이전의 IE)를 지원하려면 div를 사용해야합니다.
