HTML 5 Programming and Web development

The current, editable version of this book is available in Wikibooks, the open-content textbooks collection, at
https://en.wikibooks.org/wiki/HTML_5_Programming_and_Web_development

Permission is granted to copy, distribute, and/or modify this document under the terms of the Creative Commons Attribution-ShareAlike 3.0 License.

HTML 5 Elements

HTML Tags

In HTML, tags are used to create elements of a web page. Examples of elements are paragraphs and headings. Tags are surrounded by angle brackets, like this: <tag> An example of an HTML 5 tag is h1.This tag creates a heading element and it is written like this.

<h1>Hello world!</h1>

h1 is the highest-level heading in HTML. Think of it like a headline for a news story. There are two types of tags. The first, like you've seen here, starts with <h1> and ends with </h1>. These markers show where the heading begins and ends. In the same way, a paragraph is marked at the beginning with <p> and at the end with </p>. The second type of tag is self-closing; that is, it does not have a second tag marking its end.

Some examples of self-closing tags are <br/> (line break), <hr/> (horizontal rule), <input/> (element that accepts user input), and <meta/> (an element that contains information about the web page itself).

While the ending slash (/) on a self-closing tag is optional, it is considered a best practice to include them.

HTML Elements

An HTML element is an object in a web page. Some examples are images, paragraphs, headings, and videos. They start with a start tag and end with an end tag. HTML 5 has different kinds of elements that we will learn about throughout this course.

How to write an HTML Element

To write an HTML Element we first write the start tags<title>. Then we write the content of the element: My first HTML Page.Then we write the end tag. </title>. When you put it together you have an HTML element.

<title>My first HTML 5 page</title>

Nested Elements

The content of an HTML element can be another element. This is called "nesting". For example:

<head>
  <title>My first HTML tag</title>
</head>

Note: New line characters are ignored in HTML 5.

<b>
This is
Multiline
Text.
</b>

This code would actually render like this: This is Multiline Text. To achieve multi-line we actually use the line break tag <br/>.

List of HTML 5 Elements

Note this is just a short list of elements:

<p>
<input>
<table>
<body>
<header>
<nav>
<article>

Example of a well formed HTML document

about:blank

<!doctype html>
<html>
  <head>
 <meta charset="utf-8"/>
  <title>Title</title>
  </head>
  <body>
	 <p>This is a normal Text</p>
	 <p><b>This Is Bold text</b></p>
  </body>
</html>

The <!doctype html> is not an HTML tag, so it has no closing tag or terminating slash. It is a Document Type Definition which we will learn about subsequently.

HTML 5 Attributes

HTML 5 attributes are created using a name-value pair and are placed after the tag name.

Name-value pairs

Name-value pairs are represented by a set of text strings in which name="value" are usually separated by commas, semicolons, space or newline character.

Writing HTML 5 Atrributes

HTML 5 attributes are written inside the element's tag and separated by spaces. For example:

<input type="text" value="hello Web"/>

In this code the attributes are type and value and their values are "text" and "hello Web" respectively.

Attributes give extra information about an element. For example, in the input element the attribute type gives the type of input, so if we had type="button" we would get a button instead of a textbox. Attributes are very important in HTML and without them Web development would probably be much harder.

Special Attributes

HTML 5 has some special attributes that I must point out.

The id attribute

The id attribute is a unique identifier for the element. It becomes very useful when using CSS and JavaScript. You cannot have more than one element with the same id on a web page. Here is an example of the id attribute:

<form id="htm-form">
</form>

The class attribute

The class attribute groups an element with other elements of the same class. This is often used to apply CSS styles to elements. Unlike with the id attribute, you can have more than one element with the same class on a page.

HTML 5 Doctype

The HTML 5 Document Type Definition (Doctype) is used to identify the type of markup document. conventionally doctypes are written like this

<!doctype root-element PUBLIC [FPI] [URI]>

Where in this case the root-element would be HTML.FPI stands for formal public identifier. However in HTML 5 the Doctype is just written <!doctype html>

