HTML Layout Elements and Techniques
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:
<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 an 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 element
Example
Cities
London
Paris
Tokyo
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 Techniques
There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:
CSS framework
CSS float property
CSS flexbox
CSS grid
CSS Frameworks
If we want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.
CSS Float Layout
It is common to do entire web layouts using the CSS float property. Float is easy to learn - we just need to remember how the float and clear properties work.
CSS Flexbox Layout
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
CSS Grid Layout
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.
HTML Responsive Web Design
Responsive web design is about creating web pages that look good on all devices. Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)
Setting The Viewport
To create a responsive website, add the following tag to all your web pages:
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive Images
Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive
Example
<img src="img_girl.jpg" style="width:100%;">
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size
Show Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for different browser window sizes.
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width".
Example
<h1 style="font-size:10vw">Hello World</h1>
HTML Computer Code Elements
HTML contains several elements for defining user input and computer code.
Example
`<code>`
x = 5;
y = 6;
z = x + y;
`</code>`
HTML <kbd> For Keyboard Input
The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
Example
Define some text as keyboard input in a document:
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
HTML <samp> For Program Output
The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
Example
Define some text as sample output from a computer program in a document:
`<p>`Message from my computer:`</p>`
`<p><samp>`File not found.`<br>`Press F1 to continue`</samp></p>`
HTML <code> For Computer Code
The HTML <code>element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
Example
Define some text as computer code in a document:
`<code>`
x = 5;
y = 6;
z = x + y;
`</code>`
HTML <var> For Variables
The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
Example
Define some text as variables in a document:
`<p>`The area of a triangle is: 1/2 x `<var>`b`</var>` x `<var>h</var>`
, where `<var>`b`</var>` is the base, and `<var>`h`</var>` is the vertical height.`</p>`
Top comments (4)
Hi wasifali,
Very nice
Thanks for sharing
Thank You
The content is very impressive, it just give me more insight on what HTML
Thanks