HTML Layout Element
Html Layout refers to the structure and organization of the
elements within html.Here are some techniques for creating HTML LAYOUT,
The term HTML layout describes how a web page is organised, which is
accomplished by using elements such as <header>, <nav>,
<main>, <footer>, <section>, and <article>.
These components in the structure and organisation of content on a
website, as well as in defining the sections of the page and improving
accessibility and SEO. It facilitates easy navigation on the website.
HTML Layout Elements:
<header>:
Web pages can have a header section added by using the <header> tag.
The area used at the top of the page in the front end.
<nav>:
Through the use of hyperlinks, the content information is displayed. The
navigation bar is the same as the menu list. The navigation section of web pages is added using <nav> tag.
<main>:
The main area where content is shown is called the content section.The
<main> tag is used to add the webpage's primary content.
<footer>:
The contact details and other web page-related queries are located in the
footer section. On web pages, the footer is set by the <footer>
tag.
<section>:
In HTML, a stand-alone section of content is represented by the
<section> tag. Go to HTML <section> for more
information.
<article>:
In HTML, a reusable and self-contained piece of content is
represented by the <article> tag.
<aside>:
It defines content aside from the content like a sidebar using
<aside> tag.
<details>:
Defines additional details that the user can open and close on
demand.
Example:
<!DOCTYPE html>
<html>
<head>
<title>First Webpage</title>
</head>
<body>
<header style="background-color: #00ffff;height: 60px;width: 100%">
<h1 style="font-size: 30px; color: black;text-align: center; padding-top:
15px;">Header of MyWebpage</h1>
</header>
</body>
</html>
Output:
Uses of HTML Layout:
- Responsive design
- Structuring content
- Readability and user experience
- separation of concerns
- Search engine optimization (SEO)
- Dynamic content
- Consistency across pages
- Accessibility
- Navigation
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Safari
Tags
