HTML COMPONENTS

Let's talk about HTML.

HTML stands for Hyper Text Markup Language. HTML is the language base for all shareable content on the Worldwide Web.

An HTML document MAY CONTAIN:

  1. HTML for the document content
  2. CSS(Cascading Style Sheets) for styling the page
  3. Javascript code for providing additional functionality

Of these three, HTML is the only one that MUST be there for a page to work. CSS and Javascript are desirable but optional.

COMPONENT STRUCTURE

At minimum, an HTML 5 document must have the following structure:

  1. a !DOCTYPE statement to declare the document type
  2. a html section that contains the entire document to be shared.
  3. a head section that contains information ABOUT the page.
  4. a body section which displays information to be read within the browser.

This completes the required parts of a HTML 5 page. There is a great deal to be said about each section. However, that is the component basis of a HTML page.

DOCTYPE SECTION

A !DOCTYPE statement declares the type on HTML being used. currently we are on HTML version 5. The method for version 5 is quite simple: simply include
<!DOCTYPE html> at the very beginning of a document.

HTML 5 did eliminate a LOT of technical difficulties, but the other versions may be used. For instance, let us suppose you wanted to use a variant of HTML 4. The writer of this article would recommend against this practice, but it is possible to do so.

Here is the declaration for using HTML 4.01. Notice that it is much more complex.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

After much searching and reading, I found no reasons to use HTML 4.01 over 5.0. However, one is likely to see the HTML 4.01 document declaration on HTML documents that were written during an older time but still function. These documents have not had their code upgraded but still work on more modern browsers.

So it is entirely possible you may see this in older but functioning code. The recommendation of this writer is to simply continue reading the page.

Note that there can be only one Doctype statement per HTML document.

HTML SECTION

The html area serves as a container for the entire document. It is where the whole document is kept in storage. It should be noted that a language element should always be included with the html tag to assist search engines.

example: <html lang="en"></html>

The html section is the root section of a document. This will become important on the introduction of Javascript to add functionality to a document. In the beginning it is important to understand that this is where the document sits.

Mostly it is simply important to know that the <html> </html> tags must be included, and where they must be placed.

Note that there can be only one HTML section per document.

DOCUMENT HEAD

The head of a HTML document contains information which is ABOUT the document. This section does not contain content, that goes into another section. The information in the document head helps servers and browsers access and understand the document to make it readable to computer systems.

The information placed within the HTML document head is placed between <head> </head> tags.

Information types in the document head will include:

  1. the document title (<title>page title goes here</title>)
  2. document metadata - used for media queries and search engines
  3. links to other documents (<link href="URL">)
  4. internal CSS code (<style>CSS goes here</style>)
  5. internal Javascript code (<script></script>)

As is demonstrated here, the document head is a very busy and important part of a HTML document.

There can be only one Head per HTML document.

BODY SECTION

The Body section of a HTML document contains the actual content of a HTML page. This content may contain words, images, audio files, video files, multimedia files, and/or links to other pages and files outside of itself.

The content in the Body section is placed between <body></body> tags. There can be only one Body per HTML document.

The content in the Body section will likely be structured in one of 2 ways.

  1. within a series of <div></div> tags, using id="ID" and class="CLASSNAME" as locators.
  2. using semantic tags, using id="ID" and class="CLASSNAME" as locators.

An old practice exists using tables to align HTML content. This practice is out of favor in HTML 5 completely due to the more sophisticated application of CSS, and due to the confusion it creates in working with data. CSS is also its own topic.

Understanding the use of Body content is also its own diverse skill.

Note that in each html page, there can be only one body.

DOCUMENT CONCLUSION

The information in this document should be enough to understand basic page structure and to begin using HTML. Other purposes may require more information.

None of this information is original. It is all taken from the HTML information provided at: