다음 문서에서는 HTML 섹션 태그에 대한 개요를 제공합니다. HTML <섹션> 태그는 머리글, 장, 바닥글 등과 같은 문서의 섹션을 정의합니다.
HTML5의 섹션 태그에는 시작 태그와 끝 태그가 모두 필요합니다(예:
구문:
다음은 언급된 구문입니다.
HTML/XHTML
<body> <section> ... </section> <body>
CSS
section{
--your css code—
}다음은 언급된 속성 중 일부입니다.
<섹션>과 함께 사용할 특정 속성이 없습니다. 태그.
다른 모든 HTML 태그와 마찬가지로
다음은 전역 속성입니다.
<섹션>과 함께 사용할 이벤트 속성이 없습니다. 태그.
아래에는 CSS 텍스트 서식 속성이 나와 있습니다.
아래에는 CSS 글꼴 속성이 나와 있습니다.
Given below is the CSS Test Shadow Property:
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>Given below are the examples of HTML section Tag:
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:
Nested Section Tag.
The
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:
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 ©2020- EDUCBA.</section> <address> A- 406, Boomerang, Chandivali Farm Road, Yadav Nagar, Chandivali, Powai, Maharashtra, Mumbai - 400072. </address> </footer> </body> </html>
Output:
Code:
<!DOCTYPE>
<html>
<head>
<style>
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:
While creating a
The section should always have a header element (H1 to H6). If a title cannot be given for the section, we can use the
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:
The
위 내용은 HTML 섹션 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
