WDD 130: Web Fundamentals

An Introduction to HTML

Overview

HTML stands for HyperText Markup Language and is one of the three core technologies of the web, HTML, CSS, and JavaScript. HTML defines the structure and meaning of a web document. Hypertext refers to the way hypertext links are placed in the document that allows users to move from one page to another. Markup is a set of symbols or codes for displaying content on the Internet. Web browsers, like Google Chrome, use HTML markup and content to render pages.

"HTML (HyperText Markup Language) is the most basic building block of the web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript)." - MDN (Mozilla Developer Network Reference)

Prepare

Prepare for the assignment by carefully pondering, noting, and referencing the materials provided.

Activity Instructions

In this activity, answer the following questions about HTML and ponder the provided solutions.

  1. The following HTML elements are required for every HTML document created in this course.
    What is the purpose of each of the following HTML elements? 
    • <!DOCTYPE html>
      Answer

      "It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now." - MDN

      ✔ This is a development checklist item for all HTML documents produced in this course.

    • <html lang="en-US"> ... </html>
      Answer

      "This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document." - MDN

      ✔ This is a development checklist item and must include the lang attribute.

    • <head> ... </head>
      Answer

      "The head HTML element contains machine-readable information (metadata) about the document, like its character support, viewport sizing, title, scripts, and style sheets." - MDN

      ✔ This is a development checklist item.

    • <meta charset="utf-8">
      Answer

      Located within the <head> element. "This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8", because UTF-8 is the only valid encoding for HTML5 documents. <meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document." - MDN

      ✔ This is a development checklist item.

    • <meta name="viewport" content="width=device-width,initial-scale=1.0">
      Answer

      Located within the <head> element. "This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down." - MDN

      ✔ This is a development checklist item.

    • <title>...</title>
      Answer

      Located within the <head> element. "This sets the title of your page, which is the title that appears in the browser tab of the page. It is also used to describe the page when you bookmark/favorite it." - MDN

      The content of the title should closely match the content of the heading 1 <h1> element in the document <body>.

      ✔ This is a development checklist item and The content must be relevant to the document.

    • <body> ... </body>
      Answer

      "The <body> HTML element represents the content of an HTML document. There can be only one body element in a document. It contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else." - MDN

      ✔ This is a development checklist item.

  2. What is the basic anatomy of an HTML document?
    Answer 
    <!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Relevant Document Title</title>
  </head>
  <body>
  </body>
</html>
  3. Using the following example HTML snippet of code, technically name the numbered parts: 
    <p>A paragraph containing a hyperlink to <a href="https://www.byui.edu">BYU-Idaho</a>.</p>
    1. <p>
    2. </p>
    3. href
    4. A paragraph containing a hyperlink to BYU-Idaho.
    5. The entire snippet.
    Answers
    1. opening or start tag
    2. closing or end tag
    3. attribute - The value of this href attribute, https://www.byui.edu, specifies the anchor <a> tag's destination, which destination in this case is an absolute reference, and means hypertext reference.
    4. content or the text node of the paragraph element.
    5. An HTML paragraph Element
  4. Some elements have no content and no closing tag. They are called _______ or self-closing tags.
    An example element of this type is an image <img> element.
    Answer

    Void elements
    Example: 

    <img src="images/sample.png" alt="A sample image">

    In this class, we follow contemporary recommendations and do NOT include a closing forward slash / in the void element's tag even though doing so works in all browsers.

Optional Resources