HTML Layout

HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and responsive ( all devices) form or we can say that HTML layout specifies a way in which the web pages can be arranged.

Use CSS and JAVASCRIPT based frameworks for creating layouts for responsive ( all devices) and dynamic website designing.

HTML Layout

Different HTML5 elements:

<header>: Header for a document or a section.
<nav>: Container for navigation links
<section>: Section in a document
<article>: Independent self-contained article
<aside>: Content aside from the content (like a sidebar)
<footer>: Footer for a document or a section
<details>: Additional details
<summary>: Heading for the <details> element

HTML <header>:

The <header> element is used to create the header section of web pages. The header contains the introductory content, heading element, logo, or icon for the webpage.

Example:

<!DOCTYPE html>
<html>
 <head>
      <title>First Webpage</title>
 </head>
<body>
 <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>
</body>
</html>

OUTPUT:

HTML Layout

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:

<!DOCTYPE html>
<html>
<head>
     <style>
           li{  display: inline-block;
                     padding: 10px}
     </style>
</head>
<body>
     <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>
</body>
</html>

OUTPUT:

HTML Layout

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:

<!DOCTYPE html>
<html>
<head>
      <title>Page Section</title>
</head>
 <body>
 <section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
       <h2>Introduction to HTML</h2>
       <p>HTML is a markup language ...................,,,,,,,,,,,,,,</p>
 </section>
 </body>
</html>

OUTPUT:

HTML Layout

HTML <article>:

The HTML article tag is used to contain a self-contained article such as a big story, huge article, etc.

Example:

<!DOCTYPE html>
<html>
<head>
      <title>Article Example</title>
</head>
<body>
<article style="width: 100%; border:2px solid black; background-color: #fff0f5;">
        <h2>History of I2tutorials</h2>
        <p>Write your content here for the history of I2 tutorials</p>
</article>
</body>
</html>

OUTPUT:

HTML Layout

HTML <aside>:

HTML <aside> provide aside content related to primary content. The <aside> content must be related to the primary content. It can function as a sidebar for the main content of the web page or website.

Example:

<!DOCTYPE html>
<html>
<head>
      <title>Aside Example</title>
</head>
<body>
 <aside style="background-color:#d9d9d9">
       <h2>Aside information</h2>
       <p>This conatins information which will ,,,,,,,,,,,,,,</p>
 </aside>
</body>
</html>

OUTPUT:

HTML Layout

HTML <footer>:

HTML <footer> element defines the footer for that document or web page. It mostly contains information about the author, copyright, other links, etc.

Example:

<!DOCTYPE html>
<html>
<head>
      <title>Footer Section</title>
</head>
 <body>
 <footer style="background-color:#f0f8ff; width: 100%; text-align: center;">
       <h3>Footer Example</h3>
       <p>© Copyright 2018-2020. </p>
 </footer>
 </body>
</html>

OUTPUT:

HTML Layout

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:

<!DOCTYPE html>
<html>
<head>
      <title>Deatils element</title>
</head>
<body>
<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>
</body>
</html>

OUTPUT:

HTML Layout

HTML <summary>:

HTML <summary> element is used with the <details> element in a web page or website and it is used as summary, captions about the content of <details> element.

Example:

<!DOCTYPE html>
<html>
<head>
      <title>Summary Example</title>
</head>
<body>
<details>
       <summary>HTML is markup language for?</summary>
       <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
</details>
</body>
</html>

OUTPUT:

HTML Layout