HTML 5 Programming and Web development/HTML 5 Elements

HTML Tags edit

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 edit

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 edit

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 edit

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 edit

Note this is just a short list of elements:

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

Example of a well formed HTML document edit

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.