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 div
instead.)
Examples:
<p>
Not much to it.
</p>
Produces:
Not much to it.
HTML offers six levels of headings — h1
through 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.
Examples:
<h1>Top-most heading</h1>
<h2>Second-level heading</h2>
<!-- etc -->
<h6>The last level</h6>
Produces:
Examples:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Evolution_of_a_Tornado.jpg/1024px-Evolution_of_a_Tornado.jpg">
Produces:
Examples:
Click <a href="https://www.google.com/">here</a> to search.
Produces:
Click here to search.
If you want the link to open in a new tab, add the target="_blank"
attribute:
Examples:
Click <a href="https://www.google.com/" target="_blank">here</a> to search but not leave us.
Produces:
Click here to search but not leave us.
For simple lists, you have two choices: ul
(unordered) or ol
(ordered) lists.
Use 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 ul
or ol
based on the semantics of the list, not on bullets.
Nested within the ul
or ol
should come one or more li
elements that contain the actual items in the list.
Examples:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Produces:
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
Produces:
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).
Examples:
<dl>
<dt>First name</dt>
<dd>Raghu</dd>
<dt>Last Name</dt>
<dd>Betina</dd>
<dt>Role</dt>
<dd>Instructor</dd>
</dl>
Produces:
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:
First | Last |
John | Doe |
Jane | Doe |
The things to keep in mind about tables are:
<td>
(table data) element.<td>
element must reside within a row, a <tr>
element.<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 colspan
attribute:
<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>
produces:
People | |
John | Doe |
Jane | Doe |
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.
The 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. ↩