HTML

HTML

πŸ“Œ What is HTML Layout?

β€œLayout” refers to how different parts of a web page are arranged. In other words, it determines how sections such as:

  1. the top area (header),
  2. navigation menu (nav),
  3. main content area (main),
  4. sidebar (aside),
  5. footer (footer)
  6. navigation menu (nav),
  7. are positioned on the screen.

In modern HTML, this structure is built using semantic elements. These elements make the code easier for developers to understand and help search engines analyze the page more effectively.

πŸ”Ή Semantic HTML Elements

Some important elements introduced with HTML5 include:

  1. <header> β†’ The top section of the page (logo, title, etc.)
  2. <nav> β†’ Navigation menu and links
  3. <section> β†’ A section related to a specific topic
  4. <article> β†’ Independent content (e.g., a blog post)
  5. <aside> β†’ Side content (like a sidebar)
  6. <footer> β†’ Footer area (contact info, copyright, etc.)
  7. <details> and <summary> β†’ Expandable/collapsible content

These elements make the page structure more organized, meaningful, and accessible.

πŸ”Ή Multi-Column Layout Techniques

There are different techniques to place elements side by side on web pages:

1. Using CSS Frameworks

Pre-built systems (such as Bootstrap) allow you to quickly create layouts. They are especially useful for responsive (mobile-friendly) designs.

2. CSS Float

This is an older method that was widely used in the past.

  1. Elements are aligned side by side using float: left or float: right.
  2. However, it becomes difficult to manage in complex layouts.

In short: Simple but outdated.

3. CSS Flexbox

A modern and very useful layout system.

  1. Works along a single axis (horizontal or vertical)
  2. Elements automatically align and resize
  3. Makes responsive design easier

In short: Ideal for one-dimensional layouts (rows or columns).

4. CSS Grid

One of the most powerful and flexible layout systems.

  1. Works in two dimensions (rows and columns)
  2. Perfect for complex page structures

In short: Best for advanced layouts.

Which Method Should I Choose?

  1. Float β†’ For simple tasks (but not recommended anymore)
  2. Flexbox β†’ For one-directional layouts (very common)
  3. Grid β†’ For complex page structures (most powerful)
  4. Frameworks β†’ For fast and ready-made solutions

Also an important note:

HTML tables were previously used for layouts, but they are no longer recommended. Tables are meant for displaying data, not for page design.

Logic of the Example Structure

In the given example:

  1. The overall page structure is created using CSS Grid
  2. Semantic elements like <header>, <nav>, <main>, and <footer> are used
  3. Inside the main content:
  4. <section> β†’ main content
  5. <aside> β†’ side content (sidebar)

So, three core principles of modern web design are used together:

  1. Semantic HTML (meaningful structure)
  2. CSS Grid (layout system)
  3. Organized content separation

  • Short Summary

  • When designing a web page, you should both use the correct HTML elements and choose the appropriate CSS layout technique
  • Build the structure with semantic HTML
  • Create the layout using Flexbox or Grid
  • Use frameworks when needed to save time

Html Script
Html Responsive