HTML Layouts

layout in html

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:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *