I. Lesson objectives

By the end of this lesson, you will be able to:

Create a basic web page using HTML 5.0 semantic and structural elements.
Describe how the following structural and sementic tags are used:
- <!DOCTYPE>
- <html>
- <head>
- <title>
- <meta>
- <body>
- <div>
- <main>
- <nav>
- <section>
- <aside>
- <article>
- <header>
- <footer>
Use text elements and formatting elements to add content to pages.
Describe how the following paragraph tags are used:
- <p>
- <pre>
- <br>
- <hr>
- <span>
Explain how the heading elements, <h1> through <h6>, are used and how they differ from one another.
Describe how the following text formatting tags are used:
- <strong>
- <em>
- <mark>
- <small>
- <del>
- <ins>
- <sub>
- <sup>
Describe what an attribute is and when it is used.
Explain what the following attributes do and when they are used:
- class
- id
- translate
- contenteditable

This lesson covers HTML 5 elements. There are a lot of elements available - we will be looking at structural and semantic elements to build our pages. Throughout the course, we will be using elements described in this chapter. To begin with, our focus will be on using basic elements and we will build from there.

II. HTML Overview

HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages
HTML elements are the building blocks of HTML web pages
HTML elements are represented by tags (the terms element and tag are used interchangably)
HTML tags label pieces of content such as "heading", "paragraph", "section", and so on
HTML 5 tags are used to separate content into meaningful sections
Browsers do not display the HTML tags, but use them to render the content of the page and to assign meaning to different segments of the page

HTML 5.0 is the newest version of the language. There have been many features added to the language which increase interactivity (you don't need to use JavaScript or a scripting language for basic interactive features because they are now built-in). In addition to adding some new features, there are older features that have been deprecated which means they are being phased out and eventually, they will not be supported by the web browsers.

The table below shows the different versions of HTML and the year the versions were released

Version	Year
HTML	1991
HTML 2.0	1995
HTML3.2	1997
HTML 4.01	1999
XHTML	2000
HTML 5.0	2014

III. Creating a Web Page

Creating a web page involves planning the page, entering the HTML tags and content and applying CSS to format the content. We will be covering the planning and HTML tags/content for the next few weeks. Once you are familiar with basic HTML, we will add in the CSS to format the pages.

A. Planning the page

The most important part of the creation process is planning the appearance of your page BEFORE you begin keying in your code. The plan should be a rough sketch of how you want the page to look. It should include where pictures will go, where text will go, where links will go etc. Once you have a rough sketch of what you want the page to look like, you can begin entering your HTML code.

B. Basic HTML Syntax

Syntax, for any programming language, involves learning the rules you need to know when using the language. In HTML, there are tags that are required to give the document structure. There are also semantic tags you will enter to give meaning to different segments of the page. (Tags are used by CSS for formatting and can also be used by JavaScript to dictate behavior).

HTML tags normally come in pairs like <p> and </p> which is used for paragraphs.

The first tag in a pair is the start or opening tag, the second tag is the end or closing tag

The end tag is written like the start tag, but with a forward slash inserted before the tag name

Tags are always enclosed in brackets < > AND they should be entered in lowercase letters (with the exception of DOCTYPE).

1. Required Structural Elements

Tags tell the web browser what type of content is being displayed. All properly formed HTML 5 web documents must have the following structure:

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Title of the document</title>
        </head>

        <body>
            The content of the document......
        </body>

    </html>

a) <!DOCTYPE html>

Tells the web browser the page is using HTML 5.0. The tag must be at the top of the page and it can only appear once. NOTE:Older versions of html have different DOCTYPE declarations, for example, transitional HTML 4.01 requires the following: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

b) <html lang="en"> </html>

<html lang="en"> begins the html document and </html> ends the document. The lang="en" attribute specifies the language is English. (For more on attributes, see 2. HTML attributes)

c) <head> and </head>

