HTML5 Intro

Introduction to HTML5

The HyperText Markup Language 5, is a language that specifies the structure and content of documents. HTML5 is a living standard, defined by W3C and WHATWG.

HTML documents are stored and accessed as simple text files, so you are able to use your favorite text editor (e.g. emacs, vim, atom) to work with them. These documents are stored on the web server as .html or .htm files that are requested by your web browser.

HTML elements (tags)

The building block of any HTML document is an element. The elements have a start tag that includes the element name, content (optional), and end tag (sometimes implied). Below is an example of an anchor element (a hyperlink).

Here is an anchor element <a href="http://courses.cs.usna.edu/IT350">click me</a>.

In this example, the <a href="http://courses.cs.usna.edu/IT350"> is the start tag, click me is the content of the element, and </a> is the end tag. Inside the start tag, we have the name of the element (a in the example) and optionally we can have one or more attribute name = attribute value pairs. href is an attribute name and https://courses.cs.usna.edu/IT350 is the attribute value. It is recommended to have the attribute values enclosed in quotes. The order in which the attribute name-value pairs are specified inside a start tag does not matter.
In this course, we will often refer to elements as "tags".

Here is a complete HTML document example:

<!DOCTYPE html>  <html lang = "en"> <head> <meta charset="utf-8"> <title>Welcome</title> </head> <body> <p>Welcome to HTML5!</p> </body> </html>

Types of elements

There are two high-level tag types, block and inline tags. Block tags start their content on a new line, while inline tags continue on the same line.

Block tags - examples: h1, p, table, ul, div
Inline tags - examples: i, span, a, img, em

There are a few restrictions when using these tags: inline tags (and their associated text) must be nested inside the block tags, not directly under the <body> or <form> tags. Additionally, block tags cannot be nested within inline tags. Example of an illegal sequence: <em><h1> hello </h1></em>

Text-Level Semantics

Let's try a few of the more common elements using the examples below. The following tags will help with specifying special meaning for parts of the text and that will translate in special formatting for your text within HTML.

<b>bold</b> <strong>strong text</strong> <em>emphasis</em> <i>italic</i> <u>underline</u> <s>strikethrough</s> <small>small text</small> <mark>marked text</mark> <del>deleted</del> <ins>inserted</ins> <sub>subscript</sub> <sup>superscript</sup>

Paragraphs and Headings

Now let's work with the overall structure of paragraphs and headings in HTML. These elements help with breaking up the content and delineating similar content.

<p> the p tag separates groups of text, you will notice that spaces and newlines have no effect you can use the line break element <br> to create new lines </p> <h1>Largest Header</h1> <h4>Smaller Header</h4> <h1>The smallest Header</h1> <p> There is also the pre-formatted text option! <pre>This text will stay the same nice... </pre> </p>

Links and Images

Below are a few examples of using links and images showing the use of both absolute (has the http or https portion) and relative paths.

<a href="https://www.usna.edu">a Hyperlink anchor with the a tag </a> <br> <a href="../../img/logo.png">a pretty picture</a> <br> <img title="absolute path" alt = "logo" src="https://www.usna.edu/CMS/_standard3.0/_files/img/logo.png" > <img title="relative path" alt = "logo" src="../../img/logo.png" width="128" height="128" > <img alt = "logo" src="../../img/logo.png" width="128" >

Lists

Let's make a few bulleted (unordered) <ul> and numbered (ordered) <ol> lists.

<ul> <li>The ul tag creates an unordered list</li> <li>items in the list are within li tags</li> </ul> <ol> <li>Ordered Lists start at 1</li> <li value=7>but can be changed</li> <li>awesome</li> </ol>

There are different options that can be used with these types of lists. For example, unordered lists can be presented in different ways using the style attribute. Try adding style="list-style-type:square" to the <ul> tag above.

Some New HTML5 Elements

HTML5 introduces several new elements to better express in HTML the structure of a document. Some of these elements are:

article: represents a self-contained content (e.g. a blog-post)
section: represents a generic section of a page
main:represents the main content of a page, section or article
header: represents introductory or navigational content
footer: represents the footer content for a section, article, or body
nav: represents navigational content (not only links)
aside: represents some content related to the content around it (like a sidebar in print)
address: represents the contact information for the page or article

General HTML Guidance

All of your HTML files should be well formed, which means that all elements should properly nest within each other. In general you should also close your elements, unless the element does not have a closing tag (e.g. img).

Some tags must be closed (ul, form, div)
Some tags don't have to be closed (p, li, body), but should be...
Some tags cannot be closed (br, img, input)

As a general guideline, all element names should be lowercase. While capitalized versions will work, it is bad form. Attributes should be enclosed in double-quotes.

ALl the HTML pages that you create for this class should be valid HTML5 pages. See the resources on the main course page for validators you can use to check that the HTML files you create are valid.

Practice Problems

Correct any invalid HTML5 syntax:

		
<!DOCTYPE html>
<!-- An example file
<!-- Our first Web page  -->
<html>

<body>
    <h1> Welcome to <b> IT350!  </h1> </b>
    <h2> Today’s Agenda </h2>
    <li> HTML5
    <li> JavaScript
</body>

Correct any invalid HTML5 syntax:

		
<!DOCTYPE htm>
<html>

   <title>Internet and WWW How to Program - Welcome</title>

   <body>

         <img scr = "html.jpg" height = "238" width = "183"  >



                <h1 align=“center”>Under construction</h1>

   </body>
</html>

Correct any invalid HTML5 syntax:

		
<html>
   <head>
      <title>Internet and WWW How to Program - Links</title>
   </head>

   <body>
      <b> <h1>Here are my favorite links</h1> </b>

      <p><A href = "http://www.yahoo.com">Yahoo!</A></p>

      <p><A mailto = "webmaster@ussmichigan.org">Webmaster</A></p>

   </body>
</html>

Correct any invalid HTML5 syntax:

		
<!DOCTYPE html>
<html>
   <head>  <title>Best features of the Internet</title>  </head>

   <body>
       <ul>
         <li>Meet new people from around the world.</li>
         <li>Access to new media as it becomes public: </li>
             <ul>
               <li>New games</li>
               <li>New applications & software
             </ul>
         <li>Search engines</li>
      </ul> </body>
</html>