<ul> Tag Examples
Examples of the ul
tag in HTML 5
Horizontal list for a breadcrumb trail
(see <ul> tag demo above)
<div> <style scoped="scoped"> ul.breadcrumb-trail { margin: 0; list-style: none } ul.breadcrumb-trail li { display: inline } ul.breadcrumb-trail li+li:before { content: "\27a2\a0" } </style> <ul class="breadcrumb-trail"> <li><a href="/">Home</a></li> <li><a href="../../tutorials/basic-html-structure.html#html-code">HTML</a></li> <li><a href="../">Tags</a></li> <li><a href="../#html-list-tags">Lists</a></li> <li><ul> tag</li> <li><a href="#examples#">Examples</a></li> <li><b>Celebrities</b></li> </ul> </div>
Even though the style is scoped, the class
attribute is included in the <ul> tag and the style selectors in case the browser ignores the scoped
attribute, which most currently do. The style that inserts the bullet uses li+li
in the selector, which requires at least two li elements and keeps the bullet from appearing before the first list item.
Entire list centered with aligned items and star-shaped bullets
(see <ul> tag demo above)
<div style="width: 30%; margin: 0.5em auto; text-align: center"> <style scoped="scoped"> ul.star-shaped-bullet { margin: 0; list-style: none; text-align: left } ul.star-shaped-bullet li:before { content: "\2606\a0" } </style> <ul class="star-shaped-bullet"> <li>Tina Fey</li> <li>Jane Lynch</li> <li>Kyra Sedgwick</li> <li>Andie MacDowell</li> <li>Laura San Giacomo</li> <li>Clare MacIntyre-Ross</li> <li>Kimberly Williams-Paisley</li> </ul> </div>
Again, the class
attribute is included in the <ul> tag and the style selectors in case the browser ignores the scoped
attribute, which most currently do. On the <div> tag, the text-align: center
style is used to center the list, along with auto
in the second position of the margin
style, which keeps the left margin from being forced to a fixed width. The text-align: left
style for the li element keeps the list items left justified. If the div element was omitted and the text-align: center
style was coded on the <ul> tag then each list item would be centered and the bullets would be staggered.
Some of the HTML character codes that are useful as bullets are:
Character | Decimal | Hex | Name |
---|---|---|---|
▸ | ▸ | ▸ | black right triangle |
◆ | ◆ | ◆ | black diamond |
◇ | ◇ | ◇ | white diamond |
○ | ○ | ○ | white circle |
● | ● | ● | black circle |
☆ | ☆ | ☆ | white star |
✓ | ✓ | ✓ | check mark |
✗ | ✗ | ✗ | handwritten X |
✤ | ✤ | ✤ | 4-point florette |
✶ | ✶ | ✶ | 6-point star |
❍ | ❍ | ❍ | circle with shadow |
❏ | ❏ | ❏ | square with shadow |
➔ | ➔ | ➔ | right arrow |
➢ | ➢ | ➢ | white arrowhead |
➤ | ➤ | ➤ | black arrowhead |
Search Engine Friendly Breadcrumb Trail Example
Some search engines, particularly Google, may include a breadcrumb trail in their search engine results if the links include microdata properties for a breadcrumb trail.
Search Engine Results
HTML <a href> Tag
Description, syntax, usage, attributes and examples of the HTML <a href> tag.
www.html-5.com › HTML Tags › HTML <a href> Tag › ExamplesTo code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:
- elements with
itemscope="itemscope"
(a boolean attribute) anditemtype="http://data-vocabulary.org/Breadcrumb"
identifying each link in the breadcrumb trail - an a href element with
itemprop="url"
indicating the target URL of each breadcrumb link - an element with
itemprop="title"
that provides the text for each breadcrumb link
<ul class="breadcrumb-trail"> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" rel="up up up" href="/"> <span itemprop="title">HTML 5</span> </a> </li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="nobr" itemprop="url" rel="up up" href="/tags/"> <span itemprop="title">HTML Tags</span> </a> </li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" rel="up" href="./"> <span itemprop="title">HTML <a href> Tag</span> </a> </li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="#examples#"> <span itemprop="title">Examples</span> </a> </li> </ul>