We can use the <ul> tag to create an unordered list, which is a list of text items. Within the unordered list, the items are created using the <li> (list item) tag, as children of the unordered list. By default, the items in the list are displayed with bullet points, but this can be changed with styling.
+
Unordered Lists
<ul>
<li>This is an unordered list</li>
-<li>The <code>li</code> tags come between two <code>ul</code> tags
+<li>The <code>li</code> tags come between two <code>ul</code> tags</li>
</ul>
@@ -22,14 +24,17 @@
Ordered Lists
+
+
Similarly, we can make an ordered list using the <ol> tag, containing <li> children. In an ordered list, the items are numbered or lettered to label their order. By default, items in an ordered list will be numbered starting at 1.
+
Ordered Lists
<ol>
<li>This is an ordered list</li>
-<li>The <code>li</code> tags come between two <code>ol</code> tags
-<li>Notice that the <code>li</code> tags are used for both.
+<li>The <code>li</code> tags come between two <code>ol</code> tags</li>
+<li>Notice that the <code>li</code> tags are used for both.</li>
</ol>
@@ -38,38 +43,59 @@
-
The ol tag can also have a type attribute. The type attribute can be one of the following values
+
We can use the type attribute of the <ol> tag to control how the list is labeled.
-
1 This will cause the list to be numbered with numbers
+
type="1" will cause the list to be numbered with numbers (this is the default, if the type attribute is not used).
-
A This will cause the list to be ordered with upper case letters
+
type="A" will cause the list to be ordered with upper case letters.
-
a This will cause the list to be ordered with lower case letters
+
type="a" will cause the list to be ordered with lower case letters.
-
I This will cause the list to be ordered with upper case roman numerals
+
type="I" will cause the list to be ordered with upper case roman numerals.
-
i This will cause the list to be ordered with lower case roman numerals
+
type="i" will cause the list to be ordered with lower case roman numerals.
-
Try it yourself.
+
Try it yourself, by changing the value of the type attribute below.
+
+
+
The type Attribute
+
+
+<ol type="a">
+<li>This is an ordered list</li>
+<li>Try changing the value of the type attribute</li>
+<li>To see how the labeling of the list items changes</li>
+</ol>
+
+
+
+
+
+
+
+
Description Lists
+
+
Another type of list we can use is a description list. A description list is used to create a list of terms or items and their descriptions. We create a description list using the <dl> tag. Within the list, the terms are creating using <dt> tags, followed by a <dd> tag containing the description of the term or item.
+
Description Lists
<dl>
-<dt>Description list</dt><dd>A list for defining terms</dd>
-<dt>dt</dt><dd>The <code>dt</code> tags are for the term</dd>
-<dt>dd</dt><dd>The <code>dd</code> tags are for the description</dd>
+<dt>HTML</dt><dd>A markup language used to structure content for webpages.</dd>
+<dt>Browser</dt><dd>An application for viewing and interacting with websites.</dd>
+<dt>Bowser</dt><dd>A large turtle-like creature that is frequently harassed by a plumber.</dd>
</dl>
@@ -81,7 +107,7 @@
Nesting Lists
-
Lists can be inside of other lists. Too. This is very much true of most HTML tags.
+
We can include list elements within other list elements, to create nested lists or sublists. This is true of many HTML elements; they can often be nested in similar ways.
Nesting Lists
@@ -106,21 +132,22 @@
Tables
-
Tables have many uses, you can use them for organizing data as you normally would in a report where you have rows and columns of numbers or other information, but you can also use tables invisibly to influence how your page is displayed. In the early days of html it was common to use a table to create a two column page layout. We can still do that but now it is much more acceptable to use CSS for that purpose.
+
+
We can use a table to organize and display data in rows and columns. As you'd expect, a table can contain numbers or text, but it can also contain a wide variety of other HTML elements, including images, lists, additional tables, and more!
Here is a complete example that illustrates the use of the following table specific tags
-
table – This is the main tag for a table
+
<table> is the main tag for a table, and contains the rows as children.
-
tr – every row in a table starts with a tr tag
+
<tr> creates a row in the table. It will have table entries (or data) as children.
-
td – every column in a row is delineated by a td tag
+
<td> creates an entry within a row of a table. Dividing a row into <td> elements divides the row into columns
-
th – You can use the th tag in place of the td tag in the first row to make headings
+
<th> is used instead of <td> when an entry is a heading label rather than data item. In the example below, you see that "Number" is a heading, so we use the <th> tag. Typically, the first row of a table will have headings.
@@ -168,26 +195,14 @@
-
There are many attributes you can use with the various table tags.
+
The following attributes allow us further control over the structure of our tables.
-
-
table
- * width - you can specify a width as a percentage or as a number of pixels. This attribute is useful for right now, but it's use is not encouraged, as you are better off to use CSS to control the look of your table. We say that this attribute is deprecated
- * border - you can add borders to your tables as in the example above, but this tag is deprecated as well.
- * The spacing between the cells of the table. Also deprecated.
-
-
-
td
- * colspan – if you have a particular table where you need an extra wide column in some rows you can make a cell of your table span more than one column using the colspan attribute. Its value is the number of columns.
-
-
-
tr
- * rowspan – If you have a particular table where you need an column to span multiple rows you can make a cell of your table span more than one row using the rowspan attribute. Its value is the number of rows.
-
+
colspan is an attribute of <td> or <th>, which can be used to make an extra wide entry spanning more than one column. Its value is the number of columns.
+
rowspan is an attribute of <td> or <th>, which can be used to make an extra tall entry spanning more than one row. Its value is the number of rows.
-
Experiment with a table. What kinds of tags can you include inside each td? Can you make a table inside another table?
+
There are additional attributes that can be used to control the appearance of tables. However, many of them are deprecated, and it is preferred to control those aspects of tables using CSS.
Audio
@@ -205,11 +220,11 @@
-
The controls attribute provides start/stop/fast-forward/rewind buttons for the listener. The source tags inside the audio tag allow you to provide several different audio formats. This is because different browsers support different kinds of audio The browser will go through the list, in order, until it finds a format it understands, or else, it will replace the controller with the message at the end.
+
The controls attribute provides start/stop/fast-forward/rewind buttons for the user. The <source> tags inside the <audio> tag allow you to provide several different audio formats. This is desirable because different browsers support different kinds of audio. The browser will go through the list, in order, until it finds a format it can use. If it does not find a format it can play, it will replace the controller with the message at the end.
Video
-
Embedding video in your webpage allows you to link to various files containing movies.
+
Similarly, you can embed video in a webpage as follows.
Video
@@ -222,10 +237,37 @@
-
The controls attribute provides start/stop/fast-forward/rewind buttons for the listener. The source tags inside the video tag allow you to provide several different video formats. This is because different browsers support different kinds of video The browser will go through the list, in order, until it finds a format it understands, or else, it will replace the controller with the message at the end.
+
The controls attribute provides start/stop/fast-forward/rewind buttons for the user. The <source> tags inside the <video> tag allow you to provide several different video formats. The browser will go through the list, in order, until it finds a format it supports. If it does not find a format it can support, it will replace the controller with the message at the end.
- IFrames
-
IFrames allow you to embed a webpage within another webpage. The activecode examples in this book use an iframe to allow you to experiment with the html, by creating a page within a page.
+ Inline Frames
+
An Inline Frame, or iframe, allows you to embed a webpage within another webpage. The activecode examples in this book use an iframe to allow you to experiment with the html, by creating a page within a page. The <iframe> element is used with the following attributes to create an iframe.
+
+
+
+ The src attribute allows you to specify the webpage to embed.
+
+
+
+
+ The title attribute is used to provide a clear description of the content for screen readers.
+
+
+
+
+ The width and height attributes are used to specify the dimensions of the iframe. They can be specified in pixels or as percentages.
+
Some tags in HTML are designed for you to use in creating a logical structure for your page. As you have probably noticed many sites have a navigation bar in the header, and have some information about the page in a footer. Many web pages have sidebars, and of course blogs and many news sites are divided into articles. Scholarly web sites are divided into parts and sections.
-
You have probably also noticed that it is pretty easy to tell the different parts of a web page apart because they have a distinct look to them. In order to give different sections different looks we need to provide some structure within our markup. This is done by using structural tags as follows:
+
Some tags in HTML are designed for you to use in creating a logical structure for your page, and to describe their role in that structure. You may have noticed that many sites have a navigation bar in their header, and they have information about the page in a footer. Many web pages also have sidebars, and some webpages like blogs and news sites may be divided into articles. Scholarly web sites may be divided into parts and sections.
+
The word semantic refers to the conceptual meaning of language, and by writing semantic HTML we use tags to communicate the meaning and roles of elements. We can use semantic HTML tags to label sections or parts of webpages with their roles, and this will allow us to give them different visual appearances once we incorporate CSS. By labeling parts of a page in this way, we also enable screen reader users to navigate our webpage effectively, since they can identify the different parts based on the HTML structure rather than needing to rely on visual cues. The following tags allow us to structure our webpages using semantic HTML.
-
article
+
An <article> is a self-contained document, page, application, or other content. It contains the information required to be used or distributed independently from the rest of the webpage (for example, it could be copied and included in a different webpage and still make sense).
-
aside
+
An <aside> is content that is tangentially or indirectly related to the main content.
-
details
+
A <details> element provides an expandable item that the user can open or close to show or hide the content. The <details> element contains a <summary> element as a child. The content of the <summary> element is always displayed, while the <details> element can be expanded or collapsed to show or hide the rest of its content.
-
figcaption
+
A <figure> is used for self-contained content such as pictures, diagrams, charts, and illustrations. A <figure> should contain a <figcaption> child element, which displays a caption describing the content of the figure. A <figure> should also contain an <img> or other child element. You can think of a <figure> as a way to group an image with its caption into one unit.
-
figure
+
A <footer> contains footer information for a document, which is typically displayed at the bottom of the page. It will often contain information such as the author of the page, copyright information, contact information, and related links.
-
footer
+
A <header> contains content introducing a page, and it may also contain navigation links. It will often contain a heading element <h1> and a paragraph element <p> with some additional information, such as the author of the page.
-
header
+
The <main> element contains the primary content of the webpage. This content should be unique to the particular page, and should not include navigation bars or footers that would be repeated between pages on the same site.
-
main
+
The <mark> tag is used to identify text to be marked or highlighted, often containing a word or a few words within a paragraph.
-
mark
+
A <nav> element is used to contain the links that are used to navigate between pages within a website.
-
nav
+
A <section> is used to define a section of a webpage. For example, if you're writing a webpage including course descriptions for a computer science major, you might have a <section> element for each course. Note that you should only use the <section> tag if there is not a more descriptive semantic tag that would fit; that is, don't use a <section> for an <article>, for example.
-
section
-
-
-
summary
-
-
-
time
+
A <time> is used for a specific time (or datetime). Browsers can use this element to add reminders to a user's calendar, and it can also be helpful to search engines.
@@ -79,17 +73,17 @@
Historical Note
-
All of the tags mentioned above were added to the HTML5 standard. Before HTML5 there were only two of these invisible structural tags. You will see many examples of the use of these tags:
+
All of the tags mentioned above were added to the HTML5 standard. Before HTML5 there were only two of these invisible structural tags. You may encounter these tags, especially in older webpages:
-
div
+
<div>
-
span
+
<span>
-
These tags served the same purpose, usually by using an id or class attribute to indicate their semantic purpose.
+
These tags also delineate blocks within a page, and often use an id or class attribute to indicate their semantic purpose. However, for screen reader accessibility, it's important to only use the <div> or <span> tags if there is no semantic HTML tag that fits the purpose of your content.