HTML5_html5 튜토리얼 기술의 기사 및 섹션 요소 이해 및 사용

HTML5는 일련의 새로운 요소를 제공하며 앞으로 널리 사용될 것입니다. 그러나

및

이라는 두 가지 새로운 요소를 포함하여 사용하기 혼란스러울 수 있는 몇 가지 요소가 있습니다.
가장 많이 묻는 질문은 다음과 같습니다. 어떤 상황에서 이러한 요소를 사용해야 합니까? 그리고 이러한 요소들을 어떻게 올바르게 사용해야 할까요?

섹션 요소
가장 모호한 요소입니다.

요소와 어떻게 다른가요? 단락을 나누기 위해

를 사용해왔는데,

외에 언제 이 요소를 사용해야 할까요? 이를 설명하기 위해 공식 문서를 인용합니다. WHATWG 문서에 따르면

요소는 다음과 같이 설명됩니다.
"

요소는 문서 또는 애플리케이션의 공통 단락을 나타냅니다. - WHATWG"

설명에서 우리는

요소의 목적은

와 다소 유사하게 요소를 분할하는 것입니다. 하지만 여전히 특별한 경우가 있습니다. 문서에는 다음과 같은 특별한 설명이 추가되었습니다.
"요소가 스타일이나 스크립팅 편의를 위해서만 사용되는 경우 작성자는

를 사용하는 것이 좋습니다.

요소는 요소의 콘텐츠가 명시적일 때 적용됩니다. - WHATWG"

이를 바탕으로 다음 두 가지 사항을 요약할 수 있습니다:
첫째, 섹션 요소는 기술적으로 스타일을 지정할 수 있지만 여전히 사용하는 것이 좋습니다. 복잡한 스타일이나 스크립트가 있는 경우 div 요소.
두 번째로

요소와 마찬가지로 섹션 요소는 콘텐츠를 나열하는 데 사용됩니다.

실제 예에서

요소를 사용하는 이유는 블로그 콘텐츠를 구조화하기 위한 것이며 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

블로그 게시물 제목

아이스크림 타르트 파우더 젤리-o.
구미 초콜릿 케이크 아이스크림 쿠키 할바 티라미수 젤리-o.

-title">블로그 포스트 제목

아이스크림 타르트 파우더 젤리-o.
구미 초코 케이크 아이스크림 쿠키 할바 티라미수 젤리-o.

블로그 게시물 제목

아이스크림 타르트 파우더 젤리-o
구미 초콜릿 케이크 아이스크림 쿠키 할바 티라미수 젤리-o

🎜>

이것은 단지 예일 뿐이며

요소는 다른 용도로도 사용될 수 있습니다.

기사 요소
이름에서 이미 잘 설명되어 있지만 공식 문서에서 어떻게 설명하는지 살펴봐야 합니다. "문서에서, 예를 들어 포럼 게시물, 잡지나 뉴스 기사, 블로그 항목, 댓글, 대화형 위젯이나 위젯, 기타 스탠드 등 일반적으로 독립적으로 재배포하거나 재사용할 수 있는 사이트의 페이지, 애플리케이션 또는 섹션입니다.

위의 설명을 보면

요소가 특히 블로그, 페이지 콘텐츠 또는 포럼 게시물과 같이 게시되는 항목에 사용된다는 결론을 내릴 수 있습니다.
다음 예에서는

을 사용하여 블로그 기사를 작성하는 방법을 보여줍니다.

코드 복사코드는 다음과 같습니다.

블로그 게시물 제목입니다

메타">

• 저자 이름


• 카테고리에 저장

스위트 롤 할바 비스킷 토피 감초 타르트 푸딩
비스킷 파우더 젤리-o 과일케이크 파워키 초콜릿 바.
케이크 투시 롤 참깨 스냅 롤리팝 진저브레드 봉봉
할바 구미 비스킷 아플리케 진저브레드 젤리-오 페이스트리. /div>

또한 필요한 경우

요소를 사용할 수도 있습니다. 아래 예와 같이 기사를 여러 단락으로 나눕니다.

코드 복사코드는 다음과 같습니다.

블로그 게시물 제목입니다

< ;li class="author">저자 이름

• 카테고리에 저장

;/div>

;
스위트 롤 할바 비스킷 토피 감초 타르트 푸딩 참깨 스냅
비스킷 파우더 젤리-오트케이크 파워키 초콜릿 바.
투시 롤 참깨 스냅 롤리팝 진저브레드 봉봉
구미스 데니쉬 비스킷. 아플리케 진저브레드 젤리

레몬 드롭
토피 츄파춥스 애플파이 구미. 케이크 슈가 플럼 초콜릿 바 토핑 아이스크림 당근 케이크
치즈케이크 구미 베어스 당의 대추 당의 브라우니 젤리 비스킷

HTML5의 창립자와 W3C의 이사들이 예측한 대로 HTML5에서 생성된 모든 새로운 요소는 웹 구조를 더욱 의미있게 만들기 위한 것입니다. 이러한 요소를 올바르게 적용하는 것은 여전히 ​​웹 개발자와 디자이너 사이에서 논쟁거리입니다.
어쨌든 아이디어를 혼동하지 마세요. 앞서 언급했듯이, 그것이 의미가 있고 그것을 사용하는 구조가 의미가 있다고 생각되면 그것을 사용하십시오.