Week 1: Demo

HTML Basics



HTML Syntax

Hypertext Markup Language (HTML) is how we describe the structure of a web page. All of HTML is comprised of pairs of tags, with each tag name having a certain functionality to change the display or arrangement of content on the page. All HTML tags are written inside of less-than and greater-than symbols, like <html> or <body>. All HTML files should end with the .html file extension so that your computer and the server knows how to interpret them. Below is the typical structure of a basic HTML page.

<html>
    <head>
        <title>
            This is the page title!
        </title>
    </head>
    <body>
        This is visible content in the browser!
    </body>
</html>

Breaking down the example above, the first thing we should note is that all of these tags are in pairs. This is most often the case with HTML tags, that there is an "open" tag that begins the HTML element and that there is an "closing" tag that ends the HTML element. There are some HTML elements that do not need or use a closing tag, which we'll look at shortly.

The second thing we should note is that HTML is hierarchical. Each time we have a pair of open/closing tags, we are creating an HTML element. However, we can have more open/closing HTML elements inside of it. This creates nested HTML elements, which is an important feature for how we create layouts in our web pages.

All HTML pages should begin with <html> and end with </html>. In between these two tags should be where all of the rest of our HTML code is contained. There are two other pairs of important HTML tags that have been added as direct child elements inside of our <html> tag pair, and that is <head> and <body>.

In between the <head> tag pair is where we put tags that have to do with invisible qualities of our website. This can be stuff like the <title> that shows up at the top of the browser when the page loads. It can also hold <meta>, <link>, and <script> tags which we will be covering later on in the course. The important thing to remember is that nothing inside of the <head> tags will be visible inside of the browser viewport.

The <body> tag pair is what defines the HTML elements that will be visible content inside of the browser viewport. Inside of that we can have a variety of different types of tags (this is an abbreviated list and not all HTML tags).

HTML Elements


HTML5 Syntax

The currently used version of HTML is HTML5, which has a few additional tags to help define attributes of the document. This is the most appropriate and contemporary way to structure the "skeleton" of a web page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            This is the page title!
        </title>
        <meta charset="utf-8">
        <meta name="description" content="HTML Basics">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        This is visible content in the browser!
    </body>
</html>

The <!DOCTYPE HTML> tag has been added to officially define the document type. We also added a lang="en" attribute to the <html> tag to define the language of the page is in English. Then three <meta> tags have been added:

Resources