The <head> section typically includes links to external files, the title tags which specify the text that should display in the web browser's tab, and meta elements that are used by search engines. The <head> must be below the opening <html> and above the <body> elements.

d) <body> and </body>

The <body> section contains the visible content of your web page - anything you enter in this section will display in the web browser's window.

2. HTML Attributes

Attributes provide additional information about HTML elements and are always specified in the opening tag.

Attributes come in pairs called name/value pairs. The name of the attribute appears on the left followed by an = sign. The value of the attribute appears to the right of the = sign

Example: <html lang="en"> or <html lang="en-US">

The attribute shown above is commonly used with the html tag to indicate the language of the page is in English. The en-US variation indicates the language and dialect of the page.

Two additional attributes you will see used quite often include:

a) id - assigns a unique identifier to an element (often used in CSS for formatting and in scripting languages to identify and access the element)

b) class - assigns one identifier to a group of elements (often used in CSS for formatting).

Throughout the course we will be using attributes within elements to provide more information OR to identify areas we want to apply formatting to.

As we cover an attribute, you will learn how it is used.

3. Semantic Elements

HTML5 includes semantic elements to define different parts of a web page. The semantic elements provide both structure and meaning to the page.

a) <article>

The <article> element specifies independent, self-contained content. It should make sense on its own and it should be possible to read it independently from the rest of the web site.

Examples of where an <article> element can be used include:

Forum post
Blog post
Newspaper article

b) <section>

The <section> element defines a section in a document. The w3C definition is: "A section is a thematic grouping of content, typically with a heading." An example would be a home page that contains 3 sections: 1) introduction; 2) content; and 3) contact information.

c) Nesting <article> and <section>

As far as nesting rules for <article> and <section> go, there are no rules. You will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements. You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements. So, the bottom line is, look at the content. If it is a part of a whole, then it can be a section. If it is self-contained on it's own, then it can be an article.

Example: In a newspaper, you may have a sport article within the sporting section of the paper. You may also have a technical section within the sport article.

d) <nav>

The <nav> section is used for navigation links. The links in this section should be major links within your page or site. NOTE: You do not need to put all links inside the <nav> element. It is intended for a major block of links, not all links.

Example:

<nav>
  <a href="https://www.w3schools.com/html/default.asp">HTML</a> |
  <a href="https://www.w3schools.com/css/default.asp">CSS</a> |
  <a href="https://www.w3schools.com/js/default.asp">JavaScript</a> |
  <a href="https://www.w3schools.com/jquery/default.asp">jQuery</a>
</nav>

How this looks live:

NOTE: You will be working with images and links in the next lesson, the example above is just to illustrate how <nav> is used.

e) <header>

The header element is used as a container for introductory content. It can be used anywhere in the page when you need to introduce a topic.

It is most often used at the top of the document where it contains heading text.

Example at the top of a web document:

<body>
        <header>
            <h1>Monday Times</h1>
        </header>

<nav>
        <p>News<br>
              Sports<br>
             Weather</p>
</nav>

Example within an article:

<article>
  <header>
        <h1>What Does WWF Do?</h1>
            <p>WWF's mission:</p>
  </header>
          <p>WWF's mission is to stop the degradation of our planet's natural environment,
           and build a future in which humans live in harmony with nature.</p>
</article>

Excerpt retrieved from w3schools.com on August 30th, 2017

f) <footer>

The <footer> is normally at the bottom of the web page or at the end of an article or section. It typcally contains the author, copyright information, contact information etc. You can have more than one footer in a document.

Example:

<footer>
<p>© 2017 Lisa Balbach</p>
<p>Contact information: <a href="mailto:lbalbach@nmc.edu">Lisa Balbach</a> .</p>
</footer>

How this looks live:

g) <aside>

The <aside> element is like a sidebar in a document. It is used to provide extra information for the content surrounding it.

Example - the <aside> element is used to provide the scientific name and other data for the Butterfly Bush:

