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 to define a section in a document in HTML5?
Defining a section in a document using HTML5 helps to structure the content of a web page into meaningful and separate sections. It is easy to understand what the content of the page is about and how it is organized. This helps users to navigate the page more effectively, as they can quickly find the information they are looking for.In this article, we will discuss how to define a section in a document in HTML5.
Approaches
We have two different approaches to defining a section in a document in HTML5 including the following −
Using the “<section> element”
Using the “<article> element”
Let us look at each step in detail.
Approach 1: Using the "<section> method"
The first approach is to define a section in a document in HTML5 as “<section>”. In HTML5, a section is used to group similar content together. It helps to organize the content and make it easier for both search engines and users to understand and navigate the page.
Example
Following is an example to define a section in a document in HTML5 using “<section>”.
<!DOCTYPE html>
<html>
<head>
<title>Defining a Section in HTML5</title>
<style>
/* Style for the section element */
section {
background-color: #f2f2f2;
padding: 10px;
margin: 10px 0;
border: 2px solid #ccc;
border-radius: 4px;
box-shadow: 2px 2px 5px #ccc;
}
h1 {
color: green;
}
/* Style for the h2 element inside the section */
section h2 {
color: blue;
font-size: 24px;
margin-bottom: 10px;
}
/* Style for the p element inside the section */
section p {
color: black;
font-size: 15px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<section>
<h2>HTML</h2>
<p>HTML stands for Hyper Text Markup Language and it is the language that is used to define the structure of a web page. HTML is used along with CSS and Javascript to design web pages. HTML is the basic building block of a website. It has different attributes and elements with different properties. Each element has an opening and a closing tag. </p>
</section>
<section>
<h2>CSS</h2>
<p>CSS (Cascading Style Sheets) allows you to create great looking web pages, but how does it work under the hood? This article explains what CSS is with a simple syntax example and also covers some key terms about the language.</p>
</section>
</body>
</html>
Approach: Using the "<article> method"
The first approach is to define a section in a document in HTML5 as “<article> ”. It is used to represent a standalone and complete piece of content, like a story, post, or article. It contains all the important information and can be read on its own without needing to read the rest of the page.
Example
Following is an example to define a section in a document in HTML5 using “<article>”.
<!DOCTYPE html>
<html>
<head>
<title>Using the <article> Element</title>
<style>
/* Styles for article and its children */
article {
border: 1px solid black;
padding: 10px;
}
h1 {
font-size: 24px;
color: purple;
}
p {
font-size: 18px;
line-height: 1.5;
color: red;
}
ul li {
color: red;
}
time {
font-style: italic;
}
</style>
</head>
<body>
<article>
<h1>what is php used for in web development?</h1>
<p>Like any other scripting language, PHP is fundamentally the tool you use to connect to your database to get information and hand that information over to your web server to be displayed in HTML. But many aspects of PHP set it apart from other languages.</p>
<p>You should choose PHP for your website, eCommerce marketplace, or application if you want a language that is:</p>
<ul>
<li>Flexible</li>
<li>Compatible</li>
<li>Scalable</li>
<li>Secure</li>
</ul>
<time datetime="2023-03-3">Published on March 3, 2023</time>
</article>
</body>
</html>
Conclusion
In this article, we examined two different approaches to defining a section in a document in HTML5. Here, we are using two different approaches “<section>” and the “<article>”. The "<section>" tag is used to group related content together, such as a chapter in a book or a section in an article, while the "<article>" tag is used to a self-contained piece of content, such as a blog post or a news article.
244 Views
To Continue Learning Please Login