HTML STUCTURE AND LAYOUT

HTML | STRUCTURE AND LAYOUT

ALSO IN THIS TOPIC
HTML HOME
GETTING STARTED
HTML TAGS AND ELEMENTS
YOU ARE HERE | PAGE STRUCTURE AND LAYOUT
FORMS AND USER INPUT
CSS WITH HTML
HTML QUICK REFERENCE

This section you can learn the concept of creating a basic page structure using HTML elements like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. How to use <div> and <span> elements to group content and apply styles. How to use <table> <tr> and <td> elements.

SECTION 1 | COMMON SEMANTIC ELEMENTS

HTML5 introduced a new set of semantic elements to improve the structure and readability of web pages. Semantic elements are tags that have a clear meaning about the content they represent, making it easier for search engines, browsers, and developers to understand the structure and purpose of the content on a webpage. In this material, we'll explore the common HTML5 semantic elements and their usage.

HEADER
The <header> element represents the header section of a page or a content block. It typically contains the website logo, site navigation, or a banner. The <header> can be used more than once within a page if necessary, such as within an <article> or <section>.

<header>
<h1>Website Title</h1>
<nav>

</nav>
</header>

NAVIGATION
The <nav> element is used to define a navigation block within a web page. It typically contains a list of links to other pages or sections of the website. The <nav> element can be placed inside the <header> or as a separate element on the page.

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

MAIN
The <main> element is used to enclose the main content of a web page. It should be unique to each page and not include content that is repeated across multiple pages, such as headers or footers. There should only be one <main> element per page.

<main>
<h2>Welcome to Our Website</h2>
<p>This is the main content area.</p>
</main>

SECTION
The <section> element is used to define a grouping of content within a page, often containing related content like articles or other sections. Each <section> should have a heading (e.g., <h2> to <h6>) to describe its content.

<section>
<h2>ABOUT US</h2>
<p>All about Computer Science Cafe</p>
</section>

ARTICLE
The <article> element represents a self-contained piece of content that can be independently distributed or reused, such as a news article, blog post, or forum post. An <article> can be nested within a <section> or used on its own.

<article>
<h2>Blog Post Title</h2>
<p>This is the content of the blog post.</p>
</article>

ASIDE
The <aside> element contains content that is related to the main content but can be considered separate, such as sidebars, pull quotes, or supplementary information. It can be placed within a <section> or <article> or used on its own.

<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="related-article-1.html">Related Article 1</a></li>
<li><a href="related-article-2.html">Related Article 2</a></li>
</ul>
</aside>

FOOTER
The <footer> element represents the footer section of a page or a content block. It typically contains metadata, copyright information, or contact details. The <footer> can be used more than once within a page if necessary, such as within an<article> or <section>

<footer>
<p>© 2023 Computer Science Cafe</p>
<nav>

</nav>
</footer>

The © in the code above is an HTML character entity that represents the copyright symbol (©)

SECTION 2 | DIV AND SPAN

In HTML, <div> and <span> elements are used to group content and apply styles or attributes to that content. While both elements serve similar purposes, they have different display characteristics that make them suitable for different use cases. In this material, we'll explore the differences between <div> and <span> elements and how to use them effectively in your web pages.

SPAN
The <span> element is an inline element that groups text or other inline elements within a block-level element. Inline elements do not generate a line break before or after the element, meaning they can be used within a line of text or other inline content. The <span> element is often used for applying styles, highlighting text, or manipulating specific parts of a text.
<p>Here is a <span style="color: red;">red word</span> in a sentence.</p>

In the above example the <span> is placed within the <p> tag and the <span adds attributes to the text within the <span> tag, in this case it makes the text 'red word' red.

DIV
The <div> element is a block-level element that creates a container for grouping other elements. Block-level elements generate a line break before and after the element, essentially forming a "block" of content. The <div> element is often used to create sections and apply styles to that specified section. The below example shows a section being created and the style of a light blue background being added to the section.

<div style="background-color: lightblue;">
<p>This paragraph has a light blue background.</p>
</div>

The example below shows <div> being used to create 3 sections side by side. Two sections take up 20% of the width of the page and one section takes the remaining 60%. These size parameters are set in the <style> within the <head> tag, however could be set within the css page.

<html>
<head>
<title>Computer Science</title>
<style>
.container {
display: flex;
}
.box {
height: 100px;
margin: 10px;
}

.box-20 {
background-color: blue;
flex: 0 0 20%;
}

