HTML layout elements and techniques, HTML responsive web designs, HTML computer code elements
Tags: webdev, css, learning, html
Published: 2024-06-12 07:39:53

## **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 <details> element
## **Example**
```HTML
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 <meta> tag to all your web pages:
## **Example**
```HTML
<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**
```HTML
<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**
```HTML
<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**
```HTML
<h1 style="font-size:10vw">Hello World</h1>
```
## **HTML Computer Code Elements**
HTML contains several elements for defining user input and computer code.
## **Example**
```HTML
`<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**
```HTML
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:
```HTML
`<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**
```HTML
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**
```HTML
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>`
```