Lesson 15: The Sections of a Webpage

	The Sections of a Webpage

Fundamental HTML Sections

Spanning a Section

HTML provides text-based elements that can be used in a paragraph element to simply change how a character, a word, or a section appears. Examples of such elements are b, u, em, strong, etc. Sometimes you want to do more than simply underlining or italicizing text.

An HTML tag named span allows you to apply a style to anything inside an element. Here is an example of creating a span element:

<html>
<head>
<title>Chemistry</title>
</head>
<body>

<p>Hydrogen is the most widely available <span>substance</span> on earth.</p>

</body>
</html>

By itself, the span element does nothing. CSS must be added to it. At the same time, span is used where you don't want to, or cannot formally, use an HTML tag. One of the roles and advantages of the span element is that it can be used anywhere, such as inside a paragraph. As a result, span is one of the favorite elements to quickly apply a style.

Once you have created an HTML span section, you can add a style to it. Here are two examples:

<html>
<head>
<title>Chemistry</title>

<style>
.carbon {
    font-family: Tahoma;
    font-size:   0.22in; }
</style>
</head>
<body>

<p>Hydrogen is the most widely available <span style="font-family: Courier; font-size: 0.82cm;">substance</span> on earth.</p>

<p id="carbon">Carbon is the main <span class="carbon">component</span> of most minerals such as diamond and graphite.</p>

</body>
</html>

This would produce:

Spanning a Style

A Division

You may already know that the p element is used to create a portion on a webpage, such as a group of characters to get a paragraph of text. Instead of designating the group as a paragraph, HTML provides an alternate element named div. It can be used to create a section. Here is an example of a div section:

<!DOCTYPE html>

<html>
<head>
<title>Biology</title>
</head>
<body>

<div>
  Biology is the study of the existence of living organisms. Biologiy studies how 
  the organisms come to existense, such as how an organism is born or is created, 
  how they grow (or how they change from one state or phase to another), how they 
  live, how they function, where they dwell, and how their existence ends (such as 
  how they die).
</div>

</body>
</html>

A div element creates a section. This means that between the start and the end tags of the div element, you can create any HTML element you want. Here are examples:

<!DOCTYPE html>

<html>
<head>
<title>Biology</title>
</head>
<body>

<div>
  <p>Biology</p>
</div>

<div>
  <p>Biology is the study of the existence of living 
  organisms. Biologiy studies how the organisms come to existense, such as 
  how an organism is born or is created, how they grow (or how they change 
  from one state or phase to another), how they live, how they function, 
  where they dwell, and how their existence ends (such as how they die). 
  Biology also studies the environment in which an organism lives, how it 
  interacts with other organisms, how it influences its environment, and 
  how other organisms affect its beginning, its existence, its environment, 
  and its end.</p>
</div>

</body>
</html>

This would produce:

A Division in a Webpage

In fact, you can nest a section inside another section, and then each section can have its own elements. Here is an example:

<html>
<head>
<title>Geometry: Polygons</title>
<head>
<body>

<div>
  <h3>Geometry: Polygons</h3>
</div>

<div>
  <p>A polygon is a geometric plane figure made of straight lines 
  also called segments. Polygons are categorized based on their number 
  of sides. Examples of categories of polygons are:</p>

  <ul>
    <li>Triangle: A geometric figure made of <span>three</span> sides (called edges) 
    and three angles (called vertices). Triangles are categorized by the 
    relationships among the edges:
      <ul>
        <li>Equalateral: All sides have the same length
        <li>Isosceles: Two of the sides have the same length
        <li>Scalene: All sides have different lengths
      </ul>
    </li>
    <li>Quadrilateral: A geometric figure made of <span>four</span> sides 
    (called edges) and four angles (called corners). Quadrilaterals are 
    categorized by the relationships among the sides, namely whether the opposite 
    sides are equal, whether the opposite sides are parallel or not, etc</li>
      <li>Others: This is for polygons made of five or more sides. Examples are:

      <div>
        <ul>
          <li>Pentagon: Made of 5 sides
          <li>Hexagon: Made of 6 sides
          <li>Octagon: Made of 8 sides
          <li>Decagon: Made of 10 sides
          <li>Dodegagon: Made of 12 sides
        </ul>
      </div>

    </li>
  </ul>
</div>

</body>
</html>

You can also nest many div elements inside an existing one.

You can create a style that applies to a section without creating styles for the elements nested in the section. Here are examples:

<!DOCTYPE html>