.box-60 {
background-color: green;
flex: 0 0 60%;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-20"><p>Left section</p></div>
<div class="box box-20"><p>Middle section</p></div>
<div class="box box-60"><p>Right section</p></div>
</div>
</body>
</html>

The below boxes show the result of the above div code

Computer Science

Left section

Middle section

Right section

SECTION 3 | PAGE STRUCTURE

In this section, we will look at basic page structure using HTML5 semantic elements like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. These elements help you create a meaningful and organized layout, making it easier for both users and search engines to understand your content.

HEADER
The <header> element represents the header section of a web page or a section within the page. It typically contains the website's logo, title, and navigation menu. The <header> element should be placed at the beginning of your page or section.
<header>
<h1>Computer Science Website</h1>
</header>

NAV
The <nav> element is used to define a navigation menu on your website. It is usually placed inside the <header> element, but it can also be placed elsewhere if needed. The <nav> element should contain a list of links to help users navigate through your website.

<body>
<header>
<h1>Computer Science Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</body>

MAIN
The <main> element represents the main content of a web page. It should contain the unique content of your page, excluding headers, footers, and sidebars. There should only be one <main> element per page. Whilst you can just put all the page content inside the <body> tag it is good practice to separate elements within the <body> with further tags such as <main> and <footer>

SECTION AND ARTICLE
The <section> element is used to group related content in a page, while the <article> element is used to represent a self-contained piece of content that can be reused and distributed independently. You can use these elements to create a more organized and accessible content structure.

ASIDE
The <aside> element represents content that is only slightly or indirectly related to the main content of the page, such as a sidebar or additional information. It can be used for content like side navigation, advertisements, or supplementary information.

FOOTER
The <footer> element represents the footer section of a web page or a section within the page. It typically contains copyright information, contact details, and links to important pages or sections of the website. You would typically copy the same footer to every webpage.

<html>
<head>
<title>Computer Science Website</title>
</head>
<body>
<header>

</header>
<nav>

</nav>
<main>

<p>This is the primary content of the web page, which is unique to this page.</p>
</main>
<aside>

</aside>
<footer>

</footer>
</body>
</html>

SECTION 4 | TABLES

As you are experimenting with adding images and text you will quickly notice it is not straight forward how to place elements side by side rather than one on top of the next. One easy way to do this is by using a table then place your elements into the table.

To create a table first use the <table> tag to create the table, secondly use the <tr> tag to create a row, thirdly create <td> tags to create the cells within the row and lastly close all the tags as needed. The example below would create a table with 2 rows and 3 cells per row, each cell contains the text CELL(no) .

<table>
<tr>
<td>CELL 1</td>
  <td>CELL 2</td>
  <td>CELL 3</td>
</tr>
<tr>
  <td>CELL 4</td>
  <td>CELL 5</td>
  <td>CELL 6</td>
</tr>
</table>

Next we will look at the size of the table, cells and adding some background colour.

The following block of code improves on the table above by adding a background colour to each cell using the bgcolor and the HEX code for the colour. The code makes the table fit 100% of the web-browser widthThe code also makes the left column fit and then makes the columns on the left 20% of the width of the table, the center column 60% of the table width and the right column 20%. The height of all the rows are set to 50px.

<table width = "100%" border = "0">
<tr>
<td bgcolor = "#71d0c8" width = "20%" height = "50">
<p>HOME PAGE</p>
  </td>
  <td bgcolor = "#71d0c8" width = "60%" height = "50">
<p>HELLO WORLD</p>
</td>
  <td bgcolor = "#71d0c8" width = "20%" height = "50">
<img src = "static/images/cscafelogo1.gif" alt = "Test Image" width = "150" height = "70" >
</td>
</tr>
<tr>
<td bgcolor = "#71d0c8" width = "20%">
<p>BUILDING CONFIDENCE</p>
</td>
  <td bgcolor = "#71d0c8" width = "60%" height = "50">
<p>WELCOME TO MY WESITE</p>
  </td>
<td bgcolor = "#71d0c8" width = "60%" height = "50">
<p>MY LOGO</p>
</td>
</tr>
</table>

The image below shows the results of the code above.

SECTION 5 | ADD A FAVICON

A favicon is the little icon that is used in the tab of a web-browser page, they are super easy to create and a neat addition to your webpage.

Firstly you need to create your image and save as a jpg or png, keep the image small and on a square page, 16 x 16 px or 32 x 32px is fine.

Use an online site to convert your image to a .ico file type.
ICO Converter - A super simple and free site to convert your image to an icon suitable for a web-browser tab.

To add a favicon to your website, you can use the <link> element within the <head> section of your HTML document. The <link> element should have the rel attribute set to "icon" or "shortcut icon" and the href attribute pointing to the favicon file, which is usually in the ICO, PNG, or SVG format. Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<link rel="icon" href="static\images\myFavicon.ico" type="image/x-icon">
</head>
<body>

</body>
</html>

In this example, the favicon file is named "myFavicon.ico" and is located in the 'images' directory which is inside the 'static' directory. Make sure to replace the href attribute value with the correct path to your favicon file.

WANT A TEMPLATE TO GET YOU STARTED?

Here is some html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="static/css/myStyles.css">
</head>
<body>
<table width = "100%">
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
<td rowspan="2">CELL 3</td>
</tr>
<tr>
<td><img src="static/images/yourImage.jpg" width="100" height="35" alt="" class ="center"></td>
<td>CELL 5</td>
</tr>
<tr>
<td colspan = "3">
<iframe width="250" height="150" src="https://www.youtube.com/embed/whzWGc9yLvc" class = "center"></iframe>
</td>
</tr>
</table>
</body>
</html>

And some css

@charset "UTF-8";
/* CSS Document */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}

.left {
float: left;
}

.right {
float: right;
}

th, td {
border: 1px solid #71cd6F;
border-collapse: collapse;
padding: 5px;
padding : 10px;

}

NAVIGATION

GETTING STARTED | Your first webpage
HTML TAGS AND ELEMENTS | An introduction to common tags and elements
PAGE STRUCTURE AND LAYOUT | The concepts of structuring your page
FORMS AND USER INPUT | Various methods of user input such as text box and drop downs
CSS WITH HTML | The relationship between HTML and CSS
HTML QUICK REFERENCE