HTML Structure

Block Elements

•They consume the entire width available; They always start in a new line and have top and bottom margins.

•Examples of Block Elements

•<div>: This is a container tag and used to make separate divisions of content.

•<hr>: This is an empty tag and used for separating content

•<table>: This tag is used for including tables in the webpage

•<p>: This tag is used to include paragraphs 

Block Elements Key Differences

•Block Elements occupy the full width.

•Block elements always start in a line.

•Block elements doesn't allow other elements to sit behind.

•Block elements have top and bottom margin.

Inline Elements

•Inline elements occupy only enough width that is sufficient to it and allows other elements next to it which are inline.

•Inline elements don't start from a new line and don't have top and bottom margins as block elements have.

•Examples of Inline Elements:

•<a>: This tag is used for including hyperlinks

•<br>: This tag is used for inserting line breaks

•<span>: This is an inline container

•<input>: This tag is used for taking input from users.

Inline Elements Key Differences

•Inline elements occupy only sufficient width required.

•Inline elements don't start in a new line.

•Inline elements allow other inline elements to sit behind. 

•Inline elements don't have top and bottom margin

Semantic Elements

●Semantic elements are the elements that describe their meaning to both the developer as well as to the browser.

●HTML5 provides us with many semantic elements as listed below:

○<article>

○<nav>

○<section>

○<main>

○<footer>

○<table>

○<figure>

○<summary>

Article

A article tag is used to specify a particular block or space on the web page that is independent and has self-contained content. We can use <article> for the blog posts, the articles from newspapers, and more such entities.

Nav

Nav is the element or tag that is used to build the navbar of the page. It is the element inside which we define the nav links that perform some actions on click to them.

Section

section element is used to define the midsection part of the page, which can contain the information about the upcoming events, text content, or whatever a developer wants it to display.

Main

The main element is also used to define the middle content on the web page. It can contain text or other elements to show the content on the web page.

Footer

Footer is the element mainly used to provide the copyrights or some extra links that are available on the web page.

Figure

The figure tag contains the self-contained content such that images, graphs, code content, etc. While the figcaption tag specifies the caption or the description of the content contained by the figure tag. we can place the caption above or below the figure content by using figcaption tag to the corresponding position.

Table Elements

●The <table> HTML element represents tabular data that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

●Elements consist of the following:

○<table>: This tag starts the table. Everything between the opening <table> and closing </table> tags makes up the table.

○<tr>: Stands for "table row". Each <tr> tag defines a row in the table.

○<th>: Stands for "table header". It's used for the headers of the columns.

○<td>: Stands for "table data". This tag is used for actual data cells under each column.

Form Elements

●HTML forms, defined using the <form> Tags are essential for collecting user input on web pages.

●They incorporate a variety of interactive controls such as text fields, numeric inputs, email fields, password fields, checkboxes, radio buttons, and submit buttons.

●Over 85% of websites rely on forms to gather data from users, making them a fundamental component of modern web development.