Block-Level Tagselements stack vertically (as if a linebreak were inserted before and after)

<p>

paragraph

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras fringilla diam ante, sit amet maximus lorem aliquam ac.
Ut sagittis odio lacus, in luctus leo commodo nec.</p>

<h1>

level 1 heading

The primary (most important) heading on the page.
It should "say what the page is", and will usually be the same as the page title.
There should be exactly one (no more, no less) of these on every page.

<h1>The Grapes of Wrath</h1>

<h2>

level 2 heading

Section heading (says what a certain section of the page is about).
Pages are usually comprised of multiple sections or areas, and the h2 tag is used to give a title to each of those sections.
There will often be multiple h2 tags throughout a page.

<h2>Appetizers</h2>

<h3>

level 3 heading

Sub-heading (for sub-sections within page sections).
Not all pages will require h3 tags, but many will.
When h3 tags are utilized, there will usually be many of them on the page.

<h3>Today's Weather</h3>

<h4>

level 4 heading

Sub-sub-heading (for sub-sections within sub-sections within page sections).
Most pages don't need this level of heading (although some do -- but at that point it's probably a good idea to think about splitting up sections into multiple pages).

<h4>Green-Colored Products</h4>

<ol>

ordered list

Numbered list of items.

Each list item must be an <li> tag.

<ol>
	<li>Item #1<li>
	<li>Item #2<li>
	<li>Item #3<li>
</ol>

<ul>

unordered list

Bulletpoint list of items.

Each list item must be an <li> tag.

<ul>
	<li>First bulletpoint item<li>
	<li>Second bulletpoint item<li>
	<li>Third bulletpoint item<li>
</ul>

<li>

list item

List items must be in an <ol> or <ul>.

<ul>
	<li>This is an item in the list<li>
	<li>This is another item in the list<li>
</ul>

<hr>

horizontal rule

Horizontal line that separates portions of content within a section.

<div>

division

Divs don't do anything on their own -- instead they allow you to group other elements together for layout and styling purposes.

<div class="news-article">
	<h2>Something Happened</h2>
	<div class="excerpt">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere porro laudantium assumenda maiores minima ad quos, magni! Ab, ipsam dolorum! Dolore adipisci officia temporibus esse eum ratione aut veritatis blanditiis!</p>
		<a href="article123.html">Read More</a>
	</div>
</div>

Inline-Level Tagscontent lines up horizontally (like a line of text)

<b>

bold text

This is normal text, <b>and this is bold text</b>

<i>

italic text

This is normal text, <i>and this is italicized text</i>

<s>

strike-through text

This is normal text, <s>and this text will be "crossed-off"</s>

<br>

line break

This is one line. <br> This is another line.

<a>

link

Links are what make the web the web!

There are several different kinds of links (depending on the "href"):

  1. External links (link to another website)

    href starts with "http://" or "https://"

    <a href="http://colum.edu">Columbia College Chicago</a>
  2. Internal links (link to a different page in the same website)

    • If the page you are linking to is in the same folder as the current page:
      <a href="anotherpage.html">Go to page</a>
    • If the page you are linking to is inside a sub-folder:
      <a href="thefoldername/thepage.html">Go to page</a>
    • If the page you are linking to is "outside" (above) the current page's folder:
      <a href="../whatever.html">Go to page</a>

    Note: make yoru life easier by only using lowercase-letters-and-dashes in your folder/filenames (no spaces or uppercase letters).

  3. Anchor links (link to another place in the same page)

    This is a 2-step process:

    1. Create the clickable link.
      <a href="#something">Jump to something</a>
    2. Add an id to another element on the page.
      <h2 id="something">Something</h2>

      Note: you can add the id to any kind of tag (not just <h2>'s).

    The href in step 1 is the id from step 2 with a hashtag (#) before it.

  4. Email links (open the user's mail app)

    href starts with "mailto:"

    <a href="mailto:somebody@example.com">Send me an email</a>

Opening links in a new tab/window

You can make any type of link open in a new tab or window by adding the attribute target="_blank". For example:

<a href="https://google.com" target="_blank">Google Search (opens in new window)</a>

Use this sparingly! It is generally considered "rude" to force links to open in new windows. Better to just let the user choose how they want to open their links.

<img>

image

<img src="yourimage.jpg" alt="description of what the image portrays">

Some things to note about images:

  • The <img> must always have an "alt" attribute (to help visually impaired users understand the content). If you are too lazy to write the alt text, leave the attribute in the tag with empty quotes: <img src="logo.gif" alt="">
  • Only certain image file types will work in web browsers:
    • .gif - good for line drawings and simple illustrations with solid colors; can have transparency; can be used for simple animations ("animated gifs")
    • .jpg - great for photographs (although can get blocky if compression quality is low); can not have transparency
    • .png - good middle-ground between gif and jpg; good for more complex illustrations; okay for smaller photos but not ideal for larger ones (because file size will be larger than .jpg); can have transparency
    • .svg - for vector graphics; not compatible with some older browsers
  • Use Photoshop (for .jpg and .png) or Illustrator (for .gif and .svg) to export images (via "Save for Web").
    • If given the choice, use the "sRGB" colorspace (e.g. ensure the "Convert to sRGB" box is checked in the "Save for Web" window).
    • For .png's, Photoshop offers two options: PNG-8 and PNG-24. PNG-8 is comparable to a .gif, whereas PNG-24 results in higher quality images (especially for transparencies).
    • When deciding which file type to save your images as (and which compression quality to use), remember that there is no perfect answer -- rather it is always a trade-off between image quality versus file size. If the image quality is high, then the file size will be high (so the page might take a long time to load). If the image quality is low, it will not look as good but the page will load faster. In general, try to stay under 100k for large images, under 40k for medium images, and under 10k for small images/icons.
  • The "src" attribute of the <img> tag is similar to the "href" attribute of the <a> tag. You can link to an external image by using a url that starts with "http://" or "https://", or you can link to an internal image by using the folder/file name.
    <img src="somepicture.png" alt="">
    <img src="thefoldername/anotherpicture.png" alt="">
    <img src="../thatpicture.png" alt="">

<span>

span

Spans don't do anything on their own -- instead they allow you to apply CSS styles to inline content.

here is some unstyled text, <span class="my-styled-text">and here is some styled text (whatever is declared for ".my-styled-text" in the CSS)</span>

Useless TagsDon't use these tags (they are just listed here for reference)

<u> - underline

Don't use this, because people expect underlined text to be a clickable link.

<em> - emphasis

No need to use this, because it is basically the same as <i>.

<strong> - strong

No need to use this, because it is basically the same as <b>.

<h5> and <h6> - level 5 and 6 headings

It is extremely rare to need 5 or 6 levels of headings.

If you find yourself reaching for these tags, you might want to consider breaking up your content into separate pages so it will be easier to find and navigate.