찾다

집  >  기사  >  웹 프론트엔드  >  HTML 섹션 태그

HTML 섹션 태그

WBOY
WBOY원래의
2024-09-04 16:31:331109검색

다음 문서에서는 HTML 섹션 태그에 대한 개요를 제공합니다. HTML <섹션> 태그는 머리글, 장, 바닥글 등과 같은 문서의 섹션을 정의합니다.

태그는 웹페이지 콘텐츠를 섹션과 하위 섹션으로 나눕니다. 일반적으로 두 개의 바닥글, 머리글 또는 기타 새로운 섹션에 대한 요구가 있을 때 사용됩니다. 섹션 태그는 일반적으로 관련 콘텐츠의 일반 블록을 그룹화합니다.
사용의 주요 이점은 다음과 같습니다. 태그는 개발자와 브라우저 모두에게 그 의미를 설명하는 의미론적 요소라는 점입니다.

섹션 태그 주의사항

HTML5의 섹션 태그에는 시작 태그와 끝 태그가 모두 필요합니다(예:

……..

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

html5 css html xhtml define if for while using class Length Attribute Property Event Generic number this table word
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 스트라이크 태그다음 기사：HTML 스트라이크 태그

관련 기사

더보기