Skip to main content

HTML Layouts

Websites often display content in multiple columns (like a magazine or a newspaper).

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.

Web page layout is the most important part to keep in mind while creating a website so that our website can appear professional with the great look. You can also use CSS and JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website designing.

Web page layout

HTML Layout Elements​

HTML has several semantic elements that define the different parts of a web page:

  • <header> - Defines a header for a document or a section
  • <nav> - Defines a set of navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent, self-contained content
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details that the user can open and close on demand
  • <summary> - Defines a heading for the <details> element

Description of various Layout elements​

HTML <header> Element​

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.

<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> Element​

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.

<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> Element​

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.

<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> Element​

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

<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> Element​

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.

<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> element defines the footer for that document or web page. It mostly contains information about author, copyright, other links, etc.

<footer style="background-color: #f0f8ff; width: 100%; text-align: center;">  
    <h3>Footer Example</h3>  
    <p>© Copyright 2021-Today.</p>  
</footer>

HTML <details> Element​

HTML <details> element is used to add extra details about the web page and use can hide or show the details as per requirement.

<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> Element​

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.

<details>  
    <summary>HTML is acronym for?</summary>  
    <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>  
</details>

Table of Contents