Most text content is comprised of paragraphs, and most of the web is text; therefore,
p elements are the workhorse of the web. But don’t overuse them! Try to use them only for actual paragraphs of text. (If you’re just looking for a generic block container, then try
<p> Not much to it. </p>
Not much to it.
HTML offers six levels of headings —
h6. Choose one based on the correct semantic level of hierarchy — is it the top-level heading of the page? the secondary heading? tertiary?
Don’t choose based on the default style (size, weight) that the browser assigns — we’re going to override those awful default styles anyway.
<h1>Top-most heading</h1> <h2>Second-level heading</h2> <!-- etc --> <h6>The last level</h6>
Click <a href="https://www.google.com/">here</a> to search.
Click here to search.
If you want the link to open in a new tab, add the
Click <a href="https://www.google.com/" target="_blank">here</a> to search but not leave us.
Click here to search but not leave us.
For simple lists, you have two choices:
ul (unordered) or
ol (ordered) lists.
ul if the items have no particular order. Use
ol if the items are ordered.
By default, the browser will use bullets before each item in a
ul and will automatically number each item in an
ol (starting with 1). We can and will overwrite these default styles; most of the time we don’t want bullets at all. So choose
ol based on the semantics of the list, not on bullets.
Nested within the
ol should come one or more
li elements that contain the actual items in the list.
<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
<ol> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ol>
When you have a list of things along with a label for each thing, a
dl (definition list) might fit the bill. Each label goes in a
dt (definition term), and each piece of data goes in a
dd tag (definition description).
<dl> <dt>First name</dt> <dd>Raghu</dd> <dt>Last Name</dt> <dd>Betina</dd> <dt>Role</dt> <dd>Instructor</dd> </dl>
In HTML, the
<table> element is used to represent two-dimensional, tabular data. A simple table looks like this:
<table border="1"> <tr> <td>First</td> <td>Last</td> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table>
which would produce this1:
The things to keep in mind about tables are:
<td>(table data) element.
<td>element must reside within a row, a
<tr>must have the same number of cells, or things get out of whack.
Despite this last rule, you can, however, “merge” cells using the
<table border="1"> <tr> <td colspan="2">People</td> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table>
You can see that we’ve merged two cells in the first row together; the
colspan="2" on the first cell ensures that we don’t violate the “every
<tr> must have the same number of cells” rule.
There’s also a similar
rowspan attribute to merge vertically, although we use it much more rarely.
border="1" attribute is rarely used. It throws a quick and dirty border around all cells; I include it here to make it easy to see what’s going on in these examples. In reality, we would use CSS if we want borders. ↩