Scribd
Upload
4 views

HTML Responsive

Uploaded by

kushwahaji98011
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML Responsive

Uploaded by

kushwahaji98011
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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

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 Float Layout


It is common to do entire web layouts using the CSS float property. Float is
easy to learn - you just need to remember how the float and clear properties
work. Disadvantages: Floating elements are tied to the document flow,
which may harm the flexibility
<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Template</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{

box-sizing: border-box;

body {
font-family: Arial, Helvetica, sans-serif;

/* Style the header */

header {

background-color: #666;

padding: 30px;

text-align: center;

font-size: 35px;

color: white;

/* Create two columns/boxes that floats next to each other */

nav {

float: left;

width: 30%;

height: 300px; /* only for demonstration, should be removed */

background: #ccc;

padding: 20px;

/* Style the list inside the menu */

nav ul {

list-style-type: none;

padding: 0;
}

article {

float: left;

padding: 20px;

width: 70%;

background-color: #f1f1f1;

height: 300px; /* only for demonstration, should be removed */

/* Clear floats after the columns */

section::after {

content: "";

display: table;

clear: both;

/* Style the footer */

footer {

background-color: #777;

padding: 10px;

text-align: center;

color: white;

}
/* Responsive layout - makes the two columns/boxes stack on top of each
other instead of next to each other, on small screens */

@media (max-width: 600px) {

nav, article {

width: 100%;

height: auto;

</style>

</head>

<body>

<h2>CSS Layout Float</h2>

<p>In this example, we have created a header, two columns/boxes and a


footer. On smaller screens, the columns will stack on top of each
other.</p>

<p>Resize the browser window to see the responsive effect (you will
learn more about this in our next chapter - HTML Responsive.)</p>

<header>

<h2>Cities</h2>

</header>

<section>

<nav>

<ul>

<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>

<li><a href="#">Tokyo</a></li>

</ul>

</nav>

<article>

<h1>London</h1>

<p>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.</p>

<p>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.</p>

</article>

</section>

<footer>

<p>Footer</p>

</footer>

</body>

</html>
CSS Flexbox Layout

HTML Responsive Web Design


Responsive web design is about creating web pages that look good on all
devices!

A responsive web design will automatically adjust for different screen


sizes and viewports.

What is Responsive Web Design?


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):
HTML Computer Code Elements
HTML contains several elements for defining user input and computer
code.

<h2>Computer Code</h2>

<p>Some programming code:</p>

<code>

x = 5;

y = 6;

z = x + y;

</code>

Keyboard input

<h2>The kbd Element</h2>

<p>The kbd element is used to define keyboard input:</p>

<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.

<h2>The samp Element</h2>

<p>The samp element is used to define sample output from a computer program.</p>
<p>Message from my computer:</p>

<p><samp>File not found.<br>Press F1 to continue</samp></p>

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.

<h2>The var Element</h2>

<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>

HTML Semantic Elements


Semantic elements = elements with a meaning.

What are Semantic Elements?


A semantic element clearly describes its meaning to both the browser and
the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing


about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly


defines its content.

Semantic Elements in HTML


Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer"> to indicate navigation, header, and
footer.

In HTML there are some semantic elements that can be used to define
different parts of a web page:
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

HTML <section> Element


The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping


of content, typically with a heading."

Examples of where a <section> element can be used:

• Chapters
• Introduction
• News items
• Contact information

A web page could normally be split into sections for introduction, content,
and contact information.
<section>

<h1>WWF</h1>

<p>The World Wide Fund for Nature (WWF) is an international organization


working on issues regarding the conservation, research and restoration of
the environment, formerly named the World Wildlife Fund. WWF was founded
in 1961.</p>

</section>

<section>

<h1>WWF's Panda symbol</h1>

<p>The Panda has become the symbol of WWF. The well-known panda logo
of WWF originated from a panda named Chi Chi that was transferred from
the Beijing Zoo to the London Zoo in the same year of the establishment of
WWF.</p>

</section>

HTML <article> Element


The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to


distribute it independently from the rest of the web site.

Examples of where the <article> element can be used:

• Forum posts
• Blog posts
• User comments
• Product cards
• Newspaper articles
HTML <header> Element
The <header> element represents a container for introductory content or a set
of navigational links.

A <header> element typically contains:

• one or more heading elements (<h1> - <h6>)


• logo or icon
• authorship information

HTML <footer> Element


The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

HTML <nav> Element


The <nav> element defines a set of navigation links.

HTML <aside> Element


The <aside> element defines some content aside from the content it is placed
in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

HTML <figure> and <figcaption>


Elements
The <figure> tag specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or as the last child of
a <figure> element.

The <img> element defines the actual image/illustration.

Semantic Elements in HTML


Below is a list of some of the semantic elements in HTML.

Tag Description

<article> Defines independent, self-contained content

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or


hide

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content, like illustrations,


diagrams, photos, code listings, etc.

<footer> Defines a footer for a document or section


<header> Specifies a header for a document or section

<main> Specifies the main content of a document

<mark> Defines marked/highlighted text

<nav> Defines navigation links

<section> Defines a section in a document

<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

You might also like