<oo>→<dh> Digital humanities

Paragraphs

Paragraphs in HTML are <p> elements.

Lists

Lists in HTML have two parts:

• A wrapper element that defines the type of list. Ordered lists (<ol>) have numbered list items; unordered lists (<ul>) have bullets, rather than numbers, before each item. (Unordered lists have an order, obviously; despite the name, these are really unnumbered, rather than actually unordered.)

• Within the wrapper, each list item is an <li> element.

For both ordered (numbered) and unordered (bulleted) lists, each individual list item is an <li> element. Note that whether the list items are preceded by numbers or bullets is typically configured not at the level of the individual item, but by whether you choose <ol> or <ul> as your wrapper. For example, the following code produces an ordered (numbered) list:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

To change it to an unordered (bulleted) list, change the wrapper from <ol> to <ul>. The <li> elements inside are the same for both types of lists.

Headings

There are six levels of headings in HTML: <h1>, <h2> … <h6>. The first of these is very large and very bold, and they get progressively smaller and lighter. They are intended to be used hierarchically; the top-level heading on your page is typically an <h1> (and there should be only one because top-level means applies to the whole page), major subsections use <h2> as headings, etc. Don’t use heading levels just for presentational effects; use them hierarchically, and control the appearance with CSS.

Tables

Tables (<table>) in HTML consist of rows (<tr>) that, in turn, consist of cells (<td>). A table is created by using the <table> element. Do not use the @border attribute, which is invalid in HTML5 with XML syntax; table borders must be configured only with CSS. Inside the <table> element you create rows with the <tr> element, and inside the rows you create cells with the <td> element. The following code creates a two-row, three-column table:

<table>
    <tr>
        <td>First row, left-most column</td>
        <td>First row, middle column</td>
        <td>First row, right-most column</td>
    </tr>
    <tr>
        <td>Second row, left-most column</td>
        <td>Second row, middle column</td>
        <td>Second row, right-most column</td>
    </tr>
</table>

For the labels at the tops of columns in a table, use <th> (table header) tags instead of <td>; this reflects the meaning (they are headings, not data), and browsers by default will render <th> elements as bold and centered, which is a natural way to label a column. There are additional attributes that you can use to create cells that span multiple columns or mulitple rows.

Inline elements

The preceding elements are all block-level. which means that they don’t normally nest within one another. That is, paragraphs, lists, headings, and tables typically begin on new lines and end before the next block begins. There are also inline elements, which typically occur inside block-level elements. In our experience, the most useful inline elements are:

1. <em> and <strong>: emphasis and strong emphasis, respectively. These are typically rendered in browsers as italic (for <em>) and bold (for <strong>). We prefer to use these semantic elements when the semantics are relevant, and to use CSS when the italics or bolding don’t represent emphasis or strong emphasis.

   HTML also has <i> and <b> elements, which represent italic and bold, respectively. These elements are presentational, rather than structural, and HTML markup should normally be used for structure, with presentation controlled by CSS.

2. <a>: link. A string of text tagged as the element <a> serves as a clickable link, and the target is specified as an @href attribute. For example:

   <a href="http://dh.obdurodon.org">click here</a>

   will create a string of text that reads click here and that, when clicked, will take the user to the specified address.

Generic blocks and inline spans

There are times when you may need to demarcate a portion of your document solely to associate style with it using CSS. For those purposes HTML provides a generic block element (<div>) and a generic inline element (<span>). You can use <div>, for example, to contain several paragraphs to which you want to assign the same CSS, and you can use <span> to assign CSS to a few words in the middle of a paragraph that don’t naturally fit the other available inline elements.