HTML Layouts

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.

HTML Layouts

Every website has a specific layout to display content in a specific manner.

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

NOTE: HTML layouts create an individual space for every part of the web page. So that every element can arrange in a significant order.

Description of various Layout elements

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:

Test it Now

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:

Test it Now

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:

Test it Now

HTML <article>

The HTML

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

Example:

Test it Now

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:

Test it Now

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:

Test it Now

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:

Test it Now

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:

Test it Now




Latest Courses