HTML 5 Programming and Web development/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.