<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.

<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:

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

To code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:

• elements with itemscope="itemscope" (a boolean attribute) and itemtype="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>