Example of doctype in HTML 5

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

The doctype must always be at the top of the document.

Document without doctype

Documents without doctype would work in most browsers ,but would not be classified as a valid document.(see Validation).

HTML 5 Comments

A comment in HTML is an area of text that is ignored by the browser. In an HTML comment, you can write anything. These are some examples of comment.

<!-- This is a comment -->
<!-- I love HTML -->
<!-- London bridge is burning down -->

Comments written in angle brackets with an exclamation mark at the start followed by two hyphens (minus sign) and ending with two hyphens.

Reasons for comments

Comments in HTML are conventionally used as:

A directive to show viewers of the source code what it does
To insert information about the document that viewers of the source code should know such as license and author's information

Head and Body Elements

The HTML element

the HTML element is the root element of a document.Every other element in the document must be inside the HTML element. the HTML element is divided into two main elements. the head and body elements

The HTML head Element

The HTML head element is where content not visible on the page is stored these include:

HTML title element
HTML meta element
HTML link element
HTML style element

and lots more.

The HTML title element

The HTML title element is used to specify the title of the document.The syntax for the title element is: <title>Document title</title>

HTML meta Element

The meta element is an example of an empty element it usually contain two attributes name and content. For example if I wanted to store the following in a meta tag

Author:WikiGuy

Then we would write the following:

<meta name="Author" content="WikiGuy"/>

The meta element can also contain other attributes such as charset and http-equiv that we will learn about subsequently

The HTML body element

The HTML body element is where every element visible to the user is kept.These include paragraphs,tables and other page content.

HTML 5 tables and Paragraphs

HTML 5 tables can be used in many ways, the most obvious of which is to order data. Tables are used in many webpages for many other reasons that are not very obvious.

<body>
 <table border="1">
  <tr>
    <td>Name</td>
    <td>Business</td>
  </tr>
  <tr>
  <td>John Doe</td>
  <td>OrgoCo</td>
 </tr>
 <tr>
  <td>Mary Jane</td>
  <td>Simple inc</td>
 </tr>
</table>
</body>

The above was an example code for an HTML 5 table.and the following would be what it looks like.

Name	Business
John Doe	OrgoCo
Mary Jane	Simple inc

HTML 5 paragraphs are used for writing a group of sentences together in paragraph form.The output would look like any normal paragraph.

Other Elements

There are many elements that are used in HTML 5 this includes:

hyperlink
images
textbox
button
marquee
span
div
section
canvas
video
audio

N.B:Even though audio is not a visual element it most be included in the body.

HTML 5 Paragraphs

In HTML 5 a paragraph is created using the <p> tag.HTML paragraphs are used on almost all web pages .They have many purposes, the simplest of which is for writing paragraphs. In HTML 5 and other related markup languages such as SGML and XML the ampersand(&) and the semicolon (;) is used to encode symbols not found on the keyboard such as sum(∑) and Greek letters such as α and β. Example:

<p>
This is the first sentence.
This is the second sentence
This is the third sentence.
</p>

The output looks quite like this:

This is the first sentence.
This is the second sentence
This is the third sentence.

Bold and Italics

Bold and italics text in HTML are created using the <b> and <i> respectively. These are used in paragraphs to make text bold and to italicized.

Bold text

Bold text is usually used to emphasize text in a document. In any document it is often times important to emphasize important information such as important research topics ,very important names and just about anything you want to put emphasis on.

Italicized text

Italicized text are used for many purposes in word processing documents to get a Italicized text in HTML use the <i> tag.

Links and External Documents

HTML Documents are usually linked together. Links can be formed by clickable texts called Hyperlinks. A document can also be linked to external documents such as stylesheets using the <link> tag.

Hyperlinks

Hyperlinks are formed by using the <a> tag, The a tag has an attributed href, which is the URL of the link.

 <a href="en.Wikipedia. org"> Wikipedia, the free Encyclopedia</a>

The code above provides a link to the Wikipedia page. It will display a link as follows. Wikipedia, the free encyclopedia The text with the tag is displayed on screen and the href has the URL.