lesson-1-html-intro.md

Introduction to HTML

HTML is the foundation of the web

HTML is the language used to give structure to content on the web. It stands for "Hyper Text Markup Language". "Hyper Text" is "text that does special stuff". "Markup" means that text or content may be bold, italicized, a list of bullet points, a table with content, etc.

HTML is one of the three pillars of the web, along with CSS and JavaScript. it's the first type of file your browser encounters when it load up a web page, and it is responsible for connecting your CSS styles and JS functionality to the content contained in your website or app.

---

Follow along!

To start out, let's take a quick look at how your computer and browser interpret files.

1. On the desktop of your computer, create a new file named hello-world.

2. Double click on your newly created file, and it should open in a default text editor -

3. Go ahead and add some text to the file, then open it with Chrome (right click -> open with -> Chrome)
   • If you don't see Chrome as an option, you may need to click "Choose another app" and search your computer for Chrome

4. You should now be able to see your raw, unformatted text in Google chrome. The address it's pointing to is just right here on your computer!

5. Next up let's add another line to our text document

<h1>General Kenobi.</h1>

6. Our page is displaying exactly what we typed in, but what we just created was an html tag that creates a heading, and we want our browser to be able to interpret that syntax. Go ahead and edit the name of your file so that it has the extension .html.

7. Save and open your file again in Chrome, and now you should see the text has been formatted, and your html is being interpreted by the browser!

Note: if you see your file open as hello-world.html.txt, then you'll need to open your file extension settings and uncheck "Hide extensions for known file types"

8. If you want to see the html elements under the hood, you can right click on your webpage, and choose Inspect. This will open the developer tools. (We'll be using this tool a lot in the future!)

🎉🎉🎉

---

Anatomy of an HTML tag

Content

Take a look at this line of content:

Big Gulps huh? Alright! Welp, see ya later!

If we want to be able to alter that content at all, it will have to be enclosed in an html tag. Here's what that would look like wrapped in a paragraph tag.

<p>Big Gulps huh? Alright! Welp, see ya later!</p>

When the browser inteprets this HTML to be displayed, it will only output the content, like so:

Big Gulps huh? Alright! Welp, see ya later!

Your HTML tags will never get rendered (displayed) on the screen, they are basically instructions to the browser to help alter your content.

Tags

In our previous example, we used the paragraph tag, which is one of the most common HTML tags, due to there being a lot of text on the web! Let's take our example and make some more changes. What if we wanted to emphasize some of our text with bold or italics? Let's see how that would look:

<p><strong>Big Gulps</strong> huh? Alright! Welp, see ya later.</p>

Renders to:

Big Gulps huh? Alright! Welp, see ya later.

Nesting

You'll notice that the <strong> tag we used is inside of our <p> tag. This is called a nested HTML element, and it is a cornerstone of building and arranging content. Be careful of the order of your nested tags, you can end up with malformed HTML if things aren't nested correctly. When you have a lot of tags that are nesting, usually you will see HTML written like this:

<div>
>   <p>Big</p>
>   <p>Gulps</p>
>   <p>Huh?</p>
</div>

That will render the same as this does,

<div><p>Big</p><p>Gulps</p><p>Huh?</p></div>

...but it's much harder to read for a developer working on the site if it's all scrunched together like that ^.

Attributes

On a lot of web pages, you could have hundreds or even thousands of html tags. And a lot of those are probably plain old paragraph tags <p></p>. If we wanted to make one of those <p> tags unique by giving it a name that our JavaScript or CSS could access later, we could do that with an attribute. In this case the id attribute:

<p id="quotable-line"><strong>Big Gulps</strong> huh? Alright! Welp, see ya later.</p>

The syntax for HTML attributes is always the name of the attribute followed by an equal sign, and then opening and closing quotation marks that can contain different things.

Attributes help to communicate special information to the browser about your document without displaying what you typed onto the page.

---

Diagram

---

Commonly used HTML elements

There are an unlimited number of ways you could format your content and text on the web, and HTML allows for as much customization as you can imagine, but thankfully we are given some building blocks for the common ones right out of the box with HTML. Let's take a look at a few of those.

First up, let's look at the smallest possible HTML document:

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <meta charset="utf-8">
  </head>

  <body>
  </body>

</html>

That will not actually render anything to our page, but we have set up the structure of our HTML document so that we can write valid html in it.

Let's add the following elements to our example page:

Title element

The title element defines what will be displayed in the browser tab when on your page.

<title>School of Witchcraft and Wizardry</title>

Heading elements

There are 6 levels of heading elements, from <h1> to <h6>. They are rendered at different sizes, but more importantly they convey information about the page structure to search engines and users.

<h1>Wizard Stuff</h1>

---

Anchor element (link)

This will create a hyperlink to another location. Could be a web page, a file, an email address, or even a different location on the same page.

<a href="https://my.wizardingworld.com/sorting-hat">Take me to Hogwarts!!</a>

---

Lists

We can create lists in HTML with either the ordered list <ol> tag, or the unordered list <ul> tag. Ordered will be numbered (1. 2. 3...), and unordered will be a bulleted list. The lists items will be the li tag.

<ul>
  <li>Harry</li>
  <li>Hermoine</li>
  <li>Ron</li>
</ul>

---

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <meta charset="utf-8">
    <title>School of Witchcraft and Wizardry</title>
  </head>

  <h1>Wizard Stuff</h1>

  <body>
    <ul>
      <li>Harry</li>
      <li>Hermoine</li>
      <li>Ron</li>
    </ul>

    <a href="https://my.wizardingworld.com/sorting-hat">Take me to Hogwarts!!</a>
  </body>

</html>

Now our webpage will look like this:

---

Adding media

The web wouldn't be the web if it weren't for memes, gifs, images, videos and the like. Adding media to our pages is almost always something we'll want to do.

Here's what the html looks like for the lovely photograph(s) of Nickelback frontman Chad Kroeger above:

<img src="../images/nickelback.jpg" width="550px">

There are a couple special things you might have noticed about this tag in particular:

• There is no closing tag, only an opening one.
  • Part of the reason for this is that the img tag doesn't encapsulate any content, so the creators of HTML decided to leave out the closing tag to try and avoid confusion.
• There are 2 attributes.
  • Only the src attr is required, and there can also be more than just these two added to the tag. If you are ever curious about the details of an HTML tag, it's a good plan to make a habit of checking Mozilla Developer Network for their documentation on it.

Over time, you'll end up memorizing the syntax of some things, but development is about fostering a new way of thinking, not memorizing things. You will develop the skills to research, read documentation, and find pertinent answers for specific issues. Right now you are learning a broad overview of the web, so don't let yourself get lost in the weeds just yet. Your mental model will build over time, just be patient! 🤘

The web is for everyone

We want our website and it's content (like images) to be easily accessible, and easy to understand. This idea is aptly called web accessibility. There are many facets to web accessibility, and many different ways to leverage it, but for now we are going to focus on screen reader compatibility. A screen reader is a tool created to help people with low/no vision navigate their computers and browsers with a keyboard.

the term A11y is often used as shorthand for "web accessibility".

This is a topic we'll continue to explore throughout the course, and it is a mindset we want to cultivate from the very beginning.

Ok, back to our <img> tag.

If you were using a screen reader to view this:

<img src="../images/nickelback.jpg" width="550px">

You would hear something like this read to you:

The key piece there is Unlabeled image.

What a bummer. If your user is unable to make out the visible image, they are missing a huge piece of what this site has to offer, and it may even make your site unusable. To solve this, we can use the alt attribute.

Alt text

Alternative text is an attribute you can add to your image tags that gives descriptions and context for your images! If you have ever seen this on the web, you have seen alt text:

That information isn't just to provide sighted users a description of broken images, it's primary purpose is for screen readers. Let's add some good alt text to our image:

<img src="../images/nickelback.jpg" width="550px" alt="A bleached blonde man saying 'look at this photograph' while holding up said photo for you to look at.">

Which will be read as:

Now our screen reader users can get the context they need to understand the content of our site easy peasy. All we have to do is give accurate descriptions of what is in our photos.

---

Alt text is not an enhancement to the web, it is the standard. By not using it, we would be neglecting a group of users that may visit our site!

---

Your turn!

• Open up this example file on stackblitz here.

• Click the fork button near the top of the page.

  • A fork is like creating a copy of code for yourself, so now any changes you make will just affect your copy

• Open up the index.html file.

• In the head element, add a title tag right after meta.

• Add content to your title tag; anything you want!

• Add a class attribute to the html body element with the value of "content"

• Next up we'll look at the div element immediately following the h1 tag.

• Add a class attribute of "card" to it, and you should see some styling take effect.

• Now we'll look at the first image element in our html. It is the first "child" of the section element. There's an important attribute missing.

  • We need to add an alternative text attribute.

• Inside of the alt attribute, go ahead an add your own description of the image we see displayed. Pretend you are explaining the image out loud to best convey it's meaning.

• Next let's add a second img tag, inside the div with the class "small-frame". Give it a class attribute of "small-picture".

  • For this one, you can add any picture you want to it as long as there is a URL online that points to it.
  • Add your image URL to the src attribute, and then add an appropriate alt attribute with a good image description.

• Now if you don't see your small image showing up inside of the frame, there may be a small typo in one of the attributes in our html 😈. Read through it carefully and see if you can remedy it.

• Click "open in a new window" toward the top right of the page, and see your fresh html in all it's glory! You can also see the content of your title element displayed in the browser tab too!

• Once your site looks how you want it, we need to check it with a Screen Reader! Use it to navigate your images, make sure your alt text is being read, and your site makes sense!

  • Mac
    • Mac has a built in screen reader called Voice Over we can use
    • Press command+F5 to open voice over.
    • The tab key can be used to navigate important elements on the page. (this should be sufficient for your first introduction to this kind of navigating)
      • control+option+ arrow keys allows for more granular navigation.
      • control+option+space will "click" on that item.
      • control+option+shift+ up or down arrow will go into or out of content.
  • Windows
    • One of the most common (and free!) screen readers for Windows is called NVDA
    • The tab key can be used to navigate important elements on the page. (this should be sufficient for your first introduction to this kind of navigating)

If you need to check your syntax, or want to add any other html tags, don't forget to bookmark the MDN page. This will come in super handy, and it's great reference material. https://developer.mozilla.org/en-US/docs/Web/HTML/Element