Web Basics
HTML Part 1

Dr. Greg Bernstein

Updated: August 20th, 2019

Getting Started with HTML


  1. Getting Started with HTML

  2. What’s in the head? Metadata in HTML.

  3. HTML text fundamentals.

  4. Creating hyperlinks.

  5. Document and website structure

Markup Languages

  1. HyperText Markup Language (HTML)
    • We’ll only use HTML5
    • Other versions: HTML4, XHTML
  2. Consists of: Elements and Content
    • Elements can be nested
    • Elements can have attributes

Elements and Content

Element and Content (from MDN)

Nesting Elements

<h1>All About Cats</h1>
<p>My cat is <strong>very</strong> grumpy.</p>

What Can You Nest?

Most of the rules about what elements can contain correspond to what you would expect. However malformed pages may not show up consistently across browsers. Use the free W3C Markup Validation Service to check you documents.

Section 4 of the HTML5.2 standard contains the precise definitions of all the HTML elements, but we will generally not need this level of detail.

Elements and Attributes

Element and Attributes (from MDN)
Element and Attributes (from MDN)

Two Fundamental Attributes

  • id and class are attributes that we can assign to any HTML element

  • An element can have only one (or no) id and it must be unique within the HTML document

<h3 id="NextBigThing">A heading with id</h3>
<p>Just a paragraph</p>
<p id="OnlyOne">Paragraph with an id</p>

class Attribute

  • An element can have an arbitrary number of classes assigned to it.
<h3 class="story">My Story</h3><!--a single class -->
<!-- to add multiple classes use the following syntax-->
<p class="story lead">Here is the lead paragraph.</p>
  • We will use ids and classes extensively with CSS and when using JavaScript to interact with a web page.

Document Outline

<!DOCTYPE html>
<html lang="en"> <!-- English -->
        <title>An Empty HTML5 document</title>
    <!-- I'm an HTML comment -->
    <body> <!-- Nothing here yet. -->

The HTML <head>


  • Always use a <title> element
  • This shows up partially in the browser tabs
  • Fully shows up when hovering over the tab

Meta Data

  • Character encoding
    • <meta charset="utf-8">
  • Info for Search Engines html <meta name="description" content="A course on web development for computer science majors...">
    • Search Engine Optimization (SEO) is outside our scope.

Including Stuff

  • Favorite Icon html <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  • CSS files html <link rel="stylesheet" href="my-css-file.css">
  • JavaScript files html <script src="my-js-file.js"></script>

Text Fundamentals

Headings and Paragraphs

  • Paragraphs (only one type)
<p>This could be a paragraph.</p>
  • Headings (six types)
<h1>My Book</h1>
<h2>My First chapter</h2>
<h3>Maybe a section</h3>

Semantics & Structure

  • Semantics ↔ Meaning
    • This thing is a heading (meaning)
    • This thing is bold (style)
  • Structure in Pages
    • functions: navigation, buttons, menus
    • summaries, captions, figures, tables

Unordered Lists

<li>Fanatic FreeWave</li>
<li>Mike's Lab Slalom</li>
<li>Mike's Lab LXII Formula</li>
<li>Mike's Lab LX Mod for Foiling</li>

Ordered Lists

<li>Maui Sails TRX 9.3</li>
<li>Maui Sails TRX 10.0</li>
<li>Maui Sails TRX 11.0</li>

Lists within Lists

<li>Mike's Lab Slalom</li>
    <li>Maui Sails TRX 6.6</li>
    <li>Maui Sails TRX 7.7</li>
<li>Mike's Lab LXII Formula</li>
    <li>Maui Sails TRX 9.3</li>
    <li>Maui Sails TRX 10.0</li>
    <li>Maui Sails TRX 11.0</li>

Emphasis and Importance

  • Emphasize things with <em>things</em>
  • Make things important with <strong>things</strong>
  • Not italic, bold, or underline (though these are changing)

Inline and Block Content

  • Elements such as <em>, <strong>, <a> are inline content
  • Elements such as <h1>-<h6>, <p>, and lists are block content
  • Block content does not sit on the same “line” as other content.


<p>My para.</p><p>Your para.</p><p>our para.</p>

Absolute URLs

Points to a location defined by its absolute location on the web, including protocol and domain name.

Example: “http://www.grotto-networking.com”

Relative URLs

Points to a location that is relative to the file you are linking from

Examples: “home.html”, “../css/style.css”

We’ll use these as much as possible!

Elements within a Document

  • An element with an id attribute can be linked to
<h2 id="Foiling">All About Foiling</h2>
<p>Blah, blah, blah</p>
  • Link to the above with either
    • <a href="#Foiling">see foiling</a> same page
    • <a href="pageName.html#Foiling">see foiling</a> different page

Open in a new Tab

To open the linked page in a new tab use the following:

<a href="http://someurl.edu" target="_blank">my link</a>

The value of the target attribute is key!

Document Structure

More Structure!

Web sites can have:

  • Headers (not to be confused with <head> or headings <h2>)
  • Navigation bars
  • Sidebars
  • Main content
  • Footers

Main Content

<main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn’t be nested within other elements.


<article> encloses a block of related content that makes sense on its own without the rest of the page (e.g. a single blog post.)


<section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality. It’s considered best practice to begin each section with a heading;


<aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.)


<header> represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it’s a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings.)


<footer> represents a group of end content for a page.

Structure in Practice

  • You do not need to use all these all the time!
  • Many web older sites don’t use any of these.
  • Most came with HTML5
  • In older web sites you will see instead lots of <div>

Non-semantic Wrappers

<span> is an inline non-semantic element, which you should only use if you can’t think of a better semantic text element to wrap your content

<div> is a block level non-semantic element, which you should only use if you can’t think of a better semantic block element to use

More on spans and divs

We’ll use <span> and <div> more when we get into CSS. Particularly when we use CSS Frameworks such as Bootstrap or Pure.

Breaks and Rules

  • HTML ignores white space including line breaks
  • Use <br> (empty element) for a line break
  • Use <hr> (empty element) for a horizontal rule
    • We’ll see more techniques with CSS borders