I can usually close the tags of the list, insert a centered graphic and move on with my life, however there are a few instances where I will want to return to the indentation of the list without starting a new bullet point.
Basic illustration:
Example:
- A single item in an unordered list
A centered image outside of an unordered list
Code:
<ul>
<
li>An example list</li
>
</ul>
<img src="lolinternet.gif" />
Omit <li> tags or use <p>:
Instead of using a list item tag (
<li>
), use a paragraph tag (<p>
) to jump back into the indentation without including a new bullet point.Example:
- Another unordered list item
Another centered image,
outside of <ul> tagsReturning to indentation without a bullet point
- An additional bullet point
Code:
<ul>
<
li>Another unordered list item</li
>
</ul>
<img src="lolinternet_8bit.gif" />
<ul>
<p>
Returning to indentation without a bullet point
</p>
<li>An additional bullet point
</li>
</ul>
Jump back into ordered lists in any defined order:
However rarely, it is sometimes necessary to have more control over the order of a list. One can begin a list at any position using any style. These attributes have been deprecated and one should instead utilize a style, but the idea is still the same.
Example - The Buzz Ordering System:
- I'm not that lucky
- We have smoke detectors
- We live on the most boring street in the United States of America; where nothing even remotely dangerous will ever happen. Period!
Code:
<img src="buzz.PNG" />
<ol type="a">
<li value="1">I'm not that lucky</li>
</ol>
<ol>
<li value="2">We have smoke detectors</li>
</ol>
<ol type="A">
<li value="4">We live on the most boring street in the United States of America; where nothing even remotely dangerous will ever happen. Period!</li>
</ol>
<ol type="a">
<li value="1">I'm not that lucky</li>
</ol>
<ol>
<li value="2">We have smoke detectors</li>
</ol>
<ol type="A">
<li value="4">We live on the most boring street in the United States of America; where nothing even remotely dangerous will ever happen. Period!</li>
</ol>
Where the type="" attribute sets the ordered marker style, with numbers as the default/inherent value:
- 1 = Numbers: 1, 2, 3, 4, 5...
- A = Capital letters: A, B, C, D, E...
- a = Lowercase letters: a, b, c, d, e...
- I = Roman numerals: I, II, III, IV, V...
- i = Small Roman numerals: i, ii, iii, iv, v...
Read more about these methods: