Sample HTML Page

The main purpose of this page is to just give you examples of how different tags work in HTML. In this doc are all the basic tags you'd need to learn as a beginner (and for the course BIMD 233). This page only has HTML in it. No CSS or Javascript, yet.

Heading 1 (<h1>): The main title for the page, usually.

I used to duplicate the <title>, which is found in the <head> section of the document, a lot since, on the user side, the only time they see whatever was specified in <title> is in the tab label in their browser.

Heading 2: Use headings to denote importance and sections

Heading 3: They're hierarchical

Headings are treated very similarly to how they're treated in Google Docs. Like... really, very, exactly similarly... :P

Here's a paragraph. <p> tags include space above and below the text element.

<div> tags are sort of like paragraphs, except without extra space above and below. Technically, divs are used to mark a block of text so that you can then apply a style or treatment to the text. (See how there's no space between this block and the next one?)

It used to be that you'd only use paragraph tags, but they threw in div tags around HTML4 or so... In some web apps, like Canvas, if you hit enter while composing a message or discussion post, it'd create a new paragraph and treat it with space above and below, but then this totally screws up when you try to copy-paste it into an email... Different apps do it differently, I would guess because the developers decided to treat carriage returns as either creating a new <p> tag or a new <div> tag.

Paragraph tags denote a particular meaning for the block of text it surrounds, letting people (and your web browser or a web app--aka the semantic web) know what kind of text it's dealing with.

Within a block of text, if you want to tell the web browser that a specific section of text should be treated differently, like say you want to style it a particular way, you can use the <span> tag.

Let's say you need to throw in a line-break, but content-wise the next line is still considered part of the previous stuff in the same <div> or <p> block.
You could use the <br> tag to do that.

There's also a way to mark off a new section using the <hr> tag. It used to just add a horizontal rule (which is why it's called hr), but now it plays a content mark instead of a stylistic mark. You could then use CSS to tell the document how to render the <hr> tag. Without that style specified, though, it still just renders as a horizontal rule:

^ See the horizonal rule? Anyway, continuing on...

Below is an unordered list that shows off how to mark specific words or phrases for emphasis or highlighting in a document. Technically, you could use <span> for all of the different styles you want to apply, but this is a quick way to marking different text as different categories of content.

<strong> lets you mark text as important (usually bolded).
<em> lets you mark text that needs emphasis (usually italicized).
You could do the same as the above with <b> bold and <i> italics tags, but those are discouraged now since they mark particular styles.
It'll make more sense why when we get into CSS.
There's a bunch of more ways to markup text (just consult one of the references). Bolding and italicizing are the main ones people find they need to use.

By the way, you can also make an ordered list (as in, the bullets are replaced by numbers):

Other text markup that might be handy include _<sub>
and ^<sup>.

There's also definition lists.: (using <dl>, <dt> and <dd> tags); Honestly, I've never seen anyone actually use them...; I suppose it'd be handy if you're making a reference sort of page or something.

For quoting someone or something,

you could use the <blockquote> tag for a paragraph.

Or use the <q> quote tag for inline quotes.

This is a table

Huzzah!

This table is styled completely with HTML. For example, I set the border width to "1" and I made the two columns equally wide.

Most of the attributes for the table element have been deprecated with HTML5. In fact, most ways of styling text using HTML have been deprecated in favor of stylesheets, but modern browsers tend to be backwards compatible...

Back in the day, you'd use tables to slice up images and make certain parts of the images clickable or change if you hover your mouse over them or something. This is not how tables are meant to be used, though. HTML should generally be used to mark different parts of the document as different content parts, not stylistic but content-related.

Here's some text that uses an <a> anchor tag to link to a site.. um... How about Snopes. That way you can debunk some fake news that permeates Facebook.

There's a lot to the anchor tag that's used for hyperlinks, like linking to local pages (index.html) vs linking to an outside website (markdangerchen.net), so consult the references for proper syntax.

You can also reference other sorts of resources (URIs) in anchor tags, not just hyperlinks (URLs). For example, you could reference an email address (markchen@uw.edu).

And here's an image:

an image of a cat sitting on a partially collapsed awning with the caption How to spot a dragon using an illusion spell

Screen readers for the visually impaired read the alt attribute in an image tag, so it's generally a good idea to fill that in. If the image is purely decoration and not content, you can include a blank or null value (alt="") for your alt attribute, and screen readers will ignore the image. Additionally, when you hover your mouse over an image, it displays the text in the title attribute, so you may want to fill that in as well.