Skip to main content

Types of HTML Lists

👉 TYPES OF HTML LIST

We have 3 types of lists in HTML

  • Order Lists
  • Unordered Lists
  • Description List
How to write a Ordered list in HTML.

<ol>
<li>Computer</li>
<li>Mouse</li>
<li>Printer</li>
<li>Monitor</li>
</ol>



We also change of type in Ordered list type:
type="1"The list items will be numbered (default)
type="A"The list items will be uppercase alphabet 
type="a"The list items with lowercase letters
type="I"The list items will be uppercase roman numbers
type="i"The list items will be numbered with lowercase roman numbers

UNORDERED LIST


<h2> Unordered lists </h2>
<ul>
<li> facebook</li>
<li>twitter</li>
<li>chatbox</li>
<li>bingo</li>
</ul>


Output:



We can also change type of Square, Circle, and disc

discSets the list item to a bullet (default)
circleSets the list item to a circle
squareSets the list item a square
noneThe list items will not be done
Example: 
<ul style="list-style-type: disc;">
<ul style="list-style-type: circle;">
<ul style="list-style-type: square;">


đź‘“  HTML Description Lists

It is descriptive each items
<dl> tag define description <dt> define the name <dd> describe each terms:

<h3> Description Lists</h3>
<dl>
<dt>Computer</dt>
<dd> -Computer is machine to learn everything</dd>
<dt> RAM </dt>
<dd> -Random Access Memory </dd>
</dl>



✔ Thanku:
Thanku:) 

Labels:

Comments

Post a Comment

Popular posts from this blog

What is CSS (Cascading Style Sheet)

Cascading Style Sheets (CSS): In the dynamic world of web development, HTML (Hypertext Markup Language) serves as the foundation, laying out the structure of a webpage. However, for a webpage to captivate its audience with visually appealing designs and layouts, it requires the artistic touch of CSS, or Cascading Style Sheets. 👉Defining CSS: CSS is a style sheet language used to describe the presentation of a document written in HTML or XML. It enables web developers to control the visual aspects of a webpage, such as colors, fonts, spacing, and positioning, without altering the underlying structure defined by HTML. The term "Cascading" in CSS refers to the order of priority the styles are applied, allowing for flexibility and consistency. 👉Separation of Concerns: One of the key principles of web development is the separation of concerns, and CSS plays a crucial role in achieving this. While HTML focuses on the structure and content of a webpage, CSS handles the aesthetics ...
Post a Comment
Read more

HTML BORDER WITH CSS

 Many Type of HTML Border We have many types of border in HTML. We can change it with border style and colors. So we discussed how to change a Border color and Style in HTML. 1.      Firstly we write a Code in Sublime Text and Save it to Borderwithcss file 2.      Secondly we link a stylesheet in  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>change border style</title> <link rel="stylesheet" type="text/css" href="d:/html blog/style.css"> </head> <body> <p class="b1"> this is a normal paragraph for change border style with css</p> <p class="b2"> this is a normal paragraph for change border style with css</p> <p class="b3"> this is a normal paragraph for change border style with css</p> <p class="b4"...
Post a Comment
Read more

HTML Classes and ID's Attributes

  The class Attribute The  class  attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific name. In the following example we have three  <div>  elements with a  class  attribute with the value of ".classes". All of the three  <div>  elements will be styled equally according to the  .classes  style definition in the head section: You can manipulate your and design by the classes. Example: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> html classes and IDs </title> <style type="text/css"> .classes{ background-color: green; color: ghostwhite; border: 2px 4px 3px 2px; margin: 20px; padding: 20px; font-family: arial,; } </style> </head> <body...
Post a Comment
Read more