HTML, or HyperText Markup Language, is the language that web pages use to display their content. It’s made up of different elements which tell the web browser how to show it’s information. In today’s online world, understanding how websites work is crucial. Here are the only basics you need to know about HTML lists!
Lists
Lists group similar items together. They can be numbers and letters (ordered list) or bullet points (unordered list). Within bullet points, there are dozens of styles to choose from. HTML5 also supports descriptive lists, which allows bullet points to add more information about different topics.
Ordered Lists
<ol type="1">
<li>Travel</li>
<li>Photography</li>
<li>Technology</li>
<li>Literature</li>
</ol>Ordered lists form procedures by using the ‘<ol>’ tag. Each element of the list is defined with the ‘<li>’ tag. You can choose numerous orders styles, defined with the ‘type=”TYPE”‘ element. The default order style is numbers, or ‘1’. You can also have ‘A’ for uppercase alphabet lists, ‘a’ for lowercase alphabet lists, ‘I’ for uppercase Roman numerical lists or ‘i’ for lowercase Roman numerical lists.
Unordered Lists
<ul style="list-style-type:disc;">
<li>Travel</li>
<li>Photography</li>
<li>Technology</li>
<li>Literature</li>
</ul>Unordered lists form bullet points by using the ‘<ul>’ tag. Each element of the list is defined with the ‘<li>’ tag. You can choose from numerous bullet point styles, defined with the ‘list-style-type:TYPE;’ element. The default bullet point style is black circles, or ‘disc’. You can also have ‘square’ for black squares, ‘circle’ for hollow circles, or ‘none’ for the indentation without the bullet point.
Descriptive List
<dl>
<dt>Travel</dt>
<dd>- Travel Guides</dd>
<dt>Photography</dt>
<dd>- Countries</dd>
<dt>Technology</dt>
<dd>- Methodologies</dd>
<dt>Literature</dt>
<dd>- Book Reviews</dd>
</dl>Descriptive lists form sub-bullet points by using the ‘<dl>’ tag. Each list element is defined with the ‘<dt>’ tag and the desired bullet point with the ‘<dd>’ tag. You must specify what type of bullet point you want to use inside this tag.
Read more about programming here!