JavaScript Tutorial

HTML Layouts

HTML layouts provide a way to organize web pages in a structured and responsive manner. A well-designed layout can help make a website appear professional and visually appealing. Layouts work with the arrangement of visual elements on an HTML document.

When creating a website, it's important to keep in mind the layout of web pages. There are also CSS and JavaScript frameworks available that can be used to create responsive and dynamic layouts for website design.

Using Tables

In this table, data is arranged in the form of a table with rows and columns. We can modify it in whatever way we like.

Using <div> and <span> elements

We can also display the layout using div and span. Div is a block-level element that helps in displaying data at the full width of the screen.

Although we can create a layout using tables as well, the primary use of tables is to present tabular form data.

Using HTML5 elements

HTML5 elements help in controlling different layouts in a better way.

Following are different HTML5 elements that are used to define the different parts of a webpage.

 

  • <header>: Defines a header for a document or section.
  • <nav>: Defines a container for navigation links.
  • <section>: Defines a section in a document.
  • <article>: Defines an independent, self-contained article.
  • <aside>: Defines content aside from the main content, such as a sidebar.
  • <footer>: Defines a footer for a document or section.
  • <details>: Defines additional details.
  • <summary>: Defines a heading for the <details> element.

HTML layouts provide individual space for each part of a webpage, enabling the arrangement of elements in a significant order.

Semantic Elements:  Other than providing arrangements, these elements also provide meaning to the content they hold, as they are known as semantic elements. Semantic elements in HTML are HTML elements that provide meaning to the content they enclose, rather than just defining the appearance of the content. These elements describe the purpose or meaning of the content to both the browser and the developer, making it easier to understand and maintain the code.

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, and authorship information.

HTML <nav>

The <nav> elements are a container for the main block of navigation links. It can contain links for the same page or for other pages.

HTML <section>

HTML <section> elements represent a separate section of a web page that contains related elements grouped together. It can contain text, images, tables, videos, etc.

HTML <article>

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

HTML <aside>

This tag defines 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 web page.

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.

HTML <details> and <summary>

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

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


Go back to Previous Course