<html>
<head>
<title>Biology</title>
<style type="text/css">
#top-portion {
    color:       #F00;
    font-size:   16pt;
    font-family: Arial, sans-serif; }
#contents {
    font-size:   16pt;
    color:       #336699;
    font-family: Script, Arial, sans-serif; }
#bottom-portion {
    color:       #090;
    font-family: Consolas, Arial, sans-serif; }
</style>
</head>
<body>

<div id="top-portion">
  <p>Biology</p>
</div>

<div id="contents">
  <p>Biology is the study of the existence of living 
  organisms. Biologiy studies how the organisms come to existense, such as 
  how an organism is born or is created, how they grow (or how they change 
  from one state or phase to another), how they live, how they function, 
  where they dwell, and how their existence ends (such as how they die). 
  Biology also studies the environment in which an organism lives, how it 
  interacts with other organisms, how it influences its environment, and 
  how other organisms affect its beginning, its existence, its environment, 
  and its end.</p>
</div>

<div id="bottom-portion">
  <p class="description">Biology helps to understand 
  other scientific areas of studies and other study fields influence biology. 
  These include agriculture, botany, ecology, etc.</p>
</div>

</body>
</html>

This would produce:

Preview

Of course, a nested section can have its own styles. In this case, the style of the nested section would override the style of the nesting section. Here is an example:

<!DOCTYPE html>

<html>
<head>
<title>Biology</title>
<style type="text/css">
#top-portion {
    color:       #F00;
    font-size:   16pt;
    font-family: Arial, sans-serif;
}
#contents {
    font-size:   16pt;
    color:       #336699;
    font-family: Script, Arial, sans-serif;
}
#bottom-portion {
    color:       #090;
    font-family: Consolas, Arial, sans-serif;
}
.fields-of-study {
    font-size:   1.05em;
    color:       MediumVioletRed;
    font-family: Bodoni MT, Times New Roman, Garamond, serif;
}
</style>
</head>
<body>

<div id="top-portion">
  <p>Biology</p>
</div>

<div id="contents">
  <p>Biology is the study of the existence of living 
  organisms. Biologiy studies how the organisms come to existense and their 
  existence.</p>

  <div class="fields-of-study">
    <p class="description">Biology can be divided in various fields of sudies such 
    as biochemistry, biophysics, and biotechnology. Some of the college 
    majors related to biology are:</p>

    <ul>
      <li>Biology</li>
      <li>Biological Physics</li>
      <li>Biological Sciences with concentration in Cell Biology and Genetics</li>
      <li>Biological Sciences with concentration Microbiology</li>
    </ul>
  </div>
  
  <p>Many schools offer bachelor degres in art and bachelor degrees in sciences 
  in various biology-related fields.</p>
</div>

<div id="bottom-portion">
  <p>Biology helps to understand 
  other scientific areas of studies and other study fields influence biology. 
  These include agriculture, botany, ecology, etc.</p>
</div>

</body>
</html>

This would produce:

A Division

Of course, an element nested in a section can have its own style. In this case, the style of the element would override that of the section if any. Here are examples:

<!DOCTYPE html>

<html>
<head>
<title>Biology</title>
<style type="text/css">
#top-portion {
    color:       #F00;
    font-size:   16pt;
    font-family: Arial, sans-serif;
}
#contents {
    font-size:   16pt;
    color:       #336699;
    font-family: Script, Arial, sans-serif;
}
#bottom-portion {
    color:       #090;
    font-family: Consolas, Arial, sans-serif;
}
.fields-of-study {
    font-size:   1.05em;
    color:       MediumVioletRed;
    font-family: Bodoni MT, Times New Roman, Garamond, serif;
}

li {
    color:       #F30;
    font-size:   0.82em;
    font-weight: 200;
    font-family: AvanGarde Md Bt, Tahoma, sans-serif;
}
#top-title {
    color:       #03C;
    font-size:   28pt;
    font-weight: Bold;
    text-align:  center;
    font-family: Bodoni MT Black, Georgia, serif;
}
.biology {
    color:       #960;
    font-size:   1.00em;
    font-weight: 100;
    text-align:  justify;
    font-family: Linux Libertine G, Garamond, serif;
}
.studies {
    font-size:   0.5cm;
    color:       MediumVioletRed;
    font-family: Californian FB, Times New Roman, Garamond, serif;
}
</style>
</head>
<body>

<div id="top-portion">
  <p id="top-title">Biology</p>
</div>

