Just Enough HTML To Be Dangerous

TIME LIMIT: 1 HOUR

You’ve already made a few webpages, so you already know some HTML. Let’s add some structure to your knowledge.

HTML stands for HyperText Markup Language. HTML’s main purpose is to mark up the content of your webpage. HTML tells browsers how to identify content for what it is. Identifying your content comes in handy for styling and interactivity later, too.

Imagine yourself talking to the browser:

Hey, this piece of data is a paragraph.

This other piece of data is a list. It’s holding a bunch of list items.

This data is a headline…let’s name it ‘big-headline’.

And so forth and so on. HTML is how you add structure to your content.

Example: The Webpage For Our Freshman English class:

Take a look at freshman-english.html:

<html>
    <head>

        <meta charset="utf-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.css"
            rel="stylesheet"
         >

        <title>English Class Books</title>

    </head>
    <body>
        <div>
            <h1 class="big-headline">
              Freshman English Class Books
            </h1>
        </div>

        <div>
            <ul class="Authors">
                <li>Tom Sawyer</li>
                <li>Journey to the West</li>
                <li>Things Fall Apart</li>
                <li>Moby Dick</li>
            </ul>

            <p>Thought of the day: Your democracy is only
            as good as your educational system.</p>
        </div>
    </body>
</html>

The First 8 Things You Need To Know About HTML

All HTML documents use the file extension .html. For example: index.html, profile.html, or freshman-english.html.
The HTML language is just a way to mark up webpage content using tags. The webpage above contains the following tags: html, head, meta, link, title, body, div, h1, h2, ul, li.
A discrete and identifiable piece of content, once properly marked up, is known as an HTML element. The website above has a head element, a body element, four list item elements, etc.
HTML elements generally (but not always) have both opening and closing tags, e.g. <title> and </title>. The meta and link elements do not have closing tags. Neither do img elements, as you will see in later chapters.
Elements with opening and closing tags can have other elements nested inside of them. For example, a list (ol for ordered lists, ul for unordered lists) will usually contain at least a few nested list items (li).
Every HTML document begins with an opening and closing html tags.
That html tag always has two children nested in it - head and body. The head is for storing or linking to metadata, whereas the raw content is marked up in the body.
The opening tag of an HTML element may include any number of attributes. The h1 tag above has a class attribute with a value of “big-headline”. The class attribute is the most commonly used attribute. It is handy, in that it helps you identify the content you will later want to style with CSS.

You now know enough about HTML to get dangerous.

Exercises

Write down all of the italicized words in this chapter in your Coding Journal. Give them definitions.
Also in your Coding Journal, make a list of the HTML tags used in this chapter.
Read “Getting Started With HTML” on the Mozilla Developer Network and use it to answer the next four questions. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
What is an empty element? Which elements in the webpage above are empty elements?
Name 5 different attributes you might find in HTML opening tags.
How do you nest HTML elements inside each other?
How does a browser’s HTML parser treat whitespace? Why do we use extra whitespace if its going to be ignored? How can we use whitespace to make nesting easier on the eyes?
Spend 5 minutes skimming “What’s In The Head” https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML. Don’t forget to star the repo!

CHAPTER 21