Buy Now

Search

HTML Layout Elements and Techniques

HTML Layout Elements and Techniques

HTML Layout Elements and Techniques

 

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


Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


HTML Layout Elements

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

HTML5 Semantic Elements
  • <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 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

You can read more about semantic elements in our HTML Semantics chapter.


HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

  • CSS frameworks
  • CSS float property
  • CSS flexbox
  • CSS grid


 

GAGAN PRASAD

GAGAN PRASAD

Hi, I’m System Admin, Your Blogging Journey Guide 🖋️. Writing, one blog post at a time, to inspire, inform, and ignite your curiosity. Join me as we explore the world through words and embark on a limitless adventure of knowledge and creativity. Let’s bring your thoughts to life on these digital pages. 🌟 #BloggingAdventures

Leave a comment

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

Your experience on this site will be improved by allowing cookies Cookie Policy