Lesson 5	HTML tags
Objective	Describe the most commonly used HTML tags.

Commonly Used HTML Tags

HTML documents require four special container tags: HTML, HEAD, TITLE, and BODY. They also require one empty tag: DOCTYPE. These five tags tell the browser that the contents of the file are in HTML and not plain text. If the file does not contain these tags, the browser will read the file as a plain text file and will not display it properly as a Web page. You will learn more about these required HTML tags in the series of images below.

1) The DOCTYPE empty tag is used to indicate the version of HTML used. It is good practice for HTML.

2) The HTML container tag tells the browser where the HTML code begins and ends.

3) The HEAD container tag contains information about the document, such as its creation date and author.

4) Required HTML Tags 4 — 4) The TITLE container tag lists the title of the document to appear in the browser title bar.

5) The BODY container tag encloses the text, graphics, hot links, and other content to be displayed by the browser.

HTML5 Page Elements

HTML5 offers new elements for better document structure:

Tag	Description
<article>	Defines an article in the document
<aside>	Defines content aside from the page content
<bdi>	Defines a part of text that might be formatted in a different direction from other text
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<figcaption>	Defines a caption for a <figure> element
<figure>	Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for the document or a section
<header>	Defines a header for the document or a section
<main>	Defines the main content of a document
<mark>	Defines marked or highlighted text
<menuitem>	Defines a command/menu item that the user can invoke from a popup menu
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links in the document
<progress>	Defines the progress of a task
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<section>	Defines a section in the document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time
<wbr>	Defines a possible line-break

The DOCTYPE empty tag is used to indicate the version of HTML used. It is good practice for HTML.
The HTML container tag tells the browser where the HTML code begins and ends.
The HEAD container tag contains information about the document, such as its creation date and author.
The TITLE container tag lists the title of the document to appear in the browser title bar.
The BODY container tag encloses the text, graphics, hot links, and other content to be displayed by the browser

Other commonly used HTML Tags

The HTML standard contains specifications for formatting text, displaying graphics, and embedding a variety of multimedia files, such as sound files. There are also specifications for creating and formatting tables. The table below lists the tags used most frequently to perform these functions. You can also download this table as a PDF via the Resources page.

Attributes

Attributes are added within a tag to modify or extend its functionality. For example, the <BODY> tag can be used with the attribute BGCOLOR to specify the background color for your page , as follows:

<BODY BGCOLOR="WHITE">

It is best to enclose all attributes in quotation marks. However, quotes are mandatory only in attributes that require any character other than a letter or a number. So technically, the word WHITE in the example does not require quotation marks. The attribute #FFFFFF, which is also used to specify color, would require quotation marks because # is neither a letter nor a number. Some attributes require a value; others can stand alone. Multiple attributes may be added within a tag. While the order of the attributes is not important, they must be positioned after the tag name. In the next lesson, you will learn about the purpose of META tags and how to use them.

Sequence Required for HTML Tags

The following section discusses the sequence of HTML tags.

Sequence Required for HTML Tags

DOCTYPE
HTML
HEAD
TITLE
BODY

HTML5 is not just the latest version of the HTML specification. It is also an umbrella term that describes a set of related technologies that are used to make modern, rich web content.The three most important technologies are the 1) core HTML5 specification, 2) Cascading Style Sheets (CSS), and 3) JavaScript. The core HTML5 specification defines the elements we use to mark up content, indicating its significance. CSS allows us to control the appearance of marked-up content as it is presented to the user. JavaScript allows us to manipulate the contents of an HTML document, respond to user interaction, and take advantage of some programming-centric features of the new HTML5 elements.
The technologies used in web pages have become so interconnected that you need to understand them all to create content. If you use HTML elements without CSS, you create content that users find hard to parse. If you use HTML and CSS without JavaScript, you miss the opportunity to give users immediate feedback on their actions and the ability to take advantage of some of the new advanced features that HTML5 specifies.

The New Standard

To deal with the long standardization process and the way that the standard lags behind common usage,HTML5 and related technologies are defined by a larger number of small standards. Some are just a handful of pages focused on a very particular aspect of a single feature. Others, of course, are still hundreds of pages of dense text that cover whole swathes of functionality. The idea is that smaller groups can cooperate in developing and standardizing features that are important to them and that less contentious topics can be standardized without being held up by arguments about other features. There are some positive and negative consequences to this approach. The positives are that standards are being developed more quickly. The main negative is that it is hard to keep track of all of the different standards in development and how they relate to one another. The quality of the specifications has decreased. There is ambiguity in some of standards, which leads to inconsistent implementations in the browsers. Perhaps the biggest drawback is that there is no baseline against which HTML5 compliance can be assessed. We are still in the early days, but we cannot rely on features being implemented in all of the browsers that our users might employ. This makes adopting features problematic and requires a careful assessment of how widely adopted a standard has become.

Embracing Native Multimedia

A key enhancement in HTML5 is the support for playing video and audio files natively in the browser that is, without needing a plugin). This is one part of the response from the W3C to the dominance of plugins, and the integration between the native multimedia support and the rest of the HTML features offers a lot of promise.

The <head> Element

The first child of the root element is usually the <head> element. The <head> element contains meta data information about the page, rather than the body of the page itself. (The body of the page is, unsurprisingly, contained in the <body> element.) The <head> element itself is rather boring, and it has not changed in any interesting way in HTML5. The good stuff is what is inside the <head> element. And for that, we turn once again to our example page:

  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Weblog</title>
<link rel="stylesheet" href="style-original.css" />
<link rel="alternate" type="application/atom+xml"
title="My Weblog feed" href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml"
title="My Weblog search"
href="opensearch.xml" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>

Ad HTML 5