의견 : HTML5는 일련의 새로운 요소를 제공합니다. 다음 두 가지 새로운 요소 : 기사와 섹션은 매우 혼란 스럽습니다. 우리는 종종 이러한 요소를 사용해야하는 상황을 언급합니다. 다음으로, 우리는 두 가지 응용 프로그램을 소개 할 것입니다. 관심있는 사람들은 그것을 언급 할 수 있습니다.
HTML5는 일련의 새로운 요소를 제공하며 미래에 널리 사용될 것입니다. 그러나 다음 두 가지 새로운 요소를 포함하여 일부 요소가 사용될 때 쉽게 혼란스러워합니다.
가장 일반적인 질문은 다음과 같습니다. 어떤 상황에서 우리는 이러한 요소를 사용해야합니까? 이 요소를 어떻게 올바르게 사용해야합니까?
섹션 요소
이것은 가장 모호한 요소입니다. 그것과 <div> 요소의 차이점은 무엇입니까? 우리는 단락을 나누기 위해 <div>를 사용하고 있었으므로 <div>를 제외 하고이 요소를 언제 사용합니까? 우리는 그것을 설명하기 위해 공식 문서를 인용합니다. Whatwg 문서에 따르면 다음 설명은 <섹션> 요소에 대해 작성됩니다.
<섹션> 요소는 문서 또는 응용 프로그램의 공통 단락을 나타냅니다 - Whatwg
설명에서 <섹션> 요소의 함수는 <div>와 다소 유사하거나 덜 유사하다는 것을 알 수 있습니다. 그러나 여전히 특별한 경우가 있습니다. 문서에서 특별한 진술이 추가됩니다.
요소가 스타일이나 스크립팅 편의에만 사용되는 경우 저자는 <div>를 사용하도록 권장합니다. <섹션> 요소는 요소의 내용을 명시 적으로 나열 해야하는 경우에 적합합니다. - Whatwg
이 점을 기준으로 다음 두 가지 점을 요약 할 수 있습니다.
첫째, 섹션 요소는 기술적으로 스타일링이지만 복잡한 스타일이나 스크립트가있을 때 여전히 DIV 요소를 사용하는 것이 좋습니다.
둘째, <li> 요소와 유사하게, 섹션 요소는 내용을 열거하는 데 사용됩니다.
따라서 현실적인 예에서 <섹션> 요소를 사용하는 이유는 블로그의 내용을 구성하는 것입니다. 코드는 다음과 같습니다.
<div>
<섹션>
<H2> 블로그 게시물 제목 </h2>
<p> 아이스크림 타르트 파우더 젤리 -o.
Gummies 초콜릿 케이크 아이스크림 쿠키 Halvah Tiramisu Jelly-o. </p>
</섹션>
<섹션>
<H2> 블로그 게시물 제목 </h2>
<p> 아이스크림 타르트 파우더 젤리 -o.
Gummies 초콜릿 케이크 아이스크림 쿠키 Halvah Tiramisu Jelly-o. </p>
</섹션>
<섹션>
<H2> 블로그 게시물 제목 </h2>
<p> 아이스크림 타르트 파우더 젤리 -o.
Gummies 초콜릿 케이크 아이스크림 쿠키 Halvah Tiramisu Jelly-o. </p>
</섹션>
</div>
이것은 예제 일 뿐이며 <섹션> 요소는 다른 목적으로도 사용될 수 있습니다.
기사 요소
이름에서 이미 잘 해석되었지만 공식 문서에 설명 된 방법을 여전히 알아야합니다.
문서, 페이지, 응용 프로그램 또는 사이트의 별도 섹션 및 일반적으로 출판물에서 독립적으로 할당되거나 재사용 될 수 있습니다. 포럼 게시물, 잡지 또는 뉴스, 블로그 항목, 사용자 제출 댓글, 대화식 위젯 또는 위젯 또는 기타 독립형 프로젝트의 콘텐츠 일 수 있습니다.
위의 설명에서 <article> 요소는 구조화 된 기사, 특히 블로그, 페이지 콘텐츠 또는 포럼 게시물과 같이 게시하려는 기사에 전념하고 있다고 요약 할 수 있습니다.
다음 예제는 <article>을 사용하여 블로그 게시물을 작성하는 방법을 보여줍니다.
<기사>
<Header>
<H1> 이것은 블로그 게시물 제목 </h1>입니다
<div>
<ul>
<li> 저자 이름 </li>
<li> 카테고리로 저장 </li>
</ul>
</div>
</헤더>
<div>
Sweet Roll Halvah Biscuit Toffee Liquorice Tart Pudding Sesame Snaps.
비스킷 파우더 젤리 -O 과일 케이크 Faworki 초콜릿 바. 푸딩 귀리
Cake Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. 구미
Halvah Gummies Danish Biscuit는 Gingerbread Jelly-O 페이스트리를 적용합니다.
</div>
</article>
또한 <기사> 요소는 섹션 요소와 결합 될 수도 있습니다. 필요한 경우 <섹션> 요소를 사용하여 다음 예제와 같이 기사를 여러 단락으로 나눌 수 있습니다.
<기사>
<Header>
<H1> 이것은 블로그 게시물 제목 </h1>입니다
<div>
<ul>
<li> 저자 이름 </li>
<li> 카테고리로 저장 </li>
</ul>
</div>
</헤더>
<div>
<섹션>
<H2> 이것은 하위 헤드 </h2>입니다
Sweet Roll Halvah Biscuit Toffee Liquorice Tart Pudding Sesame Snaps.
비스킷 파우더 젤리 -O 과일 케이크 Faworki 초콜릿 바. 푸딩 귀리 케이크
Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Gummies Halvah
Gummies Danish Biscuit는 Gingerbread Jelly-O 생과자를 적용합니다.
</섹션>
<섹션>
<H3> 이것은 또 다른 하위 머리 </h3>입니다
토핑 치즈 케이크 달콤한 파이 당근 케이크 달콤한 롤. Gummi는 레몬 방울을 낳습니다
Toffee Sesame Snaps Tart Topping Chupa Chups Apple Pie Gummies. 웨이퍼 초콜릿
케이크. 설탕 매실 초콜릿 바 토핑 아이스크림 당근 케이크 덴마크 본본.
치즈 케이크 gummi 곰 드래아 jujubes 드래아 드라페 브라우니 젤리 비스킷. 분말 크로와상 젤리 빈 생과자.
</섹션>
</div>
</article>
요약
월드 와이드 웹 (World Wide Web)의 창립자와 W3C 디렉터가 예측 한 바와 같이, HTML5가 만든 모든 새로운 요소는 네트워크 구조를 더욱 의미 론적으로 만들기위한 것입니다. 웹 개발자와 디자이너 사이에는 이러한 요소를 올바르게 적용하는 방법에 대해 여전히 논쟁이 있습니다.
어쨌든 관점을 혼동하지 마십시오. 앞에서 언급했듯이, 합리적인 상황이라면 구조를 사용하면 구조를 의미있게 만들어주십시오.