<section>
    <header>
            <h2>Butterfly Bush</h2>
    </header>

    <p>A butterfly bush is a shrub that's typically covered in butterflies all summer long. It is an easy-care
    shrub that features fragrant flowers in shades of blue, purple, and white. <br>
    If your butterfly bush starts to get big, prune it back in winter or early spring.  You can cut it
    almost all the way down to the ground.</p>

    <aside>
        <p><strong>Name:</strong> Buddleia selections<br><strong>Growing Conditions:</strong>
        Full sun and moist, well-drained soil<br><strong>Size:</strong> Up to 10 feet tall and
        15 feet wide, depending on type<br><strong>Zones:</strong> 5-9, depending on type<br>
        <strong>Grow it with: </strong>Mexican sunflower; this annual's bold orange flowers look great against
        just about any butterfly bush. </p>
    </aside>

</section>

Here's how it looks live. NOTE: The elements have been formatted with CSS to make the <aside> display on the right-hand side, by default, it doesn't display on the right ( you have to format it with CSS to position the element!):

Butterfly Bush

A butterfly bush is a shrub that's typically covered in butterflies all summer long. It is an easy-care shrub that features fragrant flowers in shades of blue, purple, and white.
If your butterfly bush starts to get big, prune it back in winter or early spring. You can cut it almost all the way down to the ground.

h) <details> and <summary>

These two tags can create an interactive section that you can display or hide by clicking. Prior to HTML 5, this type of interactivity required quite a bit of coding or HTML trickery. This makes it simple, quick and easy!

Syntax:

<details>
<summary>Clickable text that displays</summary>
Text that is hidden or displayed by clicking
</details>

<details> defines the section of text that you will display or hide
<summary> defines the text that you click on

Example #1:

Question: Why did the chicken cross the road? (Click for the answer)

Answer: To get to the other side.

Here's the code:

<details>
<summary>Question: Why did the chicken cross the road? (Click for the answer)</summary>
Answer: To get to the other side.
</details>

Example #2:

Butterfly Bush

More Details...

Name: Buddleia selections
Growing Conditions: Full sun and moist, well-drained soil
Size: Up to 10 feet tall and 15 feet wide, depending on type
Zones: 5-9, depending on type
Grow it with: Mexican sunflower; this annual's bold orange flowers look great against just about any butterfly bush.

Here's the code:

<section>
    <header>
        <h2>Butterfly Bush</h2>
    </header>
    <p>A butterfly bush is a shrub that's typically covered in butterflies all summer long. It is an easy-care
    shrub that features fragrant flowers in shades of blue, purple, and white. <br>
    If your butterfly bush starts to get big, prune it back in winter or early spring.  You can cut it
    almost all the way down to the ground.</p>
    <details>
        <summary>More Details...</summary>
            <strong>Name:</strong> Buddleia selections
            <br><strong>Growing Conditions:</strong>Full sun and moist, well-drained soil
            <br><strong>Size:</strong> Up to 10 feet tall and 15 feet wide, depending on type
            <br><strong>Zones:</strong> 5-9, depending on type
            <br><strong>Grow it with: </strong>Mexican sunflower; this annual's bold orange
            flowers look great against just about any butterfly bush. </p>
    </details>
</section>

i) <main>

The content inside the <main> element should be unique to the document. It should NOT contain any content that is repeated across documents (things like sidebars, navigation links, copyright information, logos etc shouldn't be in the main section).

There are two important points to remember about using <main>

1) There can ONLY be one <main> element within a document.

2) Structural elements that do NOT repeat across pages, such as <article>, <aside>, <footer>, <header>, and <nav>, must be nested inside <main>

Example showing multiple <article> elements nested inside the <main> element:

<main>
    <h1>Web Browsers</h1>
    <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

    <article>
        <h1>Google Chrome</h1>
        <p>Google Chrome is a free, open-source web browser developed by Google,
        released in 2008.</p>
    </article>

    <article>
        <h1>Internet Explorer</h1>
        <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
    </article>

    <article>
        <h1>Mozilla Firefox</h1>
        <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
    </article>
</main>

Excerpt retrieved from w3schools.com on August 30th, 2017

j) <div>

The <div> tag defines a division within an HTML document. It is often used to group elements for CSS formatting and page layout.

By default, web browsers will insert a line break above and below <div> sections; however, that behavior can be modified using CSS

k) <meta>

The <meta> element is used to describe metadata.

What in the world is metadata?

Metadata is information (or data) about data. Clear as mud - right?

There are 4 primary uses of <meta>:

1) To identify the character encoding used.

Example: <meta charset="UTF-8">

UTF-8 is the standard set by W3C and it stands for Unicode (Universal Coded Character Set) Transformation Format - 8 bit

2) Identifies the viewport (visible area of the page) that varies with different devices

Example: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Identifying and controlling the viewport are important for mobile development and responsive design. (You wll be learning more about this near the end of the semester).

3) Identifies information for search engines such as keywords and descriptions

Example 1 - Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Example 2 - Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS">

Developers will customize the content attribute, the rest is standard and shouldn't be changed.

4) Used for documentation to provide the author, copyright etc.

Some keypoints to remember if you use <meta>

a) <meta> tags always go inside the <head> element.

b) Metadata is always passed as name/value pairs.

c) The content attribute MUST be defined if the name or the http-equiv attribute are defined. If neither of these are defined, the content attribute CANNOT be defined.

Examples:

NOTE: http-equiv was used in the past to specify what coding language was being used. That method is outdated in HTML 5

Old HTML4 method: <meta http-equiv="content-type" content="text/html; charset=UTF-8">

New HTML 5 method: <meta charset="UTF-8">

4. Text and Heading Elements

To add content to your page, you will use heading tags, paragraph tags, line breaks and horizontal separators. Most elements have an opening tag that tells you where the content begins and they have a closing tag that tells you where the content ends (closing tags always begin with a /)

There are also elements that do not have a closing tag because they aren't being applied to a section of text. These tags are called empty tags. They still require the / which is placed right before the > in the tag. So, they begin with < and end with />. Image and link tags are examples of empty tags. Example: <img src="myBeatufiulGraphic.jpg" alt="text that will display if my graphic cannot" />

a) Paragraph Tags <p></p>

When entering text that will display in a web page, you need to insert tags telling the browser where the paragraph begins and ends.

The <p> tag tells the browser the text that follows is in a paragraph.

The </p> tag tells the browser the paragraph has ended and it should insert a blank line.

b) Line Breaks<br>

If you want a line break within a paragraph, you need to enter the <br> tag

Example without a line break:

Heigh-ho, Heigh-ho, Heigh-ho Heigh-ho, Heigh-ho It's home from work we go (Whistle) Heigh-ho, Heigh-ho Heigh-ho, Heigh-ho

Example with a line breaks:

Heigh-ho, Heigh-ho, Heigh-ho
Heigh-ho, Heigh-ho
It's home from work we go
(Whistle) Heigh-ho, Heigh-ho
Heigh-ho, Heigh-ho

NOTE: A <br> tag was added to the end of each line

c) Horizontal Rule <hr>

A horizontal rule is a line that spans the width of the page. It acts as a separator between different parts of a page. (The blue lines in this document were created using the <hr> tag and a little CSS to add color :)

d) Heading tags

Heading tags are used to make the text larger. There are 6 levels of heading tags. Different browsers will display the text within the tags differently. In general, the h1 tag displays the largest text, the h6 tag results in the smallest text.

Examples:

Heading 1 example

Heading 2 example

Heading 3 example

Heading 4 example

Heading 5 example

Heading 6 example

