The list items we created are indented relative to the rest of the text on this page. Is there a way to have the list items sit flush against the page like the rest of the text?
Indeed there is a way! Most browsers use a default style sheet to apply some padding to the left of the <ul> and <ol> elements. Developers can overwrite this default padding by creating their own custom CSS style sheets.
Hi! I posted this on the other thread, but instead of using padding, couldn’t we just put the LI tag on its own without being nested in the UL parent tag? I played around with the code and previews in the Elements and Structure exercise in the Introduction to HTML lectures and figured that UL means that a list is coming up and indents the succeeding text, while LI makes a bullet point for the text. By this, if you were to create an unordered list that you wanted sitting flush with the rest of the text rather than indented, you can make a list with the LI tags, and omit the UL tag, it seems? What would go wrong if we didn’t nest it in a UL tag if we simply didn’t want it indented then?
Thank you!
Screen Shot 2020-07-02 at 10.26.23 PM|690x431
I also posted this comment in another response here: Does the <li> tag always have to be nested within the <ul> tag?
Browsers are designed to be very lenient and highly error-tolerant so in this case, the text would display on the page. This can be rendered sometimes, sometimes not. So, it’s the best practice if you use ul or ol before using li.
All though most browsers will tolerate it i must emphasize that your code will note validate when tested on w3c
If the li elements are not nested inside a ul or ol (or menu) element, aside from the fact that the W3 validator would not validate it, the browser would also not know what type of list or what kind of marker in front of the items you want to have, so it will display it using its default style sheet for all the list items not nested inside ul or ol elements. If you want to display them in a specific way, you’d have to specify it in the custom CSS style sheet(s).
Then, if you have two or more lists, or a list within a list, they might not be very distinguishable between eachother (especially if they are unordered lists) and it will be harder to select them in the CSS style sheet(s) if you don’t have a container parent element to more easily select them (and apply appropriate structure and presentation), so we might as well just use ul or ol and nest the items inside them at that point.
Using ul and ol (and/or menu) elements and nesting the list items inside them might also have a positive effect regarding SEO and could be useful for people who use screen readers or other assistive technology (though I don’t know much about these subjects).
what is screen readers or assistive technology?
A screen reader is a technology that helps people who have difficulties seeing to access and interact with digital content, like websites or applications via audio or touch.
It will basically read out the stuff on the page to someone who can’t see.
Hi. Just want to say thank you for your responses to various questions including this. I appreciate the way you explain things in a clear and simple way. Really helpful to me as a newbie and I’m sure many others like me. Keep up the good work… 
Yes indeed. By using the break page element
, each time a list is completed. For example,
