Complete 2024 Web Development Bootcamp

Dr. Angela Yu

Back to HTML Index Page

 

HTML Basics
What is HTML

HTML is an acronym that stands for HyperText Markup Language. An HTML page (also known as a webpage), consists of a series of "nested" elements that define how data is presented on the webpage.

These elements usually, but not always, consist of an opening tag, and a closing "tag" that defines the element. What we mean by usually, is that some elements are considered "self-closing, meaning that they do not require a "closing" tag.

To define the element, the opening and closing tags are contained within "less than" and "greater than" symbols, like so:

  • <openingTag>data here</closingTag>

Here are a few example:

  • <p>This defines a paragraph</p>
  • <b>This is BOLD text</b>
  • <a>This defines an ANCHOR element</a>
Notice how these have both opening, and closing tags. As we mentioned above, some elements are considered "self-closing" and do not required a closing tag. Here are some examples of these:
  • <img src="" alt=""> this defines an image element
  • <br> this defines a line break
Notice that these do not require a "closing tag". More information about HTML Elements can be found here:

HTML Basics

Now that we know what HTML elements are, we can now discuss the basic HTML structure. HTML coding is basically a nested structure. For example a <ul> element defines an unordered list. The coding would look like:

  • <ul>
    • <li>list item 1</li>
    • <li>list item 2</li>
    • <li>list item 3</li>
  • </ul>
Notice the opening/closing tags, but also notice how the "line items" are "nested within" the unordered list parent element. This "nesting" is the basic structure for HTML Code.

HTML Structure

Now we can define the Basic HTML Structure. An HTML page consists of three basic parts:

  • The Declaration
  • The Head Section
  • The Body of the webpage

If you open a new empty HTML page in VS Code, you can press [sh + 1], press enter, and the basic HTML structure will be generated for you. Or you can enter it manually, but it should look something like this:

  • <!DOCTYPE html>
  • <html lang="en">
  •  
    • <head>
      • <meta charset="UTF-8">
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">
      • <title>Document</title>
    • </head
    •  
    • <body>
      • page data goes here ...
    • </body
    •  
  • </html>
Notice the opening and closing tags here. Also notice the "nesting structure" of the coding. Let's break this all down.

<!DOCTYPE html> is defining this as an HTML page (as opposed to a CSS page, or a JS page, or any other typ of page).

<html lang="en"> this is defining the coding as html and setting the default language to english. Notice that this is an opening tag and that there is a corresponding closing tag at the bottom of the page.

The <head> section is where we define different aspects of data that are relevant to this webpage. Also notice that this section is contained within opening and closing tags. In this example:

  • - we are defining this page to use the UTF-8 character set to display all characters.
  • - meta name="viewport" is setting up the page to be "scalable" to different screen size outputs, which we will discuss in-depth when we get to CSS and Media Queries.
  • - <title> allows us to define a title for the page which is displayed in the browser tab for our page.
  • - this is also where we would put links to external files such as CSS files and Script files.

<body> is where we include all of our HTML coding for display of data, to our webpage. It is also contained within opening and closing tags.

Final Notes

One final word about HTML here. HTML is but one of three major pieces of modern webpage infrastructure. The two other key components being CSS and JavaScript.

    • HTML is essentially the data for a webpage. The words, pictures, headings, whatever information that you want to display. You can do some basic formatting with html but usually, it is the data, or information that goes into the HTML page.
    •  
    • CSS or Cascading Style Sheet is the "styling" of the webpage. CSS sets the fonts, the sizes, the colors, the width and height of different elements. CSS sets all of the "Look and Feel" of the webpage.
    •  
    • JavaScript runs all of the "functionality" of a webpage. If you want to process an input, read or write from a data base, and many other possibilities, JavaScript is the "engine" behind the scenes.


Back to Top