li ... ⁄li, display in browser
Browser display, li element
- empty li element (start tag, end tag only): does not display in browser
- its children, flow content: the display depends strictly on the nested element
- its content, type text: displays in browser
- the content of the li elements preceded by:
→ bullets: if li elements nested inside ul
→ numbers or a different marker if type attribute (»video) is used: if li elements nested inside ol
Note:
The bullets of the items of an ul (unordered list) can be replaced with a customized image, through CSS, like this:
ul{list-style-image:url(images/check.png)}
Instead of bullets, the image check.png will display in front of each item of the list.
Video demonstration li element, view in browser
HTML5 li, browser display, Tutorial
min | video details |
---|---|
00:05 | li element: browser display |
00:18 | this video tutorial presents the display of an li element located inside the next elements: ul, ol, menu |
00:25 | browser display: li inside ul |
00:26 | empty li: display bullets |
00:31 | non-empty li: display bullets + content |
00:38 | browser display: li inside ol |
00:39 | empty li: display numbers |
00:45 | non-empty li: display numbers + content |
00:54 | if type attribute is specified on the ol start tag, then the li display depends on its value |
01:00 | type=i displays roman numerals in lowercase |
01:06 | for more information about type attribute and the rest of its values, see the corresponding video tutorial here |
01:21 | browser display: li inside menu |
01:21 | note: menu element is not yet supported in browser |
01:25 | browser display: it's should not display like this |
01:30 | it might look something like this |