2.2: Standard HTML Tags

Last updated
Save as PDF

Page ID: 27532

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

There are 4 HTML tags that are considered standard for all web pages. These tags are the <html>, <head >, <title>, and <body> tags. A strict HTML5 web page is required to have these 4 tags, and many IDE’s will automatically insert these 4 tags in a page for you when you start an HTML page. Since these 4 tags are always recommended for every web page, I personally keep a template, shown below, that I copy when I begin all web pages.

Program 2 – HTML template

<html>
    <head>
        <title>Please change this to the title of your page </title> 
    </head>
    <body>
    </body>
</html>

This template code can be represented as a top-down tree, as shown below. In this tree the html tag is used to contain 2 elements, the head and the body. Likewise, the head section contains the title, and as we will see shortly, the head and the body sections will contain many other HTML elements. Thus, we will call these 3 tags container tags. The title only contains a block of text, so it is a block tag.

Screen Shot 2020-07-03 at 4.25.45 PM.png

These four tags (html, head, title, and body) are special in that they define the structure of an HTML document and are called Document Structure tags. This will be covered more fully in the next section. But first there are some points to be made about how to structure HTML files.

In the file in Program 2, note that each container tag (html, head, and body) is indented to show the hierarchical structure of the document representing the tree in Figure 2.1. This is not required by the HTML processor, as the processor is just looking at strings of instructions and text and ignoring any program format. However, indenting makes it easier for the developer and maintainer of web pages to understand what is going on in the program⁵.

The second thing I always recommend writing html code is to end all container tags when the beginning tag is entered. This means when <head> is entered, the </head> is immediately entered. This is the automatic behavior of many IDEs. The reason to enter a close tag when opening a container tag is to enforce boundaries on the ideas and concepts that are being expanded in the container. This does not make sense to many novices, who seem to see ideas as unstructured information that starts at the top of the document and just streams to the end. Novice ideas often appear (to me) to be a jumble of thoughts. They do not see a purpose in creating boundaries or structure to express of idea. This is true in all areas of academia, including unreadable papers and documentation. This is why indenting, and container boundaries are so important to enforce a structured way of presenting the ideas. And why a basic course in CS, which teaches this structuring, can be important for students of any major.

But since this concept of structuring ideas is such an enigma to students, I give a practical reason for entering the enter the closing tag when the opening tag is entered. If the closing tag is not immediately entered, it is likely to be completely forgotten and lead to other problems. Though the best reason for students seems to be so they don’t lose points on a test.

⁵ I make it a point to never help a student with poorly formatted code, as it is frustrating to me to try to understand, and simply insults my sensibilities. The student must format it correctly, then I will help them work on their programs. The most useful outcome of this policy is the vast majority of the time is it results in a comment from the student, “never mind, I figured it out”. Poor formatting nearly always represents confusion about the bounds of specific content and fixing the formatting fixes the confusion.