NOTE: Heading tags can be controlled using CSS. Using CSS, you can make each tag look significantly different which is why all six levels are still a part of the HTML language. In the example above, CSS was used to change the font and color of all six tags.

Syntax: <hx>Heading text</hx>

where x is replaced with 1,2,3,4,5 or 6

Examples:

<h1>Heading text</h1>

Additional examples of tags include:

<h1>

<h2>

Test it out:

To work with an interactive heading example, go to: W3C learn interactive headings. Feel free to modify the code, just click on Run when you are done to see the changes in the right-hand side. To start over, just reload the page.

To work with an interactive heading and horizontal rule example, go to: W3C learn interactive rule and headings

e) <pre>

By default, when you enter text into a web editor and you add extra spaces and line breaks, web browsers ignore them. If you want extra spaces, you need to add code for each space (   ) and you need to add code for line breaks ( <br> )

The <pre> tag lets you add spaces and line breaks that will remain intact when the page is rendered in the browser.

Text in a <pre> element is typically rendered in a fixed-width font like Courier.

The element is typically used for columnar tables

Example without <pre>

NUTRITION INFORMATION (void where prohibited) Calories Grams USRDA /Serving of Fat Moisture Regular 3 4 100% Unleaded 3 2 100% Organic 2 3 99% Sugar Free 0 1 110%

Example with <pre>

NUTRITION INFORMATION (void where prohibited)
		Calories       Grams        USRDA
		/Serving      of Fat       Moisture
Regular     	3		 4 	     100%
Unleaded    	3   		 2	     100%
Organic         2   		 3	      99%
Sugar Free      0   		 1	     110%

Test it out:

To see how the browsers handle spaces, go to: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs2

To see how to use the <pre> element, go to: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre Change <pre> and </pre> to regular paragraphs (change them to <p> and </p>, then click run to see the difference. After you modify the tags, you can change them back to <pre> and </pre> and click run again).

f) <span>

The span element is typically used to apply CSS formatting to a small section of text that is not an entire paragraph. You can also use <span> to apply attributes to a small section of text.

Two attributes that affect text are:translate and contenteditable.

1. translate - indicates that the section of text should not be translated into another language. Values for translate are either yes or no (the default value is yes).

Example: "Carpe Diem" is her favorite phrase

To prevent "Carpe Diem" from being translated, you would need to enter

<p><span translate="no">"Carpe Diem"</span> is her favorite phrase.</p>

2. contenteditable - allows a user to temporarily modify the content in a page. The modification is NOT permanent and only affects what the user can see (permanent modifications require using JavaScript or AJAX). The default value is false. To allow editing, you need to add the attribute to an element which changes the false setting to true.

Example: Your favoite color is orange

To allow the user to change orange to a different value, you would need to code it like this: <p> Your favoite color is <span contenteditable>orange</span></p> The example above does allow you to change the color to something else, just click on orange and type a different color. To see that the change is temporary, reload your web page by refreshing the screen (the original color, orange, should display - if it doesn't, your browser is pulling information from the cache on the hard drive instead of reloading a fresh page.)

Attributes like translate and contenteditable can be added to any element that affects text. The <span> element is typically used because only a portion of the text should be modified.

5. Text Formatting Elements

Most formatting is done using CSS; however, there are some HTML tags that can be used for formatting. The formatting done to the text is determined by the browser and may not be the same in all browsers.

The formatting tags and typical formatting that is applied is described below.

a) <strong> </strong>

Applies boldfacing with semantic importance. NOTE: The <b> element also applies boldfacing, but <b> doesn't signify that the text is important. The browser interprets text inside <strong> </strong> as being important text. The meaning of the text is different when using <b> versus <strong>

Example: <strong>Northwestern Michigan College</strong>- this tag would apply boldfacing to the text displayed within the opening and closing tags

Here's how it looks in the browser: Northwestern Michigan College- this tag would apply boldfacing to the text displayed within the opening and closing tags

