How To Create a Valid HTML Web Page With Elements

This article demonstrates how to create a valid HTML web page using HTML elements. Included in this tutorial are HTML code and examples.

This article was first seen on and republished from html-and-css-tutorial.com

Tutorial 1: How To Create Your First HTML Elements With Examples
Tutorial 1: How To Create Your First HTML Elements With Examples
Tutorial 3: What Are More Examples of HTML Elements and Structure
Tutorial 4: How To Use CSS (Cascading Style Sheets) To Style HTML

In the first HTML tutorial, we had a look at several HTML fragments. We also saw a few often-used HTML elements, like the h1 head element, and the p paragraph element.

The HTML fragments you saw in the previous tutorial were not complete and valid HTML documents. A few lines of text were missing to create a valid document for the web for proper rendering in a browser.

When you have completed this tutorial you will know what it takes to write a completely valid HTML file.

A Valid HTML File

The HTML examples we saw in the previous tutorial “How To Create Your First HTML Elements With Examples” are not valid HTML documents. They are HTML fragments. For those examples to become valid HTML documents you must add a few lines of code in front and after some of the fragments, you have already seen. Down below is an example of a simple valid HTML file.

<!doctype html>
<html lang="en">
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Cobb salad</h1>
    <p>Cobb salad is a tasty salad, one of my favorites!</p>
  </body>
</html>

Here I have added the necessary lines of code to the first example we looked at in tutorial one.

HTML Document Type Declaration

The first line of the example above is a document-type declaration.

<!doctype html>

Basically, the document type declaration tells the web browser what variant of HTML the document is marked up with. Over the years several versions of HTML have been defined and by stating clearly which version you are using you will avoid many potential problems when the document is rendering in a web browser.

The syntax of the HTML5 type declaration is “<!doctype html>”. It’s easy to copy this document-type declaration to your own HTML documents.

For now, when your make your own HTML documents just make sure you start the document with the document type declaration shown below:

<!doctype html>

HTML and BODY Element

Following the document type declaration, there are two new elements enclosing the HTML you saw in the initial example. First, there is the HTML element, which is the root or top-level of all other elements in the document. This element is also referred to as the root element. This is always the outermost element in an HTML file.

Below is an example of an isolated HTML element with an HTML comment included:

<html lang="en">
<!--- Document Contents --->
</html>

We notice that this element has:

lang="en"

This is the language attribute, it is also called the global lang attribute and is used to identify the given language in the file for the browsers, web crawlers, indexing databases, and search engines.

In HTML many of the elements have attributes that provide information about the element. The attributes usually come in a name/value pair. The attributes are always included in the start tag of an HTML element.

Next, is the HTML head element. This element can include other elements that direct the browser to include files locally or from other servers. Additionally, the HTML head element can include the title, metadata elements, scripts, style, and a few others types of elements. The elements used in the head element are usually hidden from the user and are not displayed in the browser. Below is an example of the head with a title element and HTML comment:

<head>
  <title>Page Title</title>
  <!--- Included other elements here, like <script>, 
        <meta>, <link>, <style> and others. --->
</head>

Then there is the body element. This element always encloses the part of the HTML document that contains visible text and images to be shown to the reader and rendered in a browser.

<body>
<!--- Contents of the file, video elements, image, elements, paragraphs, 
      and more! --->
</body>

Then enclose the main part of the document in the HTML, head, and body elements.

<html lang="en">
  <head>
  <!--- Replace this comment with head elements --->
  </head>
  <body>
  <!--- Replace this comment with body elements --->
  </body>
</html>

You already saw one small yet valid HTML document above. The important word here is VALID.

The World Wide Web Consortium has defined a set of rules for how an HTML document should be structured. These rules are not very hard to follow and you will learn the most important rules in this tutorial and the following tutorials.

Most browsers like Edge, Chrome, Opera, and Safari are forgiving and will display your HTML documents even when there are errors in them, sometimes this is not always true. Later I will show you a tool you can use to check the validity of HTML documents you write yourself.

<!doctype html>
<html>
  <head>
  <title>Page Title</title>
  </head>
  <body>
  <p>Hello, world!</p>
  </body>
</html>

This HTML document starts with a document type declaration, then follows the open tags for the HTML and head elements. The head element is then closed with a closing head element. The core of the HTML document is wrapped with a body element and included is a paragraph element with a short text. Then the open body and HTML elements are closed in the reverse order of which their open tags occurred.

That’s just about as short as you can make a valid HTML document.

Small is beautiful: The shortest valid HTML5 document

<!doctype html>
<html lang="en">
  <head>
    <title>Page Title</title>
  </head>
  <body>
  </body>
</html>

The Head and Title Elements

Previously in this HTML tutorial, we talked about the HTML and title elements. These are elements that you must include in any HTML document for it to be a complete and valid HTML document.

The head element is an element that is placed in front of the body element. The contents of the head element are other elements like the title element. Common for all the elements that may be placed inside the head element is that they say something about the document, like the title element telling the title of the document.

The text contents of the tile element are the title of the document; often displayed by the web browser at the top of the web browser window and in search engine results.

<head>
  <title>This is a page title!</title>
  <!--- Other head elements included below --->
</head>

Above I have added head and title elements as in the previous example. Can you spot the head element?

<head>
  <!--- Head elements --->
</head>

The start tag <head>and the end tag </head>.

The head element can only be placed right after the HTML start tag and before the body element start tag.

This is an example of a strict rule that governs the structure of HTML documents as defined by the World Wide Web Consortium.

Below is a visual structure of an HTML file without the doctype and title element included:

<html><head></head><body></body></html>
 ^     ^      ^     ^      ^      ^
 |     |      |     |      |      |—— HTML end tag
 |     |      |     |      |—— Body close tag
 |     |      |     |—— Body start tag
 |     |      |—— Head end tag
 |     |—— Head start tag 
 |—— HTML start tag

Summary

You now know quite a lot about HTML. In fact, you are now able to create reports, letters, diaries, recipes, and more using the HTML elements we have talked about. You can now create complete valid HTML documents ready to be published on the Web.

In this HTML tutorial, we have focused on what it takes to create valid HTML documents. The reason we stress that you should make valid documents is that valid HTML documents are much more predictable.

Documents that are valid to a user viewing the document through one of the many different web browsers available are rendered (look like) appropriately.

For an HTML document to be valid it should start with a document type declaration, followed by the HTML element, a head with a title element, and then the body element. The head element follows the HTML start tag, and must always appear fully before the body element start tag.