HTML 섹션 태그-HTML 튜토리얼-php.cn

<섹션> 태그는 콘텐츠를 두 개로 나누는 데 사용됩니다. 즉, 섹션과 하위 섹션을 배포합니다.
섹션 태그에 허용되는 콘텐츠 유형은 유동 콘텐츠이며 <주소> 태그는 상위로서
를 중첩할 수 없습니다. 요소; 그런 다음 동일한
콘텐츠에는
부모로 태그를 지정합니다. 콘텐츠를 구분하고 눈에 보이는 콘텐츠를 구분하세요.
<섹션> 요소는
의 하위 요소가 아니어야 합니다. 요소.
각 <섹션>
의 하위 항목으로 제목 태그를 도입하여 시각화해야 합니다. 요소.
<섹션> 요소를 개별적으로 사용하려면
대신 태그하세요.
<섹션> 요소는 일반 컨테이너로 사용되어서는 안 됩니다. 이것이
특히 스타일링 목적으로만 단면화가 수행되는 경우에 사용됩니다. 경험상
태그는 문서의 개요에 논리적으로 나타나야 합니다.
<섹션> 요소는 의미 요소이므로 인간과 사용자 에이전트 모두에게 문서의 한 섹션에 초점을 맞춰 포함된 콘텐츠에 대한 의미를 제공합니다. 일반적인 의미 요소이므로 다른 의미 컨테이너 요소(article,side,nav)가 적합하지 않을 때 사용해야 합니다.

구문:

다음은 언급된 구문입니다.

HTML/XHTML

<body>
<section> ... </section>
<body>

로그인 후 복사

CSS

section{
--your css code—
}

로그인 후 복사

Html 섹션 태그 속성

다음은 언급된 속성 중 일부입니다.

1. 태그별 속성

<섹션>과 함께 사용할 특정 속성이 없습니다. 태그.

2. 전역 속성

다른 모든 HTML 태그와 마찬가지로

태그는 HTML5의 전역 속성도 지원합니다.

다음은 전역 속성입니다.

중단
자동완성 시
자동완성오류 발생
흐릿하게
취소
온캔플레이
재생 가능
변경시
클릭
마감
컨텍스트 메뉴
온큐체인지
dblclick
온드래그
온드래젠드
온드라젠터
온드래지시트
온드래그레이브
온드래그오버
드래그 시작
온드롭
기간 변경
비어있음
종료됨
오류 발생
온포커스
입력입력
잘못됨
온키다운
키를 누르면
온키업
로드
로드된 데이터
로드된 메타데이터
로드시작
마우스다운
마우스엔터
마우스 떠나기
마우스무브
마우스아웃
마우스 오버시
온마우스업
마우스휠
일시중지
온플레이
플레이 중
진행 중
요율 변경
재설정 시
크기 조정
스크롤
찾아왔습니다
찾아요
선택 중
온쇼
정렬
설치됨
제출시
일시중단
정시 업데이트
전환
볼륨변경
대기 중

3. 이벤트 속성

<섹션>과 함께 사용할 이벤트 속성이 없습니다. 태그.

의 CSS 텍스트 형식 속성 태그

아래에는 CSS 텍스트 서식 속성이 나와 있습니다.

텍스트 색상
텍스트 정렬
텍스트 장식
텍스트 변환
줄 높이
텍스트 방향
텍스트 그림자
단어 간격

<섹션>의 CSS 글꼴 속성 태그

아래에는 CSS 글꼴 속성이 나와 있습니다.

font-style: normal|italic|oblique|initial|inherit
font-variant: normal|small-caps|initial|inherit
font-weight: normal|bold|bolder|lighter|number|initial|inherit
font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
font-family: family-name|generic-family|initial|inherit

CSS Test Shadow Property for
Tag

Given below is the CSS Test Shadow Property:

<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>

로그인 후 복사

Examples of HTML section Tag

Given below are the examples of HTML section Tag:

Example #1

Code:

