Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we include a section in an HTML document?
Section is one of the tag used in HTML, which defines the section of document like header, footers, chapters etc.,
Section tag divided the content of document into two parts, section and subsections.
It is useful when there is a requirement of two headers or footers or chapter or other sections of document needed.
Section tag groups the related content in a generic block.
It is a semantic element, that describes meaning to browser as well as developer.
section has open and closing tags, <section> </section>
It supports almost all browsers.
Section tag also supports global attributes and event attributes.
Syntax
<section> Content </section>
Example
Following is the example which demonstrates the syntax of section tag in HTML −
<!DOCTYPE html>
<html>
<body>
<h1> Tutorials Point</h1>
<!-- html section tag is used here -->
<section>
<h2>----- Section 1-----</h2>
<p>HTML Tutorial</p>
</section>
<section>
<h2>----- Section 2-----</h2>
<p>JAVA Tutorial</p>
</section>
<section>
<h2>-----Section 3-----</h2>
<p>Oracle Tutorial</p>
</section>
</body>
</html>
Example
Following is another example which demonstrates the usage of section tag in HTML −
<!DOCTYPE html>
<html>
<head>
<title>HTML Section Tag</title>
</head>
<body>
<section>
<h1>Java</h1>
<h3>Inheritance</h3>
<p>Inheritance defines the relationship between superclass and subclass.</p>
</section>
</body>
</html>
Nested Section tag
A section that is present inside another section is called as Nested section. If two sections main and subsections font property is same, then it can be differentiating with font size, the subsection font is smaller when compare to section tag.
The subsection tag is mainly used for organizing complex documents. So, the section logically appears in outline of the document.
Syntax
Following is the usage/syntax of nested section tag in HTML −
<section>
<section>
<content>
</section>
</section>
Example
In the following example we are trying to create a nested section in HTML −
<!DOCTYPE html>
<html>
<body>
<h1> Tutorials Point</h1>
<!-- html section tag is used here -->
<section>
<h2> ----- Section 1-----</h2>
<p>HTML Tutorial</p>
<section>
<h4> Introduction</h4>
<h4> Examples </h4>
</section>
</section>
<section>
<h2>----- Section 2-----</h2>
<p>JAVA Tutorial</p>
<section>
<h4> Fundamentals of OOPs</h4>
<h4> Example Programs</h4>
</section>
</section>
<section>
<h2>-----Section 3-----</h2>
<p>Oracle Tutorial</p>
<section>
<h4> SQL Introduction</h4>
<h4> SQL Commands </h4>
</section>
</section>
</body>
</html>
Example
Following example, shows the use of section in CSS document to set as a default setting for all browsers −
<!DOCTYPE html>
<html>
<head>
<style>
section {
display: block;
}
</style>
</head>
<body>
<p>A section element is displayed like this:</p>
<section>
<h1>TutorialsPoint</h1>
<p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</section>
<p>To see the effects ,Change the default CSS settings .</p>
</body>
</html>
798 Views
