HTML Layouts

HTML templates provide a way for well-managed, well-structured responsive web pages to be organized. We could say that the HTML layout specifies how web pages can be set up. Web page architecture operates with the visual elements of an HTML document being structured.

Web page layout is the most important thing to bear in mind when designing a website so that with the great, look our website will look professional. We can also use the CSS and JAVASCRIPT based framework to build a responsive and interactive website design models.

HTML Layouts

Each website has a specific style to look at the contents in a particular way.

The following are various elements of HTML5 used to describe the different sections of the webpage.

  • <header>: It is used to define a document header or section header.
  • <nav>: It is used to define a navigation link container.
  • <section>: It is used to identify a document section.
  • <article>: It is used to define a self-contained, independent article.
  • <aside>: It is used to define content in addition to the content (like a sidebar).
  • <footer>: It is used to describe a footer or section of a text.
  • <details>: It is used to define additional data.
  • <summary>: It is used to define the heading for the < details > element.

Description of various Layout elements

HTML <header>

The < header > element is used to create a web page header section. The header contains the webpage introductory content, heading part, logo or icon, and information about authorship.

Example:

Output:

HTML Layouts

HTML <nav>

< nav > is the container for the main navigation link block. It may contain links to the same page or to other pages.

Example:

Output:

HTML Layouts

HTML <section>

HTML < section > elements are a separate section of a web page that contains a related group of elements. It may include text, photos, tables, videos, etc.

Example:

Output:

HTML Layouts

HTML <article>

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

Example:

Output:

HTML Layouts

HTML <aside>

HTML < aside > Set aside content related to primary content. The content of the < aside > must be linked to the primary content. It can be used as a sidebar for the main content of the web page.

Example:

Output:

HTML Layouts

The HTML < footer > element defines the footer for this document or web page. It mostly includes author information, copyright information, other links, etc.

Example:

Output:

HTML Layouts

HTML <details>

The HTML < details > element is used to add extra details to the web page and can be used to hide or display the details as required.

Example:

Output:

HTML Layouts

HTML <summary>

The HTML < summary > element is used with the < details > element on the web page. It is used as a summary of the content of the < details > element.

Example:

Output:

HTML Layouts

Pin It on Pinterest

Share This