HTML Review

Back to Curriculum Index

Goals

  • Understand the purpose of HTML
  • Be able to read through an HTML file and anticipate what the browser will render
  • Apply IDs to HTML elements
  • Create buttons in HTML

HTML

Of all of the major technologies used on the web, on either the front- or the Back-End, HTML, or Hyper Text Markup Language, is the oldest. In the beginning, the web was just a bunch of HTML documents that you wrote by hand. They had these cool things called hyperlinks that would allow a user to click on a word on one page and be taken to another page.

HTML is still an essential part of modern web applications. It holds the content and creates the structure of a webpage.

Tags, Content, Elements

HTML is made up of a series of elements. Each element is made up of at least one tag, and most have content between an opening and closing tag. We can think of many elements as containers, which store and organize other elements.

Marked up nav bar showing how elements are nested

The header/nav bar at the top of this page is written with code that looks something like this:

<nav>
  <img src="./turing-school-logo" alt="Turing School logo" />
  <ul>
    <li>Workshops</li>
    <li>Turing School</li>
  </ul>
</nav>
<h1>Welcome to Try Coding</h1>

Review: Tags, Content, Elements

Attributes

HTML attributes give us the ability to provide more information about a specific element. The code snippet we looked at in the previous section had one element with two attributes:

<img src="./turing-school-logo" alt="Turing School logo" />

The self-closing <img /> tag above has two attributes - src and alt. These are intended to be used in conjunction with the <img /> tag. src needs to tell the browser which image to display, and alt should provide text describing the image in the event the user isn’t able to access the image.

Other attributes are available to us as well. The one will we focus on today can be used with any HTML element:

  • id - an id attribute allows us to access specific elements in CSS and JavaScript. Each id can only be used once in each HTML document.

We might want to use IDs to differentiate the two <li>s in this nav bar:

<nav>
  <img src="./turing-school-logo" alt="Turing School logo" />
  <ul>
    <li id="workshops">Workshops</li>
    <li id="school">Turing School</li>
  </ul>
</nav>

NEW: Buttons

As we wrap up our review of HTML (although it may still feel very new - that’s ok!), we’ll add one more element to your toolbox: <button>.

The <button> element has an opening and closing tag, and should have content.

<button>Click Here!</button>

Try It: Buttons

Fork this CodePen, then add two buttons to the HTML. The content can be whatever you choose!

Then, add a different ID to each button.

🌶 Click here for a Spicy Challenge 🌶

Explore the input tag. Add several inputs to your page. Give each one a different value for the type attribute!


Back to Curriculum Index