<div id="contents">
  <p class="biology">Biology is the study of the existence of living organisms. 
  Biologiy studies how the organisms come to existense and their existence.</p>

  <div class="fields-of-study">
    <p class="studies">Biology can be divided in various fields of sudies such 
    as biochemistry, biophysics, and biotechnology. Some of the college 
    majors related to biology are:</p>

    <ul>
      <li>Biology</li>
      <li>Biological Physics</li>
      <li>Biological Sciences with concentration in Cell Biology and Genetics</li>
      <li>Biological Sciences with concentration Microbiology</li>
    </ul>
  </div>
  
  <p class="biology">Many schools offer bachelor degres in art and bachelor degrees 
  in sciences in various biology-related fields.</p>
</div>

<div id="bottom-portion">
  <p>Biology helps to understand 
  other scientific areas of studies and other study fields influence biology. 
  These include agriculture, botany, ecology, etc.</p>
</div>

</body>
</html>

This would produce:

Preview

The Sections of a Webpage

Introduction to Sections

A section is an area you want to delimit in a web page, for any reason. Most of the time, you create a section because you want to put some items in a group. As mentioned for div and span, the sections of a webpage are created in HTML but, in most cases, HTML doesn't know what to do with them. Here is how it works. Sections are created as HTML elements but they are configured in CSS.

An HTML Section

In HTML, a section is created using a tag named section. Between its start and end tags, you can put anything you want: paragraphs of text, tables, lists, etc. Only you will decide why you need a section and what you want to do with it. Here is an example:

<html>
<head>
<title>F# Programming: An Overview</title>

<style>
.aRecord { font-size:  12pt }
.formattedRecord {
    font-family: Courier;
    color:       blue;
}
.fsharpClass { font-family: Georgia }
</style>
</head>
<body>

<h1>F#: Object-Oriented Programming</h1>

<p>The F# language supports different types and, subsequenly, there are various 
means to get an object. The types in F# include records, structures, classes, 
and discriminated unions.</p>

<div class="aRecord">
  <p>As done in <span style="font-family: Verdana; color: maroon">Object 
  Pascal</span>, the record is the simplest technique to create a class. 
  Here is an example of a record:</p>

  <pre class="formattedRecord">type Employee = {
      EmployeeNumber : string
      FirstName      : string
      LastName       : string
      HourlySalary   : float }<pre>
</div>

<section class="fsharpClass">
  <p>In all modern programming languages, the class is the most popular tool to 
  create objects. Like all types in F#, a class is created using the <b>type</b> 
  keyword. The members of a class are primarily created from primitive data types 
  (<b>string</b>, <b title="Integer">int</b>, <b>float</b>, etc). A member of 
  a class can also be an enumeration type. Here is an example:</p>

<pre>type OccupancyStatus =
| Other       = 0
| Available   = 1
| Occupied    = 2
| NeedsRepair = 3

type Apartment = {
    UnitNumber      : string
    Bedrooms        : int
    Bathrooms       : float
    SecurityDeposit : int
    MonthlyRate     : int
    Status          : OccupancyStatus }</pre>
</section>

</body>
</html>

This would produce:

An HTML Section

A Section Aside

A section can also be created with a tag named aside. A section created as this tag is supposed to be related to the other contents of the same page. Here is an example:

<html>
<head>
<title>Social Science Studies</title>

