CSE 154

HTML Tags Reference

Structure of an HTML Page

<!DOCTYPE html>
<html>
  <head>
    information about the page
  </head>
  <body>
    page contents
  </body>
</html>

HTML

The <head> tag describes the page and the <body> tag contains the page's content

The DOCTYPE tag tells the browser to interpret our page's code as HTML5, the lastest/greatest version of the language

You can find a starter template here!

Common head Tags

Tag Description
<title> Page title (shown in browser tab)
<meta> Meta information tag
<favicon> Icon placed in the browser tab and bookmarks

Page Title: <title>

<title>
  Chapter 2: HTML Basics
</title>

HTML

Placed within the <head> of the page

Displayed in the web browser's title bar/tab and when bookmarking the page, otherwise not visible to the user as page content

Web Page Metadata: <meta>

information about your page (for a browser, search engine, etc.) 

<meta charset="utf-8" />
<meta name="description"
      content="Course website for CSE 154" />
<meta name="keywords" content="web programming, CSE154" />

HTML

Placed in the head section of your HTML page

meta tags often have both the name and content attributes

  • The meta tag with charset attribute indicates language/character encodings (usually utf-8)

Favorites icon ("favicon")

<link href="filename" type="MIME type" rel="shortcut icon" />

HTML (template)

<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />

HTML (example)

favicon favicon

The link tag, placed in the head section, attaches another file to the page

  • In this case, an icon to be placed in the browser title bar and bookmarks

Note for IE6: Doesn't work; must put a file favicon.ico in the root of the web server (info)

Common body Tags (1/2)

Tag Description
<p> Paragraph tag
<h1> ... <h6> Heading tags
<em>, <strong> Emphasis (italic) and strong (bold) tags
<abbr> Abbreviation tag
<hr /> Horizontal rule tag
<br /> Line break tag
<a> Anchor tag (page links)
<img /> Image tag

Common body Tags (2/2)

Tag Description
<ul>, <ol> Unordered and ordered list tags
<li> List item tag (used as children of <ul> or <ol> list tags)
<dl>, <dt>, <dd> Definition list tags
<blockquote>, <q> Block and inline quotation tags
<code> Computer code tag
<pre> Preformatting tag

Paragraph: <p>

paragraphs of text (block)

<p>
  You're not your job.
  You're not how much money you make in the bank.
  You're not the car you drive.
  You're not the content of your wallet.
  You're not your khakis.
  You're not the all-singing, all-dancing crap of the world.
</p>

HTML

You're not your job. You're not how much money you make in the bank. You're not the car you drive. You're not the content of your wallet. You're not your khakis. You're not the all-singing, all-dancing crap of the world.

output

Headings: <h1>, <h2>, ..., <h6>

headings to separate major areas of the page (block)

<h1>University of Whoville</h1>
<h2>Department of Computer Science</h2>
<h3>Sponsored by Micro$oft</h3>

HTML

University of Whoville

Department of Computer Science

Sponsored by Micro$oft

output

More heading examples

Phrase elements : <em>, <strong>

em: emphasized text (usually rendered in italic)
strong: strongly emphasized text (usually rendered in bold) 

<p>
  HTML is <em>really</em>, <strong>REALLY</strong> fun!
</p>

HTML

As usual, the tags must be properly nested for a valid page

