HTML is a Hypertext Markup Language.

This is a Skeleton of the Internet.
This is for marking purposes.

The most famous web server is Apache2 and the structure of the folder path will be (/var/html/www).

The first file we make is a default file made by Browser named index.html or default.html.

HTML attributes are nothing but an HTML tag itself.

Boiler Plate Code is using the code again and again.

Live Server

Q. How does it work?

Ans. When we write an HTML, then the common way is that we double-click that file to run it, but there is a problem with this way since we loaded a website, this website will be loaded to memory and then memory serves it. Now the problem is that if we do any new changes to the website then also the memory shows us the previous state but if we refresh the page the current state will get loaded to the website. But as a web developer, it's too difficult to refresh the website again and again. So to make it easy we have an extension called "LIVE SERVER" - by Ritwick Dey in vs code extension marketplace. This extension will now notify us to refresh the current state if we have done any new changes to the web page.

First Browser: Mozilla

TAGS=>

\=> DOCTYPE HTML

Q. What is the need for writing <!DOCTYPE html> before writing the whole coding?

Ans. By writing <!DOCTYPE html> Before writing the whole coding, we get to know that this type of document is in HTML. We are telling the Browser that we are using an HTML file and additionally, we are saying that it's also an HTML5.

\=> HTML TAG

<html></html> tags are some special kinds of keywords that we use for achieving some additional marking-up functionalities like:-

Structure
Meaning/Semantics
Formatting(bold, italics, ~~striking~~, underline, strong)

\=> HEAD TAG

Q. What is the need for writing <head> tag?

Ans. The <head> tag is a container for all the head elements in an HTML page. This tag contains the title of the document, styles and metadata.

\=> h1 to h6 TAGS

The h1 tag is the most important and the main heading and it can go up to the h6 tag which is the least important heading. So we can decrease the font size.

*We can also use more than one h1 tag as it enhances the SEO marking but it also confuses the search engine and make it hard for them to understand that what is the main heading of the webpage.

\=> TITLE TAG

Q. What is a <title> tag and why it is required?

Ans. The <title> tag defines the title of the document and is required in all HTML documents. It gives us information that what the document is all about.

\=> <b> and <strong> TAG

The Bold tag <b> is used to make the text bold presentationally or to make the text creative. This thing we can also get by CSS.
The Strong tag <strong> is used to make the text highlight by bolding it or grabbing the attention of the reader to let them know that this text is really important and it also helps in SEO (Search Engine Optimisation).

\=> PARA TAG

<p></p> tag is used to write content/para on the HTML file. The text between the starting <p> tag and the end </p> tag represents a paragraph in HTML. There is no need to add a line of separation before and after a paragraph because the browser itself inserts an empty line between the two paragraphs.

\=> BODY TAG

In this tag, the content we write is visible to us and the actual visibility of the website comes from this tag.

\=> TABLE TAG

The <table> is used to display the data in tabular form defining an HTML tag. An HTML table consists of one <table> element and one or more <tr>, <th>, <td> elements. The <tr> element defines a table row, the <th> element defines a table heading and the <td> element defines a table cell.

\=> IMAGE TAG

The <img> tag is used to put images into an HTML page. With the use of this tag, we don't simply insert the image into the webpage but we use the link to insert it. Along with the <img> tag, we use src and alt also where src is prescribed to be the source from where the image has been taken and alt is the alternate text for the image.

\=> LINK TAG

HTML links are hyperlinks. By using this tag we can click on the link and jump to another document. The Html <a> tag defines a hyperlink. The href attribute indicates the link's destination.

SYNTAX - <a href ="URL">link text</a>

<a> is the anchor tag that creates a hyperlink to web pages using href. By using an anchor tag, we can also add a phone number or email as a link.

\=> <sup> AND <sub> TAGS

<sup> tag defines Superscript tag.
<sub> tag defines Subscript tag.

\=> <pre> TAG

It is a Pre Formatted Text Tag that inserts poems into a web page. <pre> tag is introduced because by using this tag, the text preserves both spaces and line breaks automatically and it also doesn't need the tag <br> for breaking the lines wherever we need.

\=> CODE TAG

The <code> tag in HTML is an inline code element that is used to define a piece of computer code in our HTML document.

\=> HTML LISTS

HTML lists allow web developers to group a set of related items in lists.

Unordered lists <ul></ul> - The list items will be marked with bullets by default.
Ordered lists <ol></ol> - The list items will be marked with numbers or alphabets.

ELEMENTS =>

The tag will become an element when we fill a tag with another tag or any other content that the whole tag we call an Element. For example, HTML is a Root Element and it defines the whole HTML document.

HTML IN SPEED =>

If we want to use HTML in speed then we use the tool named EMMET. EMMET is a plugin that comes default in the VS-code code editor by using some specific keyword we can generate full-fledged code for our project.

NESTING

Nesting helps developers by reducing the need to repeat selectors while also co-locating style rules for related elements. In Nesting, we only use the greater than (>) sign before the tag.

SIBLING

Sibling elements are elements that share the same parent. In Sibling, we only use the plus (+) sign before the tag.

Block Element =>

Always starts on a new line and the browser automatically adds some space before and after the element. Example : <div> , <p>

Inline Element =>

Does not start on a new line. It only takes up as much width as necessary. Example : <span>

HTML TABLE

Special kind of arrangement of our data in the form of rows and columns.

Table Row - Horizontal representation of our table data.
Table Column - Vertical representation of our table data.

Q. What is the smallest unit in a table?

Ans. The smallest unit in a table is the " cell ".

Q. How can we use table tags in our HTML page?

Ans. The sequence of table tags -

<table></table>
<thead></thead>
<th></th>
<tbody></tbody>
<tr></tr>
<td></td>

Q. What is the shortcut method of writing the table by using EMMET?

Ans. 1. table>thead>th*4

2.tbody>(tr>td*5)*5

Q. What to do if we want to span a row or column in our table?

Ans. To span rows and columns, we use rowspan and colspan respectively. For example -

<td rowspan= "2">Text</td>
<td columnspan= "3">Text</td>

HTML FORM

The Form is nothing but a type of structure whose sole purpose is to collect data from the user.

The first thing we need in HTML Form is a "Tag" <form></form>.

ID attribute of the input tag and FOR attribute and Label tag should be the same.

The default type of Input tag is Text.

Form Elements:

Label- This tag is used to attach text for the input box. This is used for screen reading.
Input- This is a blank space to create an input box for taking input from the user.
Select- This element is used to create a drop-down list.
Option- This tag defines an option in a select list. This tag needs a value attribute, which indicates what is sent to the server on form submission.
Text area- This tag defines a multi-line text input control. The size of a text area is specified by the cols and rows attributes.
Button- This tag defines a clickable button.
Fieldset- This tag draws a box around the related elements in a form.
Legend- This tag is used to insert a text to its parent element such as <fieldset>.
Placeholder- This specifies a short hint on the text field box.

Q. What would be the output after using all these elements?

Ans. The output would be as:

Attributes

These are some extra information about the tag.

Input types =>

These are nothing but some extra information about the tag.

Text Field- It is a single-line space for a user to enter text.
Button- This tag defines a clickable button.
Radio- A circular button to select. In the radio button group, only one button could be selected.
Checkbox- It is shown as a square button that is ticked when activated.
File-select- It defines a file-select field and a browse button for file uploads. By adding the Multiple attribute, then multiple files could be selected.
Image- Defines an image as a submit button.
Password Field- A field space where characters are masked.
email- Defines a field for an email address.
Number- Defines a field for entering a number. Max and Min attributes can help for a specific range.