HTML Introduction

Introduction

HTML is the language that your browser reads when it shows you a webpage. It is a variant of XML. It makes the actual content that you see, but also can contain visual styling information (typically in the form of an external CSS file) and also can have an in-browser (client-side) programming language called JavaScript.

Bare Minimum Example

<!DOCTYPE html>
<html>
  <head>
    <title>Minimal</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Tag Structure

Tags are put on either end of something to describe the content between the tags. Since HTML is visual, think of a tag as a box drawn around whatever is inside of it. The outermost tags are <HTML>, <HEAD>, and <BODY>. The <HTML> tag simply says that the contents are HTML. It is the very outermost box on the screen. The <HEAD> tag is invisible. It summarizes the contents (like title and keywords) and also lists files the page needs like stylesheets and scripts - both of which can alternatively be embedded into the actual HTML file if desired instead of being a seperate file. The <BODY> tag is where the actual content that you see on in the browser window goes. It can contain images, text, and other containers.

Basic Tags

<p> - Paragraph

Paragraph tags are useful for providing that spatial seperation between paragraphs. To make a new line, use the self-closing <br /> tag. However, a paragraph is not a line break. the distance between the paragraphs is often a ratio of the line height, like 0.5 lines or 1.5 lines. In print, paragraphs also are indented - a style that can be modified with the text-indent CSS property. So, separating paragraphs by using a separate set of tags more flexible than using some number of line breaks.

<img /> - Image

The image tag is self-closing, which is why it requires the trailing slash. The URL of the image goes in the "href" attribute, and the alternative text if the image cannot be loaded goes in the "alt" attribute.

<img src="http://imgs.xkcd.com/comics/interblag.png" height="432" width="400"
 alt="An XKCD comic about blog names" />

<strong> - Bold

The strong tag makes text bold. Also, the <b> tag can be used, but it is considered outdated for some reason. Example:

<p> ... to <strong>boldly</strong> go where no man has gone before!</p>

<em> - Italics

The emphasis tag makes text italicized. The <i> tag can be used to make italics, but is also weirldy obsolete. Example:

<p><em>Emphasize</em> makes italics for some reason</p>

Lists

Lists are occasionally used in the body of text for readability, but in websites they are more commonly used for hierarchical (multi-level) navigation. As a general rule, lists should be incomplete sentences and not end with a period. At the very least, the sentence completeness should be consistent throughout the list.

<li> - List item

To make a single list element, wrap some text with <li> tags. This element must be within a list container. The type of container will decide whether there should be bullet points or numbers in front of the list item.

<ul> - Unordered list container

An unordered list element contains list items that have no particular order. This is the most common type of list. The default style applies a different kind of bullet point for each tier of the unordered list.

<ol> - Ordered list container

An ordered list element contains list items that must be in a particular order. it is primarily used for procedural lists that describe a chronological process (a step by step) or it can be used for rankings (a top 10).

The starting number can be chosen by the start attribute ex: <ol start="10">

Example Result

Follow This Tutorial
- Discover that it is easy
- Tell your friends
???
Profit

Example Code

<ol>
<li>Follow Tutorial
  <ul>
    <li>Discover it is easy</li>
    <li>Tell friends</li>
  </ul>
</li>
<li>???</li>
<li>Profit</li>
</ol>

Tables

The easiest way to learn to make a table is by example, but first here is a quick description of all the table related tags:

<table> - the container for the whole table
<thead> - the top area of the table (for categories)
<th> - a table heading cell
<tbody> - the main area
<tr> - a table row
<td> - a table cell
<tfoot> - the bottom area (for totals)
<caption> - a caption or title for the table

Example Result

Example Data Table
Sample ID	X	Y
1	5000	100
2	6000	200
Average	5500	150

Example Code

<table>
  <thead>
    <tr>
      <th>Sample ID</th><th>X</th><th>Y</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>5000</td><td>100</td>
    </tr>
    <tr>
      <td>2</td><td>6000</td><td>200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td>Average</td><td>5500</td><td>150</td></tr>
  </tfoot>
  <caption>Example Data Table</caption>
</table>

Selectors

Selectors are a way to identify an element in the page. They do nothing in a pure HTML page, but are almost necessary if you want to use CSS or JavaScript along with the page.

Identifier (unique)

An id attribute must be unique - the only one on the page with that name. They are particularly useful for JavaScript, since the browser provides a way to easily find an element given an ID, but finding a class is slower and harder.

IDs are prefixed by a # (pound) when used in CSS.

The identifier is specified with the id attribute. For example: <img src="/logo.png" id="logo" /> assigns the image the #logo identifier. It should not have spaces or hyphens.

Class (categorical)

A class can be either unique or assigned to multiple elements on the page.

classes are prefixed by a . (period) when used in css.

The class is specified with the class attribute. Multiple classes can be specified in a single class attribute by using spaces. A class may have a hyphen. For example: <p class="comment new">Hello</p> is a paragraph that is both in the .comment class and .new class.

Invisible Tags

It is often extremely useful to organize portions of the page using invisible style-less tags, then define a style specific for the ID or class. In reality, any tag can be made to behave like any other tag by overriding enough styles, but that would be wasteful and difficult to develop.

<div> - Division Block

Div tags are blocks by default. This means that they take up all of the available width and push anything after it to below. They are easier to space between other blocks. Many times these are used to section areas of the page like headings, sidebars, footers, and pages.

<span> - Text

Span tags are inline by default. So, they only take up the space they need and can be used inline with text. For example, <strong>, <em>, <a>, and <img /> are all inline by default. These are mostly useful for highlighting sections of text.

Evan Boldt Thu, 02/28/2013 - 10:54