These tags should have semantic purpose, not just to style text with italicized/bold format (we'll learn how to accomplish that in CSS!)

Abbreviations: <abbr>

an abbreviation, acronym, or slang term (inline) 

<p>
  Safe divers always remember to check their
  <abbr title="Self-Contained Underwater Breathing Apparatus">
  SCUBA</abbr> gear.
</p>

HTML

Safe divers always remember to check their SCUBA gear.

output

Horizontal rule: <hr />

a horizontal line to visually separate sections of a page (block)

            <p>First paragraph</p>
<hr />
<p>Second paragraph</p>
<hr>
<p>Third paragraph</p>

HTML

First paragraph

Second paragraph

Third paragraph

output

This is the first example we've seen of a void (self-closing) tag: more on HTML Element types

Line Break: <br />

forces a line break in the middle of a block element (inline)

<p>
  The woods are lovely, dark and deep, <br />
  But I have promises to keep, <br />And miles
  to go before I sleep, <br />And miles to go before
  I sleep.
</p>

HTML

The woods are lovely, dark and deep,
But I have promises to keep,
And miles to go before I sleep,
And miles to go before

output

Warning: Don't over-use br (guideline: >= 2 in a row is bad, better to not use any)

br tags should not be used to separate paragraphs or used multiple times in a row to create spacing

Links (Anchors): <a>

links, or "anchors", to other pages (inline)

<p>
  Search for it on <a href="http://www.google.com/">Google</a>!
</p>

HTML

Search for it on Google!

output

Uses the href (Hypertext REFerence) attribute to specify the destination URL

  • Can be absolute (to another web site) or relative (to another page on this site)

Anchors are inline elements; must be placed in a block element such as <p> or <h1>

Use the target="_blank" attribute to make it open in a new tab!

Images: <img>

Inserts a graphical image into the page (inline)

<img src="img/cse154logo.png" alt="CSE154 Course Logo" title="Logo"/>

HTML

CSE154 Course Logo

output

The src attribute specifies the image URL

HTML5 also requires an alt attribute describing the image, which improves accessibility for users who can't otherwise see it

More About Images

<a href="https://courses.cs.washington.edu/courses/cse154/20sp/">
  <img src="img/cse154logo.png" alt="CSE154 Course Logo" title="Logo"/>
</a>

HTML

CSE154 Course Logo

output

If placed in an <a> anchor tag, the image becomes a link

The title attribute is an optional tooltip (on ANY element, hover over this one!) BUT the title attribute doesn't always work well for mobile and accessibility, so its usage and future are debated

Relative vs. Absolute Paths for Links and Images

Relative: paths change depending on the page of the link.

  • Linked files within the same directory: "filename.jpg"
  • Linked files within a subdirectory (e.g. "img") "img/filename.jpg"

Absolute: paths refer to a specific location of a file, including the domain.

  • Typically used when pointing to a link that is not within your own website.
  • Example: https://validator.w3.org/

Unordered List: <ul>, <li>

ul represents a bulleted list of items (block)
li represents a single item within the list (block) 

<ul>
  <li>No shoes</li>
  <li>No shirt</li>
  <li>No problem</li>
</ul>

HTML

  • No shoes
  • No shirt
  • No problem

output

Ordered List: <ol>

ol represents a numbered list of items (block) 

<p>Steps to start a webpage:</p>
<ol>
  <li>Choose a purpose</li>
  <li>Sketch a wireframe</li>
  <li>Markup content with HTML tags</li>
  <li>Add style with CSS!</li>
</ol>

HTML

Steps to start a webpage:

  1. Choose a purpose
  2. Sketch a wireframe
  3. Markup content with HTML
  4. Add style with CSS!

output

We can make lists with letters or Roman numerals using CSS (later)

Nested Lists

A list can contain other lists:

<ul>
  <li>Drinks:
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
    </ul>
  </li>
  <li>Bakery:
    <ul>
      <li>Poptarts</li>
      <li>Bagels</li>
    </ul>
  </li>
</ul>

HTML

  • Drinks:
    • Coffee
    • Tea
  • Bakery:
    • Poptarts
    • Bagels

output

Definition list: <dl>, <dt>, <dd>

dl represents a list of definitions of terms (block)
dt represents each term, and dd its definition 

<dl>
  <dt>HTML</dt>
  <dd>
    Markup language for content
  </dd>
  <dt>CSS</dt>
  <dd>
    Language for styling pages
  </dd>
  <dt>JavaScript</dt>
  <dd>
    Language for adding interactivity to
    websites
  </dd>
</dl>

HTML

HTML
Markup language for content
CSS
Language for styling webpages
JavaScript
Language for adding interactivity to websites

output

Quotations: <blockquote>

a quotation (block)

<p>As Lincoln said in his famous Gettysburg Address:</p>
<blockquote>
  <p>
    Fourscore and seven years ago, our fathers brought forth
    on this continent a new nation, conceived in liberty, and
    dedicated to the proposition that all men are created equal.
  </p>
</blockquote>

HTML

As Lincoln said in his famous Gettysburg Address:

Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

output

Inline quotations: <q>

a short quotation (inline)

<p>Quoth the Raven, <q>Nevermore.</q></p>

HTML

Why not just write the following?

<p>Quoth the Raven, "Nevermore."</p>

We don't use " marks for two reasons:

  1. HTML shouldn't contain literal quotation mark characters; they should be written as &quot;
  2. Using <q> allows us to apply CSS styles to quotations (seen later)

Computer Code: <code>

a short section of computer code (usually shown in a fixed-width font) 

<p>
  The <code>ul</code> and <code>ol</code>
  tags make lists.
</p>

HTML

The ul and ol tags make lists.

output

Preformatted Text: <pre>

a large section of pre-formatted text (block)

<pre>
     Steve Jobs spoke loudly
      reality distortion
       Apple fans bow down
</pre>

HTML

     Steve Jobs speaks loudly
      reality distortion
       Apple fans bow down

output

Displayed with exactly the whitespace / line breaks given in the text

Shown in a fixed-width font by default

How would it look if we had instead enclosed it in code tags?