b) <em></em>

Applies emphasis or italics to text with semantic importance. NOTE: The <i> element also applies italics, but <i> doesn't signify that the text is important; whereas, <em> does indicate importance.

Example: <em>Northwestern Michigan College</em>- this tag would apply italics to the text displayed within the opening and closing tags

Here's how it looks in the web browser: Northwestern Michigan College- this tag would apply italics to the text displayed within the opening and closing tags

c) <small></small>

The HTML <small> element defines smaller text

Example: <small>Northwestern Michigan College</small>- this element makes the text between the tags smaller.

Here's how it looks in the web browser: Northwestern Michigan College- this element makes the text between the tags smaller.

d) <sub></sub>

The HTML <sub> element defines subscripted text.

Example: <sub>Northwestern Michigan College</sub>- this element makes the text between the tags display subscripted (lowered).

Here's how it looks in the web browser: _{Northwestern Michigan College}- this element makes the text between the tags display subscripted (lowered).

e) <sup></sup>

The HTML <sup> element defines superscripted text.

Example: <sup>Northwestern Michigan College</sup>- this element makes the text between the tags appear superscripted (raised).

Here's how it looks in the web browser: ^{Northwestern Michigan College}- this element makes the text between the tags appear superscripted (raised).

f) <ins></ins>

The HTML <ins> element defines inserted (added) text.

Example: <ins>Northwestern Michigan College</ins>- this element displays text as added or inserted (many browsers will show the text as underlined).

Here's how it looks in the web browser: Northwestern Michigan College- this element displays text as added or inserted (many browsers will show the text as underlined).

g) <mark></mark>

The HTML <mark> element defines marked or highlighted text.

Example: <mark>Northwestern Michigan College</mark>- this element makes the text between the tags display highlighted.

Here's how it looks in the web browser: Northwestern Michigan College- this element makes the text between the tags display highlighted.

h) <del></del>

The HTML <del> element defines deleted (removed) text.

Example: <del>Northwestern Michigan College</del>- this element makes the text between the tags display with a strikethrough (or line through the middle).

Here's how it looks in the web browser: ~~Northwestern Michigan College~~- this element makes the text between the tags display with a strikethrough (or line through the middle).

Test it out:

To see how the formatting elements work, try them out at: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_strong NOTE: Change the <strong> elements to <em>, <mark>, <del> etc to see how they look. Remember to click the Run button after you make coding changes.

6. Nesting tags

You can have more than 1 tag applied to a section of text. The trick is to code the closing tags in reverse order

Example: <strong><em>Part 1:</em></strong>- these tags would apply both boldfacing and italics to the text displayed within the opening and closing tags.

Here's how it looks in the web browser: Part 1:- these tags would apply both boldfacing and italics to the text displayed within the opening and closing tags.

C. Page Layout

Now that you have an idea of what the different HTML elements are and how they are used, we will take a look at a few different page layouts

The graphic below shows you a very basic page layout to help you visualize how all of this fits together. You will note that it doesn't contain any of the semantic elements which typically go between the <body> and </body> tags.

basic page layout graphic

The three layouts below show how the semantic elements could be used inside <body> and </body> There are numerous variations to these layouts, these are just simple examples to give you an idea of how you can layout pages.

Layout #1 - the linear format below doesn't require css positioning (this is the type of layout we will begin with)

<body>

<main>

</section> or </article>

</main>

</footer>

</body>

Layout #2 - this layout requires css positioning to put <aside> to the right of <section> or <article>

<body>
<header></header>
<nav></nav>
<main>
<section></section> or <article></article>	<aside></aside>
<section></section> or <article></article>
</main>
<footer></footer>
</body>

Layout #3 - this layout requires css positioning to place the <main> and <section> or <article> to the right of <nav>

<body>
<header></header>
<nav></nav>	<main>
	<section></section> or <article></article>
	</main>
<footer></footer>
</body>