<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1>eduCBA: Article 1</h1>
<p>Content of Article 1</p>
</section>
<section>
<h1>eduCBA: Article 2</h1>
<p>Content of Article 2</p>
</section>
<section>
<h1>eduCBA: Article 3</h1>
<p>Content of Article 3</p>
</section>
</body>
</html>

로그인 후 복사

Output:

HTML 섹션 태그

Example #2

Nested Section Tag.

The

tag can be nested wherein the font size of the subsection is smaller than the section only if both have the same font properties. The subsection is used for organizing complex data.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1>eduCBA: Article 1</h1>
<p>Content of Article 1</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
<section>
<h1>eduCBA: Article 2</h1>
<p>Content of Article 2</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
<section>
<h1>eduCBA: Article 3</h1>
<p>Content of Article 3</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
</body>
</html>

로그인 후 복사

Output:

HTML 섹션 태그

Example #3

Code:

<!DOCTYPE html>
<html>
<head> . . . </head>
<body>
<header>
<h1>HTML Section tag example</h1>
</header>
<main>
<article> An article on HTML Section tag</article>
</main>
<aside> Body of an article </aside>
<footer>
<section>Copyright &copy;2020- EDUCBA.</section>
<address> A- 406, Boomerang, Chandivali Farm Road,
Yadav Nagar, Chandivali, Powai,
Maharashtra, Mumbai - 400072. </address>
</footer>
</body>
</html>

로그인 후 복사

Output:

HTML 섹션 태그

Example #4

Code:

<!DOCTYPE>
<html>
<head>
<style&gt
section{
border:1px solid pink;
padding:15px;
margin:10px;
}
</style>
</head>
<body>
<h2> List of Articles</h2>
<section>
<h3>Article 1 heading</h3>
<p> Body of article </p>
</section>
<section>
<h3>Article 2 heading</h3>
<p> Body of article </p>
</section>
<section>
<h3>Article 3 heading</h3>
<p> Body of article </p>
</section>
</body>
</html>

로그인 후 복사

Output:

HTML 섹션 태그

Example #5

While creating a

tag in HTML5, we can use either the class or id attributes wherein each id should be unique, and the class can be used multiple times when necessary.

The section should always have a header element (H1 to H6). If a title cannot be given for the section, we can use the

element, which will probably be more appropriate, and always never use the

tag just for putting styles.

Code:

<!DOCTYPE>
<html>
<head>
<style>
section{
border:1px solid pink;
padding:15px;
margin:10px;
}
</style>
</head>
<body>
<section id="sectiontag" class="sectionclass">
<h2>HTML Section tag</h2>
<p>Random text Random text Random text...</p>
</section>
<section id="articletag">
<h2>HTML Article tag</h2>
<p>Random text Random text Random text...</p>
</section>
<section id="footertag">
<h2>HTML Footer tag</h2>
<p>Random text Random text Random text...</p>
</section>
</body>
</html>

로그인 후 복사

Output:

HTML 섹션 태그

Conclusion

The

element is a structural HTML element that groups all the related elements. Each

usually includes one or more heading elements and additional elements presenting related content.

is a new HTML5 element used to define an important document section. It is better to use it within articles, to define navigation, or in the header or footer. If a section of the content deserves its heading, which would be listed in a theoretical or actual table of contents, it should be placed as a

위 내용은 HTML 섹션 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1670

Cakephp 튜토리얼

1428

라라벨 튜토리얼

1329

PHP 튜토리얼

1274

C# 튜토리얼

1256

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? Feb 07, 2025 am 11:57 AM

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다

HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles

HTML 섹션 태그

섹션 태그 주의사항

Html 섹션 태그 속성

1. 태그별 속성

2. 전역 속성

3. 이벤트 속성

의 CSS 텍스트 형식 속성 태그

<섹션>의 CSS 글꼴 속성 태그

CSS Test Shadow Property for Tag

Examples of HTML section Tag

Example #1

Example #2

Example #3

Example #4

Example #5

Conclusion

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

CSS Test Shadow Property for
Tag