Quick Links
A webpage, HTML layouts is very important to give better look to your website. It takes considerable time to design a website’s layout with great look and feel.
HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the web pages can be arranged. Web-page layout works with arrangement of visual elements of an HTML document.
Following are different HTML5 elements which are used to define the different parts of a webpage.
→ <header>: It is used to define a header for a document or a section.
→ <nav>: It is used to define a container for navigation links
→ <section>: It is used to define a section in a document
→ <article>: It is used to define an independent self-contained article
→ <aside>: It is used to define content aside from the content (like a sidebar)
→ <footer>: It is used to define a footer for a document or a section
→ <details>: It is used to define additional details
→ <summary>: It is used to define a heading for the <details> element
Description of layouts element:
HTML <header>:
The <header> element is used to create header section of web pages. The header contains the introductory content, heading element, logo or icon for the webpage, and authorship information.
Example:
<header style=”background-color: #303030; height: 80px; width: 100%”>
<h1 style=”font-size: 30px; color: white;text-align: center; padding-top: 15px;”>Welcome to MyFirstWebpage</h1>
</header>
HTML <nav>:
The <nav> elements is a container for the main block of navigation links. It can contain links for the same page or for other pages.
Example:
<nav style=”background-color:#bcdeef;”>
<h1 style=”text-align: center;”>Navgation Links</h1>
<ul>
<li><a href=”#”>link1</a></li>
<li><a href=”#”>link2</a></li>
<li><a href=”#”>link3</a></li>
<li><a href=”#”>link4</a></li>
</ul>
</nav>
HTML <section>:
HTML <section> elements represent a separate section of a web page which contains related element grouped together. It can contain: text, images, tables, videos, etc.
Example:
<section style=”background-color:#ff7f50; width: 100%; border: 1px solid black;”>
<h2>Introduction to HTML</h2>
<p>HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser..</p>
</section>
HTML <article>:
The HTML <article> tag is used to contain a self-contained article such as big story, huge article, etc.
Example:
<article style=”width: 100%; border:2px solid black; background-color: #fff0f5;”>
<h2>History of Computer</h2>
<p>Write your content here for the history of computer</p>
</article>
HTML <aside>:
HTML <aside> define aside content related to primary content. The <aside> content must be related to the primary content. It can function as side bar for the main content of web page.
Example:
<aside style=”background-color:#e6e6fa”>
<h2>Sidebar information</h2>
<p>This conatins information which will represent like a side bar for a webpage</p>
</aside>
HTML <footer>:
HTML <footer> element defines the footer for that document or web page. It mostly contains information about author, copyright, other links, etc.
Example:
<footer style=”background-color: #f0f8ff; width: 100%; text-align: center;”>
<h3>Footer Example</h3>
<p>© Copyright 2018-2020. </p>
</footer>
HTML <details>:
HTML <details> element is used to add extra details about the web page and use can hide or show the details as per requirement.
Example:
<details style=”background-color: #f5deb3″>
<summary>This is visible section: click to show other details</summary>
<p>This section only shows if user want to see it. </p>
</details>
HTML <summary>:
HTML <summary> element is used with the <details> element in a web page. It is used as summary, captions about the content of <details> element.
Example:
<details>
<summary>HTML is acronym for?</summary>
<p style=”color: blue; font-size: 20px;”>Hypertext Markup Language</p>
</details>
Recommended Posts: