Intro to HTML

Elements

Most of the time, you have to open and then CLOSE the element, but there are some exceptions:

Images <img>
Meta tags <meta>

Attributes

Provides extra information to the browser, like:

Where a link goes <a href="...">
Location of an image <img src="...">

The two most common attributes are class and id.

Block vs. Inline Elements

Block elements take up the full width of the page. <section>, <p>, <h1>, <div>

Inline elements only take up as much space as they need, and are often used inside block elements. <strong>, <em>, <span>

Failure! Your response was not saved.
It's really nice weather outside today.

Nesting

You can put elements inside other elements. For example:

Links inside of <li>
Images inside links

Boilerplate

Every HTML document should have the following structure:

  <!DOCTYPE html>
  <html>
    <head>
      <title>Page Title</title>
    </head>
    <body>
      <!-- Your content goes here -->
    </body>
  </html>

Semantic HTML

divs and spans are the bread and butter of HTML. You can make any website using only those and text. But try to use semantic tags where it makes sense.

Semantic tags describe the content, like <header>, <footer>, <main>, <nav>

I gave everyone full credit for the lab if you submitted it, but I do want to show my interpretation of the solution and provide an opportunity for you to ask any follow up questions.