``
- Indicates an element of a list. This tag is used for both ordered and unordered lists.
* - Paragraph
- ````
- Creates a paragraph of text.
* - Span
- ````
- Makes a section within a set of text.
* - Table
- ````
- Creates a table of rows and columns on the page.
* - Thematic Break
- ``
``
- Adds a horizontal line between elements.
.. admonition:: Examples
The ``ol`` and ``ul`` elements create a vertical list of items. We can also
modify the appearance of the bullets.
.. list-table:: List Examples
:widths: auto
:header-rows: 1
* - Ordered
- Ordered
- Ordered
- Unordered
- Unordered
* - .. raw:: html
- First list item
- Second item
- Third item
- .. raw:: html
- First list item
- Second item
- Third item
- .. raw:: html
- First list item
- Second list item
- Third list item
- .. raw:: html
- First list item
- Second item
- Third item
- .. raw:: html
- First list item
- Second item
- Third item
.. admonition:: Note
There are multiple headings in HTML going from ``h1`` to ``h6``. The
headings get progressively smaller.
A good rule of thumb is to have only one ``h1`` in a web page. Also, do not
skip a level, since headings can always be resized.
Tag Example
-----------
Here is an example of a basic web page using three of the tags above.
.. sourcecode:: html
:linenos:
Plant-Loving Astronauts
Space Plants Are Cool
NASA discovers that plants can live in outer space.
More innovations from this discovery to follow.
.. figure:: figures/plant-loving-astronauts.png
:alt: A web page with the heading, Space Plants Are Cool, and the paragraph about NASA's discovery of space plants.
:width: 80%
Inside the ``body`` element, the ```` and ``
`` tags define a heading
and a paragraph element. Note that the ``p`` element also contains a set of
```` tags, which make the words "outer space" bold.
Attributes
----------
.. index:: ! attribute
In addition to the tag name, programmers can include extra information inside
an HTML start tag. Programmers add **attributes** to HTML tags to control and
adjust the element's appearance on the page.
Examples of attributes include:
#. The alignment of the element on the page (left, right, center, etc.).
#. The text style (color, size, font, etc.).
#. Alternate text for an image.
#. The web address that a link points to.
Place attributes inside the start tag, right after the tag name. The general
syntax is:
.. sourcecode:: html
content
We can add multiple attributes inside a tag, but they should be separated by
spaces.
.. _attributes-example:
Attributes Example
------------------
Here is the same basic web page we saw above, but with a new ```` tag.
Also, the ``
`` and ```` tags both include some attributes.
.. sourcecode:: html
:linenos:
Plant-Loving Astronauts
Space Plants Are Cool
NASA discovers that plants can live in outer space.
More innovations from this discovery to follow.
.. figure:: figures/plant-loving-astronauts-2.png
:alt: A web page with the heading, Space Plants Are Cool, and the paragraph about NASA's discovery of space plants with an accompanying picture of a flower floating in space.
The ```` tag includes the ``style`` attribute, and the value in quotes sets
the color of the text to blue. ``style`` controls other properties as well,
including alignment, font, background color, text size, etc. We will study
styling in more detail next chapter.
The ```` tag has two attributes that we will see a lot. ``src`` (for
*source*) gives the location of the image being used, and ``alt`` gives
alternate text for anyone using a screen reader. For this reason, ``alt``
should provide a short description of what is going on in the image.
.. _block-vs-inline-elements:
Block vs. Inline Elements
-------------------------
.. index:: ! block-level, ! inline
Take another look at the screenshots for the basic web pages. Notice that the
sentence, ``NASA discovers that plants can live...``, is split over two lines
in the editor, but it appears on the same line on the web page. However, the
heading and paragraph elements appear on separate lines.
The reason behind this involves the default behavior of different HTML
elements. There are two display behaviors:
#. **Block-level elements** always begin on a new line, and they take up the
full width available. Any content in these elements stretches out as far as
possible before wrapping to the next line.
#. **Inline elements** do not start on a new line. They only take up as much
width as necessary.
The ``h1`` and ``p`` elements are both block-level, so their content occupies a
dedicated space on the screen. This is why the heading and paragraph do not
appear side-by-side.
The ``b`` element is inline. Its content occupies only as much space as
necessary. This allows it to be nested inside the ``p`` element without
breaking the paragraph into separate lines.
.. admonition:: Example
By playing with the background colors, we can see the difference in behavior
for block-level vs. inline elements.
.. sourcecode:: html
:lineno-start: 6
Here Is A Heading Element
This is a paragraph element.
These are
three separate
span elements.
.. figure:: figures/block-vs-inline.png
:alt: Background colors showing the widths of block-level vs. inline elements.
The ``h2`` and ``p`` elements stretch across the entire width of the screen,
and they occupy their own, separate lines. Think of the orange and blue
shaded areas as reserved space. If we add more text to the ``p`` element, it
would fill in more of the empty blue area. However, only content for that
element is allowed inside the space.
Each ``span`` element only takes up as much space as the text requires, and
all three elements can share the same line. ``span`` is an example of an
inline element.
.. admonition:: Tip
Nest inline elements inside block-level elements, not the other way around!
.. _tags-try-it:
Try It!
-------
In the editor below, practice using different HTML tags and attributes to
change the appearance of a web page.
**First steps**:
#. The ``
`` and ``
`` elements do NOT need ending tags. Add a ``
``
tag to the end of line 9. What happens to the text in the right panel?
#. Add ``
`` tags to the end of lines 10 & 11. What if you use two of the
tags (``
``) instead of just one?
#. On line 14, add an ``
`` tag. How does the web page change?
#. Add ````, ````, or ```` tags around some of the text in the
first paragraph. Change the color of the wrapped text by including the
``style`` attribute.
#. Create an unordered list that contains at least three items. The syntax
should look something like:
.. sourcecode:: html
- Item description...
- Item description...
- Item description...
.. raw:: html
**Next steps**:
#. Change both ```` tags to ```` to make an ordered list.
a. The ``type`` attribute sets the item labels. Add ``type="A"`` inside the
```` tag. Try replacing ``"A"`` with ``"a"`` and ``"I"``.
b. The ``start`` attribute identifies where the list should begin counting.
Add ``start="5"`` inside the ```` tag. Try other numbers as well.
(Note that ``type`` and ``start`` can BOTH be in the tag at the same
time).
c. The ``reversed`` attribute flips the numbering to count down instead of
up. It does not need an equals sign. Add ``reversed`` to the ```` tag
to see what happens.
#. Now let's add a link! The syntax for the hyperlink element is:
.. sourcecode:: html
Link Text
The ``href`` attribute requires the *full* address of a website, beginning
with ``https:``. ``Link Text`` will be the words that appear as the link on
the page.
Add ``LaunchCode`` to the editor
to see this in action. Feel free to use a different web address and link
text.
Because we are using an embedded code editor, clicking the link may not work
quite right. Instead, right-click on the link text and choose *Open Link in
New Tab* to see the results of your work.
#. On line 7, add an opening ```` tag. Put the closing ``
`` tag on
line 20 (right after the second paragraph element). Nothing changes in the
view, but you just made a separate *division* (section) inside the page.
Now add ``style="text-align:center"`` inside the ``