Scribd
Upload
4 views

Chapetr 8 HTML Layouts

Chapter 7 discusses the importance of web page layout and the use of HTML elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> to structure content effectively. It provides examples of how to implement these elements, including navigation links, content sections, and sidebars, enhancing both accessibility and SEO. The chapter emphasizes careful design and the use of CSS for visual appeal in web layouts.

Uploaded by

kipchirchirmeshek
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
4 views

Chapetr 8 HTML Layouts

Chapter 7 discusses the importance of web page layout and the use of HTML elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> to structure content effectively. It provides examples of how to implement these elements, including navigation links, content sections, and sidebars, enhancing both accessibility and SEO. The chapter emphasizes careful design and the use of CSS for visual appeal in web layouts.

Uploaded by

kipchirchirmeshek
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
You are on page 1/ 4

Chapter 7 HTML Layouts

Web page layout is very important to make your website look good. Design
your webpage layout very carefully. Most websites have put their content
in multiple columns (formatted like a magazine or newspaper). Multiple
columns is created by using <table> or <div> tags. Some CSS are normally
also added to position elements, or to create backgrounds or colorful look for
the pages

Websites often display content in multiple columns (like a magazine or a


newspaper).

HTML Layout Elements

HTML layout refers to the structure of a web page, achieved through


elements like <header>, <nav>, <main>, <article>, <section>, <aside>,
and <footer>. These elements help organize content, define the page’s
sections, and enhance accessibility and SEO.

Page Layout Information


 Header: The part of the front end which is used at the top of the page.
<header> tag is used to add a header section on web pages.
 Navigation bar: The navigation bar is the same as the menu list. It is
used to display the content information using hyperlinks. <nav> tag is
used to add the nav section(nav elements) in web pages.
 Index / Sidebar: It holds additional information or advertisements and
is not always necessary to be added to the page.
 Content Section: The content section is the central part where content
is displayed.<main> tag is used to add the main content of the
webpages.
 Footer: The footer section contains the contact information and other
query related to web pages. The footer section is always put on the
bottom of the web pages. The <footer> tag sets the footer on web
pages.

HTML <nav>

The <nav> elements is a container for the main block of navigation links. It
can contain links for the same page or for other pages.

Example:

<nav style="background-color:#bcdeef;">
<h1 style="text-align: center;">Navgation Links</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>

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.

Example:
<section style="background-color:#ff7f50; width: 100%; border: 1px solid bl
ack;">
<h2>Introduction to HTML</h2>
<p>HTML is a markup language which is used for creating attractive web
pages with the help of styling, and which looks in a nice format on a web bro
wser..</p>
</section>

HTML <article>
The HTML tag is used to contain a self-contained article such as big story,
huge article, etc.
Example:
<article style="width: 100%; border:2px solid black; background-color: #fff0f
5;">
<h2>History of Computer</h2>
<p>Write your content here for the history of computer</p>
</article>

HTML <aside>
HTML <aside> define 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.

Example:
<aside style="background-color:#e6e6fa">
<h2>Sidebar information</h2>
<p>This conatins information which will represent like a side bar for a
webpage</p>
</aside>

HTML <footer>
HTML <footer> element defines the footer for that document or web page. It
mostly contains information about author, copyright, other links, etc.

Example:
<footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
<h3>Footer Example</h3>
<p>© Copyright 2018-2020. </p>
</footer>

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.

Example:
<details style="background-color: #f5deb3">
<summary>This is visible section: click to show other details</summary>
<p>This section only shows if user want to see it. </p>
</details>

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.
Example:
<details>
<summary>HTML is acronym for?</summary>
<p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
</details>

HTML <div>

The HTML division tag, called "div" for short, is a special element that lets
you group similar sets of content together on a web page. You can use it as a
generic container for associating similar content.
You can use the <div> to format as follows
<div id = "header"> ..... </div>
<div id = "section"> ..... </div>
<div id= "footer"> ..... </div>

You might also like