sections
HTML sections are used to organize and structure the content of a webpage.
They are defined by the <section> tag and can be used to group related content together.
For example, a webpage may have a section for the header, a section for the main content,
and a section for the footer.
These sections can then be styled separately using CSS, allowing for more flexibility in the design of the webpage.
Here is an example of how the <section> tag can be used to create different sections in an HTML webpage:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<section id="header">
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</section>
<section id="main-content">
<h2>About Us</h2>
<p>We are a company that specializes in web design and development.</p>
<h2>Our Services</h2>
<ul>
<li>Custom Website Design</li>
<li>E-commerce Development</li>
<li>Search Engine Optimization</li>
</ul>
</section>
<section id="footer">
<p>Copyright ©2022 My Webpage</p>
</section>
</body>
</html>
In this example, we have three sections:
The first section is the header, which contains the title of the webpage and a navigation menu.
The second section is the main content, which contains information about the company and its services.
The third section is the footer, which contains the copyright information.
Each section has a unique id that can be used to style it differently using CSS.
semantic elements
Semantic elements in HTML are tags that provide meaning to the structure and content of a web page. These elements give information about the type of content contained within them, making it easier for web browsers and search engines to understand the structure of the page. Examples of semantic elements include:
<header> for the header of a document or section
<nav> for navigation links
<main> for the main content of a document
<article> for a self-contained piece of content
<section> for grouping related content together
<aside> for content that is tangentially related to the main content
<footer> for the footer of a document or section
<figure> and <figcaption> for captioning images and other embedded content.
No comments:
Post a Comment