Html Lists , Block and In-line , Tables , Semantic Elements:

Html Lists :-

There are "3" types of Html Lists:

1. Ordered Lists.

2. Unordered Lists

3. Descriptive or Definition Lists.

Ordered Lists:

• ordered list is represented with a "ol" tag.

• It is used to display the text(names, colors, team names, course name...) with numbering.

• It supports 5 types numbering, those are (1, A, a, i, I). By default it displaying in number.

• By using "ol" tag we can create ordered list .ol is paired tag & block level element.

li tag:

-> li stands for "list item".

-> li is sub tag of ol tag.

-> li tag is used to print text/data in points wise.

-> li is paired tag & block level element.

syntax:

<ol attributes>
    <li> text </li>
    <li> text </li>
    <li> text </li>
    ....
  </ol>

ol attributes:

type : which type numbering to display (Default is 1).

start : from where u want to start numbering (default is 1).

reversed : to displaying numbers in desc order.

li attributes:

value : used for restarting numbering with specified value.

2. Unordered Lists:

• Unordered list is represented with "ul" tag.

• It is used to display the list of items(names, colors, team names, course name...) with bullets.

• It supports 3 types of bullets, those are dot, circle, square. by default, is dot. By using "ul" tag we can create unordered list items.

• ul is paired tag . "li" tag used for creating list items.

• syntax:

•    <ul type="dot/circle/square">
          <li> text </li>
          <li> text </li>
          <li> text </li>
              ...
          </ul>
  

  3.Description or Definition Lists:

  • dl stands for Definition list (since html5 description list).

  • dl tag used for to display definitions/full forms (collection of definitions). Its paired tag.

  • "dt" and "dd" are sub tags of "dl" tag.

  • "dt" stands for definition title, "dd" stands for definition data. dt & dd are paired.

syntax:

<dl>
<dt>title/word</dt>
<dd>information</dd>
<dt>title/word</dt>
<dd>information</dd>
<dt>title/word</dt>
<dd>information</dd>
    ...
</dl>

Block and In-line Elements:-

Block Elements:

Block-level elements are used to create structural divisions or blocks in the content of a web page. They typically start on a new line and extend the full width of their parent container. Common block-level elements include <div>,<p>,<ul>,<ol>,<li>,<form>,<h1>to<h6> and more.

Example:

<div>This is a block-level element.</div>

<p>This is another block-level element.</p>

<h1>This is a heading, which is also a block-level element.</h1>

In-line Elements:

Inline elements are used to style or wrap specific portions of text within a block-level element. They do not start on a new line and only occupy the space needed for their content. Common inline elements include <span>,<a>,<strong>,<em>,<abbr>,<img> and more.

Example:

<p>This is a <em>portion of text*</em>* within a paragraph.</p>

<span>This is an inline element.</span>.

Tables in Html:-

HTML tables are used to display data in rows and columns. They are useful for presenting structured information.

A table is represented as <table> tag, a row represented as <tr> tag, a heading is represented as <th> tag, data rep as <td> tag.

table\=>used to draw a table, means it grouping no. of rows.

tr\=> table row, used to draw a row, means it grouping no. of columns.

th\=>table heading, used to set column headings.

td\=>table data, used to print the data in columns.

Syntax:

<table>
  <tr>
    <th>heading</th>
    <th>heading</th>
  </tr>
  <tr>
    <td>data</td>   
    <td>data</td>
  </tr>
     ...
</table>

Note:

<th> and <td> are sub tags of <tr>

<tr> is sub tag of <table>

table attributes:

border : border of table (0 means no border, 1-n border req).

align : alignment of table.

width : width of table (%).

th& td attributes:

colspan : specifies the no. of columns to merge/expend.

rowspan : specifies the no. of rows to merge/expend.

<table>
<tr>
<th colspan="2">Header 1 and Header 2 Combined</th>
</tr>

<tr>
<td rowspan="2">Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
</table>

As an assignment make Time Table of a college using Tables.

Semantic Html Tags:

Semantic HTML tags are used to give meaning to the structure of a web page. They convey the purpose or role of the elements to both browsers and developers. Using semantic tags improves accessibility, search engine optimization (SEO), and the overall structure of web content.

Example: <header>,<nav>,<main>,<article>,<section>,<aside>,<a>,<footer>,<time>,<img>.

1. "header" tag represents header bar, which may include website logo, search box, main links, etc..

2. "nav" tag represents navigation bar, which may include top navigation menus.

3. "section" tag represents a specific section of the page(box or container), which may include main-content/information.

4. "footer" tag represents the footer part of the web page, which may include information of contact, faqs, location, copyrights, etc...

5. "main" element is used to define the main content area of a document. It should be unique within the document and exclude content that is repeated, such as site headers or footers.

6. "aside" tag represents the "right-side" part of the web page, which may contain ads/other promotional information.

7. "article" element represents a self-contained composition within a document. It can include articles, blog posts, comments, or any content that can be independently distributed or syndicated.

8. "anchor" tag is used for creating hyperlinks to other web pages, resources, or email addresses. It is one of the fundamental elements for navigation on the web.

9. "img" tag is used to display images on a web page. Images can enhance content, provide visual context, and improve user engagement.

10. "time" element is used to represent dates and times. It can include a "datetime" attribute to provide machine-readable date and time information.

As an assignment make a Resume using every possible tags and Attribute and Semantic Elements , Use CSS if needed.