# Day 3

<h2>
HTML List
</h2>

1. Unordered List

We can create an unordered list with `<ul>` tag.
We define the list inside of the `<ul>` and `</ul>` tag.

The list is defined using the `<li>` tag.

    <ul style = "list-style-type: square;">
    	<li> Nepal </li>
    	<li> India </li>
    	<li> China </li>
    </ul>

There are four main values of `list-style` property that helps us with customization of the unordered list.

| none | No bullet points appearing in front of the list |
| --- | --- |
| circle | A circular bullet appears in front of the list |
| disc | this is the default circular bullet |
| square | a filled square bullet appears in front of the list |
2. Ordered List

Similar to unordered list, we create an ordered list with `<ol>` tag.

    <ol type = "A">
    	<li> Coffee </li>
    	<li> Milk </li>
    	<li> Tea </li>
    </ol>

There are types of ordered list in HTML. The `type` attribute of the `<ol>` tag can be specified with alphabets like A, B, C or a, b, c or even Roman numerals like `I` .

Example:

    <ol type = "I">
    	<li> Eat </li>
    	<li> Code </li>
    	<li> Sleep </li>
    </ol>

Also, you can use `start` attribute with the HTML `<ol>` list to start from a specific number.

    <ol start="10">
    	<li> Eat </li>
    	<li> Code </li>
    	<li> Sleep </li>
    </ol>

Output:

3. Nested List

We can nest the list within a list.

Example:

    <ul style = "list-style-type: square;">
    	<li> Nepal </li>
    		<ul>
    			<li> Kathmandu </li>
    			<li> Butwal </li>
    		</ul>
    	<li> India </li>
    	<li> China </li>
    </ul>


4. Description List

We can define description list using the `<dl>` tag element.

The description descriptor is used to describe the term further with `<dd>` tag.

    <dl>
    	<dt> Coffee </dt>
    	<dd> Black hot drink </dd>
    	<dt> Milk </dt>
    	<dd> White hot drink </dd>
    </dl>

Output:


### Where do we use `<list>` ?

We can use `<list>` in many scenario. But one of the most adopted one is to create a basic header navigation bar.

Example:

<nav>
	<span class="logo"> Logo </span>
	<ul>
		<li><a href="#/home"> Home </a></li>
		<li><a href="#/project"> Project </a></li>
		<li><a href="#/about"> About </a></li>
****	</ul>
</nav>

Output:


## HTML TABLE

A HTML `table` is a way of representing data in rows and columns.

With tables, we can arrange data like `text`, `image`, `other tables`, and more in `rows` and `column` of cells.

HTML Tables has three main elements:

- `<table>` → this is the main container
- `<tr>` → represents rows
- `<td>` → used to create data in the cells

Example:

<table>
	<tr>
		<td> A </td>
		<td> B </td>
		<td> C </td>
	</tr>
	<tr>
		<td> 1 </td>
		<td> 2 </td>
		<td> 3 </td>
	</tr>
</table>

Output:


1. Adding a Table Heading in HTML

We can add a table heading using the `<th>` tag.

This can replace `<td>` tag that we used above.

Headings, which are defined in the `<th>` tag are centered and bold by default.

2. Adding a Cell Spanning in an HTML Table.

Cell Spanning means stretching across two or more columns or row in a table.

We can span a cell using `colspan` or `rowspan` depending upon column or row respectively.

Example:

    <table>
      <tr>
        <th></th>
        <th>Day 1</th>
        <th>Day 2</th>
        <th>Day 3</th>
        <th>Day 4</th>
      </tr>
      <tr>
        <th>Nick</th>
        <td colspan="3">0 mph</td>
        <td>1 mph</td>
      </tr>
      <tr>
        <th>Ryan</th>
        <td>2 mph</td>
        <td>5 mph</td>
        <td>10 mph</td>
        <td>12 mph</td>
      </tr>
    </table>

Output:

3. Adding Table `header`, `body`, & `footer` in HTML Tables

Like any website, we can determine main parts of our table using these:

- `<thead>` → creates a header for the table
- `<tbody>` → indicates the main body
- `<tfoot>` → creates a footer for the table

## Semantic HTML & CSS

Link from the bootcamp: [Click Here](https://github.com/gorakhjoshi/WebDevelopmentFoundation)

- `<header>`
- `<article>`
- `<figure>`
- `<footer>`
- `<nav>`
- `<aside>`
- `<section>`
- `<figcaption>`

## CSS Specificity


- CSS specificity is a measure of how specific the selector of a CSS rule is. The selector with the highest specificity wins and is applied to the HTML element over other less specific ones.
- It means `inline-styles` has highest priority, so it will be applied rather than `ID` or `Class` because they have less priority.
- There are four categories which define the specificity level of a selector:

Inline styles -

    <h1 style="color: pink;">

IDs -

    #navbar

Classes, pseudo-classes, attribute selectors -

    .test, :hover, [href]

Elements and pseudo-elements -

    h1, :before

<br>
<br>
<br>

## Authors

- [@kaflenitish](https://www.github.com/kaflenitish)

## Contributing

Contributions are always welcome!

Contact the `author` for ways to get started.

## Feedback

If you have any feedback, please reach out to [e-mail]