<style>
.main-title         {
    text-align:  center;
    font-weight: bold;
    color:       Navy;
    font-size:   0.86cm;
    text-shadow: 0.08cm 0.08cm 0.10cm Blue;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
.sub-title         {
    text-align:  left;
    color:       Blue;
    font-size:   0.64cm;
    font-family: Georgia, Times New Roman, serif;
}

.contributions {
    color:       #CC0000;
    text-align:  justify;
    word-break:  keep-all;
    font-family: Georgia, Garamond, Times New Roman, serif; }

</style>
</head>
<body>

<p class="main-title">Social Science Studies</p>

<p class="sub-title">Introduction</p>

<p class="paragraph">Social sciences cover a wide range of studies that address all 
types of topics about human beings, their behaviors, their history, their societies, 
and their environments.</p>

<p class="sub-title">Social Science Contributions</p>

<aside class="contributions">
  <p>Social sciences are not strictly confined to the above list. 
  Studies in chemistry borrow concepts from sociology, anthropology, and economy. 
  Mathematics and medicine, that are sometimes said not to be a science, 
  regularly share theories with philosophy, psychology, or criminology.</p>
</aside>

<p class="sub-title">Recommendations</p>

<p class="paragraph">If you are planning to study any of the scocial science topics, 
find a good school.</p> 
</body>
</html>

This would produce:

A Section Aside

A Header Section

To let you explicitly designate a section of a webpage as the top portion, you can refer to it as the header. To let you create a section for the header part, HTML provides a tag named header. Such a section can be made to hold the top portion of a webpage. Here is an example:

<html>
<head>
<title>Social Science Studies</title>

<style>
.top-part {
    font-weight: bold;
    color:       #933;
    text-align:  center;
    font-size:   1.16cm;
    text-shadow: 0.08cm 0.08cm 0.10cm #F0F;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
.sub-title         {
    text-align:  left;
    color:       Blue;
    font-size:   0.64cm;
    font-family: Georgia, Times New Roman, serif;
}

.paragraph {
    text-align:  justify;
    word-break:  keep-all;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

</style>
</head>
<body>

<header class="top-part">
  <p>Social Science Studies</p>
</header>

<p class="sub-title">Introduction</p>

<p class="paragraph">Social sciences cover a wide range of studies that address all 
types of topics about human beings, their behaviors, their history, their societies, 
and their environments.</p>

<p class="sub-title">Social Science Contributions</p>

<aside>
  <p class="paragraph">Social sciences are not strictly confined to the above list. 
  Studies in chemistry borrow concepts from sociology, anthropology, and economy. 
  Mathematics and medicine, that are sometimes said not to be a science, 
  regularly share theories with philosophy, psychology, or criminology.</p>
</aside>

<p class="sub-title">Recommendations</p>

<p class="paragraph">If you are planning to study any of the scocial science topics, 
find a good school.</p> 
</body>
</html>

This would produce:

A Header Section

A Footer Section

The bottom part of a webpage can be referred to as footer. To specify a section for such a section, create an element named footer. The section can be made to contain such items as a copyright notice or a navigational menu. Here is an example:

<html>
<head>
<title>Social Science Studies</title>

<style>
.main-title         {
    font-weight: bold;
    color:       Navy;
    text-align:  center;
    font-size:   1.18cm;
    text-shadow: 0.08cm 0.08cm 0.10cm Blue;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
.sub-title         {
    text-align:  left;
    color:       Blue;
    font-size:   0.64cm;
    font-family: Georgia, Times New Roman, serif;
}

.paragraph {
    color:       Black;
    text-align:  justify;
    word-break:  keep-all;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

.contributions {
    text-align:  justify;
    word-break:  keep-all;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}
.bottom-part   {
    color:       #A00;
    font-weight: bold;
    text-align:  center; }

</style>
</head>
<body>

<header>
  <p class="main-title">Social Science Studies</p>
</header>

<p class="sub-title">Introduction</p>

<p class="paragraph">Social sciences cover a wide range of studies that address all 
types of topics about human beings, their behaviors, their history, their societies, 
and their environments. Regular social science areas include sociology, psychology, 
philosoply, linguistics, communication, history, geography, demography, ethnicity, 
anthropology, archaeology, political science, law, education, criminology, and 
economy, just to name a few. Some social science topics are grouped in categories, 
such as individual or crowd, where studies tend to address the same categorical 
isssues. Still, social sciences are highly interchangeable. Sometimes, differences 
are a matter of interpretations based on the particular area(s) being considered.</p>

<p class="sub-title">Social Science Contributions</p>

<aside class="contributions">
  <p class="paragraph">Social sciences are not strictly confined to the above list. 
  Studies in chemistry borrow concepts from sociology, anthropology, and economy. 
  Mathematics and medicine, that are sometimes said not to be a science, 
  regularly share theories with philosophy, psychology, or criminology. In the same 
  way, it is practically impossible to study computer science, which includes computer 
  languages and application programming, without referring to linguistics. As a 
  conclusion, social sciences are not restricted to one area of study but 
  contribute to various types of sciences, studies, and disciplines.</p>
</aside>

<p class="sub-title">Recommendations</p>

<p class="paragraph">If you are planning to study any of the scocial science topics, 
find a good school.</p>

<footer class="bottom-part">
  <p>Schools | Majors | Minors</p>
  <p>Copyright &copy; 2015</p>
</footer>

</body>
</html>

This would produce:

A Footer Section

An Article

An HTML article is a section that can be accessed, used, and managed independently from the rest of a web page. Examples of articles are: responses to webpages at the ends of news articles, reactions posted in a forum, etc.

To create an HTML article section, add an element using a tag named article. When creating an article, it is suggested that its first child be a heading (h1 to h5) that identifies what the article is used for.

An Address Section

The address section is an area where you want to show the contact information. To create such a section, use a tag named address.