Skip to main content
Engineering LibreTexts

2.3: Document Structure Tags and A Simple Web Page

  • Page ID
    27533
  • \( \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}}\)

    An HTML document is divided into two main sections, the head and the body. The reason for this division is that the head is to contain metadata, and the body is to contain the information to be displayed on the web page.

    To understand this difference, it is important to understand the meaning of the term metadata. According to Dictionary.com, the meta prefix means: “a prefix added to the name of something that consciously references or comments upon its own subject of features” 6. Hence metaphysics is a physics about physics, a meta-analysis is a study of studies, etc.

    Metadata is what its name implies, data about the data on a web page. It defines how the page is to interpret the data which it will process. For example, functions that are used in a web page are defined in the head. How to handle events and interpret the CSS tags are also defined in the head. Anything that is used to define the behavior of the page is in the head of the document.

    As important as what is in the head is what is not in the head of the HTML document. The head should not output any information (or data) to be placed on the web page. Functions and other structures defined in the head should return strings to be printed in the body, and not printed to the page in the head. If the statement is defining something to be rendered on the page itself, it does not belong in the head.

    This implies (correctly) that the body of an HTML document should contain anything that is rendered and placed on the web page. Any text to be displayed, images to be rendered, or forms to be processed belong in the body of the document. And again, the body should not contain any metadata such as functions, CSS, or code to handle events.

    Nothing in HTML enforces this policy, but there are few good reasons to violate it. And when the data in the head and body are mixed, it generally shows that the programmer did not have a clear concept of what the page is to do.

    In the Document Structure, the <title> tag is shown as metadata. This is because the title is what appears on the tab in the browser, and not rendered on the page.

    Program 3 is a simple HTML web page to illustrate the concepts covered so far. Note that the program uses the large heading (<h1>), and paragraph (

    ) block tags, and the <image> tag, which have not been covered. As has been stated before, this text is not to be a text on learning html, CSS, JavaScript, or any other language or program. It intends to provide enough detail to allow a motivated intermediate programmer, specifically students doing research with myself, enough background to start that research. A complete list of HTML tags can be found at:https://www.w3schools.com/tags/, and many tutorials exist on how to use them in web pages. Readers interested in more functionality of the tags can easily look them up on the WWW7. But it is expected that the readers of this text are sufficiently advanced that they can research and learn the implementation details of this type of material.

    Enter Program 3 is entered into a file with a “.html” extension. Note that the file must have some form of a .html (e.g. .htm, etc.) extension for the browser to recognize it as an html file. Place a jpeg picture (any picture) into a file named dog.jpg, and open the file in a browser such as Chrome, Firefox, Safari, IE, or MS Edge 8. You should get a page similar to Figure 2-2.

    Program 3 – First HTML Web Page
    
    <html> 
        <!--
            Author:  Charles Kann
              Date:        5/17/2017
              Purpose: A first example of an HTML program 
        -->
        <head>
            <title>First HTML Web Page </title>
        </head>
        
        <body>
            <h1>First page</h1>
            

    This is a first page of text, and shows how to insert a picture of a dog into a page. </p> </body> </html>

    In this program, comments in html begin with a (<!--) tag and continue until a (-->) tag. There is a comment at the start of this document to provide a preamble comment for the file. The need for file preamble comments, and commenting code correctly, is stressed in every introductory programming course I have ever encountered. However, it seems as though students believe such commenting is not useful, only applies to introductory classes and/or the first language they learned. They throw out these lessons as soon as they think they can safely get away with it. That is why at every level student programs need to be graded on commenting, and a poorly commented program by a senior should be given an F, even if it works. Commenting is not something to be avoided. It is always good practice, and it will be good practice in web development also.

    Figure 2 – Output from the first Web Page

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

    2.3.1 Quick Check

    1. What symbol is used to start an HTML tag. What symbol is used to end an HTML tag.
    2. What 4 tags should you use in all HTML documents?
    3. How do you close an HTML block tag? How do you close an empty tag?
    4. What is a tag? What is an attribute?
    5. What tags in the web page?
    6. What are document structure tags?
    7. What tags should be present in all web pages? What are they used for?
    8. Give some examples of tags that have attributes. What are the attributes?
    9. What happens to text that spans across multiple lines in the HTML source file?
    10. What do you think the &lt; and &gt; symbols do? What other symbols do you think are often specified this way in HTML.

    6 https://www.dictionary.com/browse/meta?s=t
    7 In my experience, the best search engine by far for looking up information when programming is Google. Other search engines tend to assume a context for the terms and bring up a lot of noise pages not related to programming.

    8 For simple HTML, the choice of the browser matters very little, though each browser will likely render the page differently. When beginning JavaScript, the browsers are very different, and some do not implement the JavaScript standard correctly, and will fail on valid JavaScript code. I suggest using the latest Chrome or Firefox browsers, and all of the material in this text has been tested to work with Chrome.


    This page titled 2.3: Document Structure Tags and A Simple Web Page is shared under a CC BY license and was authored, remixed, and/or curated by Charles W. Kann III.

    • Was this article helpful?