HTML Layouts
HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in
responsive form or we can say that HTML layout specifies a way in which the web pages can be
arranged. Web-page layout works with arrangement of visual elements of an HTML document.
o <header>: It is used to define a header for a document or a section.
o <nav>: It is used to define a container for navigation links
o <section>: It is used to define a section in a document
o <article>: It is used to define an independent self-contained article
o <aside>: It is used to define content aside from the content (like a sidebar)
o <footer>: It is used to define a footer for a document or a section
o <details>: It is used to define additional details
o <summary>: It is used to define a heading for the <details> element
Description of various Layout elements
HTML <header>
The <header> element is used to create header section of web pages. The header contains the
introductory content, heading element, logo or icon for the webpage, and authorship information.
HTML <nav>
The <nav> element is a container for the main block of navigation links. It can contain links for
the same page or for other pages.
HTML <section>
HTML <section> elements represent a separate section of a web page which contains related
element grouped together. It can contain: text, images, tables, videos, etc.
HTML <article>
The HTML <article> tag is used to contain a self-contained article such as big story, huge article,
etc.
HTML <aside>
HTML <aside> defines aside content related to primary content. The <aside> content must be
related to the primary content. It can function as side bar for the main content of web page.
HTML <footer>
HTML <footer> element defines the footer for that document or web page. It mostly contains
information about author, copyright, other links, etc.
HTML <details>
HTML <details> element is used to add extra details about the web page and use can hide or
show the details as per requirement.
HTML <summary>
HTML <summary> element is used with the <details> element in a web page. It is used as
summary, captions about the content of <details> element.
<html>
<style>
*{
box-sizing: border-box;
}
header {
background-color: lightblue;
text-align: center;
padding: 2px;
font-size: 25px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
footer {
background-color: lightblue;
padding: 10px;
text-align: center;
color: white;
}
section::after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<header>
<h2>Title</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn HTML</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<article>
<h1>Home</h1>
<p>This is a home page.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
HTML Symbols
HTML symbols like mathematical operators, arrows, technical symbols and shapes, are not
present on a normal keyboard.
To add these symbols to an HTML page, you can use the HTML entity name.
If no entity name exists, you can use the entity number.
If the character does not have an entity name, you can use a decimal (or hexadecimal) reference.
Char Dec Hex Entity Name
∀ 8704 2200 ∀ FOR ALL
∁ 8705 2201 COMPLEMENT
∃ 8707 2203 &exist THERE EXISTS
∅ 8709 2205 ∅ EMPTY SET
∑ 8721 2211 ∑ N-ARY SUMMATION
− 8722 2212 − MINUS SIGN
∕ 8725 2215 DIVISION SLASH
∖ 8726 2216 SET MINUS
∗ 8727 2217 ∗ ASTERISK OPERATOR
∘ 8728 2218 RING OPERATOR
∙ 8729 2219 BULLET OPERATOR
√ 8730 221A √ SQUARE ROOT
∝ 8733 221D ∝ PROPORTIONAL TO
∞ 8734 221E ∞ INFINITY
∣ 8739 2223 DIVIDES
∥ 8741 2225 PARALLEL TO
∧ 8743 2227 ∧ LOGICAL AND
∨ 8744 2228 ∨ LOGICAL OR
∩ 8745 2229 ∩ INTERSECTION
∪ 8746 222A ∪ UNION
EXAMPLE:
<html>
<body>
<h2>The for-all symbol: ∀</h2>
<p>I will display ⟁</p>
<p>I will display €</p>
<p>I will display €</p>
<p>I will display √</p>
<p>I will display ∠</p>
<p>I will display ☁</p>
<p>I will display ♿</p>
</body>
</html>
Output:
The for-all symbol: ∀
I will display ⟁
I will display €
I will display √
I will display ∠
I will display ☁
I will display ♿
HTML Responsive
Responsive Web design
Responsive web design is used to make your web page look appropriate, good, and well
placedon all devices (desktop, tablet, smartphone etc.)
Responsive web design uses HTML and CSS to resize, hide, shrink, enlarge, or move the
content. It makes the content look good on any screen.
Responsive Images
Images which can be scaled nicely to fit any browser size are known as responsive images.
By using the width property
Set the CSS width property to 100% to make the image responsive and scale up and down.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Image</h2>
<p>When we set the CSS width property to 100%, it makes the image responsive. Resize the
browser window to see the effect.</p>
<img src="img_girl.jpg" style="width:100%;">( change image)
</body>
</html>
Responsive Text-size
We can make the text size responsive by using the "uv" unit. It means viewport-width. By using
this, we can make the text size to follow the browserwindow screen.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Here size is 10vw.</h1>
<p style="font-size:6vw;">Here size is 6vw.</p>
<p style="font-size:4vw;">Here size is 4vw.</p>
<p>Resize the browser window to see how the text size changes.</p>
</body>
</html>
