HTML에서 div 태그, 섹션 태그 및 acticle 태그의 차이점은 무엇입니까?

소개:

처음에는 이 세 가지 라벨이 비슷한 기능을 갖고 있다고 생각했습니다. 나중에 관련 정보를 확인한 후 차이점이 있다는 것을 깨달았습니다.

(학습 영상 공유: html 영상 튜토리얼)

차이점을 소개하겠습니다:

1. div 요소:

의미가 없으며 레이아웃 및 스타일 지정 태그에 사용됩니다. 섹션은 컨테이너와 동일합니다. 주로 큰 프레임 레이아웃에 사용됩니다. 즉, 웹 페이지의 뼈대는 주로 div를 통해 설정되고 웹 페이지의 살과 피는 범위, p 또는 ul과 같은 요소로 완성됩니다.

2. 섹션 요소:

섹션 요소는 HTML5에 새로 추가된 구조 요소로, 더 많은 의미를 갖습니다. 장, 머리글, 바닥글 또는 페이지의 다른 부분과 같은 페이지의 콘텐츠 블록을 나타냅니다. h1, h2, h3, h4, h5, h6 및 기타 요소와 함께 사용하여 문서 구조를 표시할 수 있습니다.

3. 기사 요소:

article 요소는 HTML5에 새로 추가된 구조 요소이기도 합니다. a는 섹션보다 의미가 더 명확한 특수 섹션 태그입니다. 이는 블로그의 기사와 같이 상단 및 하단과 관련되지 않은 페이지의 독립적인 콘텐츠를 나타내는 독립적이고 완전한 관련 콘텐츠 블록을 나타냅니다.

참고: 기사 요소는 중첩될 수 있으며 원칙적으로 내부 콘텐츠는 외부 콘텐츠와 관련되어야 합니다. 예를 들어, 블로그 게시물에서 기사에 대한 댓글은 기사 요소를 사용하여 중첩될 수 있습니다. 댓글을 표시하는 데 사용되는 기사 요소는 전체 콘텐츠를 나타내는 기사 요소에 포함됩니다. 중첩된 코드는 다음과 같습니다:

<article>

	<header>
		<h1>article元素的嵌套使用</h1>
		<p>发表日期：<time pubdate="pubdate">2019/8/6</time></p>
	</header>

	<p>此标签里显示的是article整个文章的主要内容，下面的section元素里是对该文章的评论</p>

	<section>
		<h2>评论</h2>
		<article>
			<header>
			
				<h3>发表者：Cherish599</h3>
				<p>1小时前</p>
				</header>
		
			<p>这篇文章很不错啊，顶一下！</p>
		</article>
	
		<article>
			<header>
			
				<h3>发表者：兩個西柚</h3>
				<p>2小时前</p>
				</header>
		
			<p>这篇文章真棒，对article的嵌套解释的很详细</p>
			</article>
	</section>
</article>

요약:

div, 섹션, 기사, 의미 체계는 처음부터 생성되고 점차 향상됩니다. div에는 의미가 없으며 스타일 또는 스크립트 태그로만 사용됩니다. 주제별 내용의 경우 섹션을 적용할 수 있으며, 내용이 문맥과 분리되어 완전하고 독립적인 내용으로 사용할 수 있는 경우 기사를 적용할 수 있습니다. 원칙적으로 기사를 사용할 수 있으면 섹션도 사용할 수 있지만 실제로 기사를 사용하는 것이 더 적합하다면 섹션을 사용하지 마십시오.

관련 권장 사항: html 튜토리얼

위 내용은 HTML에서 div 태그, 섹션 태그 및 acticle 태그의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!