의견 : 구조가 없기 때문에 좋은 HTML 페이지조차 다루기가 어렵습니다. 각 부분이 어떻게 분할되는지 확인하려면 제목 수준을 분석해야합니다. 사이드 바, 바닥 글, 헤더, 내비게이션 바, 주요 컨텐츠 영역 및 기사는 공통 DIV 요소로 표시됩니다. HTML 5는 이러한 공통 구조를 식별하기 위해 새로운 요소를 추가했습니다. · Sectio
구조가 없기 때문에 좋은 HTML 페이지조차 다루기가 어렵습니다. 각 부분이 어떻게 분할되는지 확인하려면 제목 수준을 분석해야합니다. 사이드 바, 바닥 글, 헤더, 내비게이션 바, 주요 컨텐츠 영역 및 기사는 공통 DIV 요소로 표시됩니다. HTML 5는 이러한 공통 구조를 식별하기 위해 새로운 요소를 추가합니다.
· 섹션 : 이것은 책의 장 또는 섹션 일 수 있으며 실제로 HTML 4의 자체 제목이있는 것일 수 있습니다.
· 헤더 : 페이지에 표시된 헤더; 헤드 요소와 다릅니다
바닥 글 : 바닥 글; 이메일에 서명을 표시 할 수 있습니다
NAV : 다른 페이지에 대한 링크 세트
기사 : 블로그, 잡지, 기사 편집 등의 기사.
상단에 헤더가 있고 아래쪽에 바닥 글이있는 일반적인 블로그 홈페이지와 여러 기사, 내비게이션 영역 및 사이드 바를 고려해 봅시다. 코드 1 일반 블로그 페이지를 참조하십시오.
<html>
<헤드>
<title> Mokka Mit Schlag </title>
</head>
<body>
<div id = page>
<div id = 헤더>
<h1> <a href => mokka mit schlag </a> </h1>
</div>
<div id = 컨테이너>
<div id = center class = 열>
<div class = post id = post-1000572>
<h2> <a href =
/blog/birding/2007/04/23/Spring-Comes and-Goes-in-Sussex-County/>
봄은 Sussex County </a> </h2>에옵니다
<div class = Entry>
<p> 어제 나는 우리를 위해 브루클린 버드 클럽에 합류했습니다
서부 뉴저지로의 연례 여행, 특히 하이퍼
비교적 최근에 발견 된 핫스팟 인 Humus. 그것
우리가 도착했을 때 멋진 겨울 아침으로 시작했습니다.
오전 7시 30 분에 현장에서 봄까지 진행되었습니다.
오전 10시, 초여름에 10시 15 분까지 도착했습니다. </p>
</div>
</div>
<div class = post id = post-1000571>
<h2> <a href =
/blog/birding/2007/04/23/but-does-it-count-your-life-list/>
그러나 그것은 당신의 인생 목록에 중요합니까? </a> </h2>
<div class = Entry>
<p> 이제 갈 수있을 것 같아요 <a
href =
2007/04/cone_sf> 인터넷을 통한 조류 관찰 </a>. 나
아직 테스트 할 수 없었습니다 (20 사용자
분명히 제한) 그러나 이것은 확실히 시원합니다.
개인적으로, 나는 그것이 교체하는 것을 상상할 수 없습니다
실제로 소량으로 현장에서 나옵니다.
반면에, 나는 항상 그것을 꽤 발견했습니다
더 이상 할 수없는 선임 새들을 만나는 것이 슬프다
쌍안경을 안정 시키거나 공원에 도착하십시오. 나는 할 수있다
이것이 그들에게 관심이 있다고 상상해보십시오. ~에
최소 1 명의 노인 새가 TV에서 큰 해를 보냈습니다.
그는 더 이상 그렇게 많이 나갈 수 없었습니다. 이것은 확실히
그 맨 위에. </p>
</div>
</div>
</div>
<div class = navigation>
<div class = alignleft>
<a href =/blog/page/2/>«_fckevedurl =/blog/page/2/>«이전 항목 </a>
</div>
<div class = alignright> </div>
</div>
</div>
<div id = 오른쪽 클래스 = 열>
<ul id = 사이드 바르>
<li> <h2> 정보 </h2>
<ul>
<li> <a href =/blog/comment-policy/> 댓글 정책 </a> </li>
<li> <a href =/blog/todo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> 아카이브 </h2>
<ul>
<li> <a href = '/blog/2007/04/'> 2007 년 4 월 </a> </li>
<li> <a href = '/blog/2007/03/'> 2007 년 3 월 </a> </li>
<li> <a href = '/blog/2007/02/'> 2007 년 2 월 </a> </li>
<li> <a href = '/blog/2007/01/'> 2007 년 1 월 </a> </li>
</ul>
</li>
</ul>
</div>
<div id = 바닥 값>
<p> 저작권 2007 Elliotte Rusty Harold </p>
</div>
</div>
</body>
</html>
올바른 들여 쓰기에도 불구 하고이 중첩 된 divs는 여전히 매우 혼란스러워합니다. HTML 5에서는 이러한 요소를 의미 론적 요소로 대체 할 수 있습니다. Code 2 일반 블로그 페이지를 참조하십시오. HTML5
<html>
<헤드>
<title> Mokka Mit Schlag </title>
</head>
<body>
<Header>
<h1> <a href => mokka mit schlag </a> </h1>
</헤더>
<섹션>
<기사>
<h2> <a href =
/blog/birding/2007/04/23/Spring-Comes and-Goes-in-Sussex-County/>
봄은 Sussex County </a> </h2>에옵니다
<p> 어제 나는 우리를 위해 브루클린 버드 클럽에 합류했습니다
서부 뉴저지로의 연례 여행, 특히 하이퍼
비교적 최근에 발견 된 핫스팟 인 Humus. 그것
우리가 도착했을 때 멋진 겨울 아침으로 시작했습니다.
오전 7시 30 분 에이 사이트는 10 시경 봄까지 진행되었습니다.
오전, 초여름 10:15까지. </p>
</article>
<기사>
<h2> <a href =
/blog/birding/2007/04/23/but-does-it-count-your-life-list/>
그러나 그것은 당신의 인생 목록에 중요합니까? </a> </h2>
<p> 이제 갈 수있을 것 같아요 <a
href =
2007/04/cone_sf> 인터넷을 통한 조류 관찰 </a>. 나
아직 테스트 할 수 없었습니다 (20 사용자
분명히 제한) 그러나 이것은 확실히 시원합니다.
개인적으로, 나는 그것이 교체하는 것을 상상할 수 없습니다
실제로 소량으로 현장에서 나옵니다.
반면에, 나는 항상 그것을 꽤 발견했습니다
더 이상 할 수없는 선임 새들을 만나는 것이 슬프다
쌍안경을 안정 시키거나 공원에 도착하십시오. 나는 할 수있다
이것이 그들에게 관심이 있다고 상상해보십시오. ~에
최소 1 명의 노인 새가 TV에서 큰 해를 보냈습니다.
그는 더 이상 그렇게 많이 나갈 수 없었습니다. 이것은 확실히
그 맨 위에. </p>
</article>
<avi>
<a href =/blog/page/2/>«_fckevedurl =/blog/page/2/>«이전 항목 </a>
</nav>
</섹션>
<avi>
<ul>
<li> <h2> 정보 </h2>
<ul>
<li> <a href =/blog/comment-policy/> 댓글 정책 </a> </li>
<li> <a href =/blog/todo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> 아카이브 </h2>
<ul>
<li> <a href = '/blog/2007/04/'> 2007 년 4 월 </a> </li>
<li> <a href = '/blog/2007/03/'> 2007 년 3 월 </a> </li>
<li> <a href = '/blog/2007/02/'> 2007 년 2 월 </a> </li>
<li> <a href = '/blog/2007/01/'> 2007 년 1 월 </a> </li>
</ul>
</li>
</ul>
</nav>
<FUTER>
<p> 저작권 2007 Elliotte Rusty Harold </p>
</바닥다>
</body>
</html>
이제 div가 필요하지 않습니다. 더 이상 클래스 속성을 직접 설정할 필요가 없으며 표준 요소 이름에서 각 부분의 의미를 유추 할 수 있습니다. 이는 오디오 브라우저, 모바일 브라우저 및 기타 비표준 브라우저에 특히 중요합니다.
(계속하려면)