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.
HTML5 Page Elements
HTML5 offers new elements for better document structure:
Defines an article in the document
Defines content aside from the page content
Defines a part of text that might be formatted in a different direction from other text
Defines additional details that the user can view or hide
Defines a dialog box or window
Defines a caption for a <figure> element
Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
Defines a footer for the document or a section
Defines a header for the document or a section
Defines the main content of a document
Defines marked or highlighted text
Defines a command/menu item that the user can invoke from a popup menu
Defines a scalar measurement within a known range (a gauge)
Defines navigation links in the document
Defines the progress of a task
Defines what to show in browsers that do not support ruby annotations
Defines an explanation/pronunciation of characters (for East Asian typography)
Defines a ruby annotation (for East Asian typography)
Defines a section in the document
Defines a visible heading for a <details> element
Defines a date/time
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 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 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:
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
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: