Scribd
Upload
14 views3 pages

HTML Layout

The document explains HTML layout, which organizes web page content in rows and columns similar to magazines. It introduces semantic HTML elements like <header>, <nav>, and <footer> for structuring content. Additionally, it discusses the CSS Grid Layout Module, which provides a grid-based system for easier web design, along with a sample grid layout code.

Uploaded by

ah20301med
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views3 pages

HTML Layout

The document explains HTML layout, which organizes web page content in rows and columns similar to magazines. It introduces semantic HTML elements like <header>, <nav>, and <footer> for structuring content. Additionally, it discusses the CSS Grid Layout Module, which provides a grid-based system for easier web design, along with a sample grid layout code.

Uploaded by

ah20301med
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML Layout

Layout in HTML refers to the visual organization of a web page.


Websites often organize their content in rows and columns.
Much like a magazine or newspaper layout.
Examples
Here is an example layout with semantic elements.

TAG DESCRIPTION
<header> Specifies a header for a document or section
<nav> Defines a navigation area
<main> Specifies the main content of a document
<aside> Defines content aside from the page content
<section> Defines a section in a document
<article> Defines an article
<footer> Defines a footer for a document or section
CSS Grid View
The CSS Grid Layout Module offers a grid-based layout
system, with rows and columns, making it easier to
design web pages without having to use floats and
positioning. Grid is not supported by IE or Edge 15 and
earlier. Other than that, Grid is a solid choice for creating
page layouts.

A grid layout.

<style>

.grid-layout {

background-color: steelblue;

padding: 10px;
display: grid;

grid-gap: 10px;

grid-template-areas:

'header header header header header header'

'menu main main main right right'

'menu footer footer footer footer footer';

.grid-layout > div {

background-color: aliceblue;

padding: 20px;

text-align: center;

font-size: 18px;

</style>

<div class="grid-layout">

<div style="grid-area: header">Header</div>

<div style="grid-area: menu">Menu</div>

<div style="grid-area: main; height: 100px;">Main</div>

<div style="grid-area: right">Right</div>

<div style="grid-area: footer">Footer</div>

</div>

You might also like