HTML 5 Programming and Web development/HTML 5 Elements

From Wikibooks, open books for an open world
Jump to navigation Jump to search

HTML Tags[edit]

In HTML a tag is created by putting the tag names in angle brackets like this: <Tag> The word in brackets, in this case Tag,is the Tagname.HTML 5 along with the other versions of HTML, have special tag names that we will learn about throughout this book. An example of an HTML 5 tag is b.This tag creates a bold text and it is written like this.

<b>Bold text</b>

The output would look like this:
Bold Text

End Tag[edit]

An end tag is the tag that comes at the end of the element.In an end tag the element's name is preceded by a slash(/). An example of an end tag is the </b> tag used in the previous example. Reasons for using an end tag include:

  • To signify the end of an element's content.
  • To give the document the a good layout structure.
  • To enable nested elements.

Empty tags[edit]

Empty tags are tags which have no content.For example.

<b></b>

This tag has no content in it so therefore it is an empty tag.A more appropriate way to write an empty tag is:

<b/>

By omitting the end tag and putting the slash at the end of the start tag instead. The most commonly used empty tags in HTML are:

<br/>-linebreak
<hr/>-horizantal rule
<input/>-HTML 5 input element.
<meta/>-meta information element

The HTML Element[edit]

The HTML Element is everything from the start tag to the 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 Elements 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,when this happens it forms a nested element for example:

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

NB.New line character is ignored in HTML 5 So

<b>
This is
A multiline
Line 
Text.
</b>

Would actually render like this: This is a multiline text And would therefore be a single line text.To achieve multi line we actually use the line break <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>
  </head>
  <body>
  </body>
</html>

The <!doctype html> is the Document type Definition which we will learn about subsequently.