HTML
HTML stands for Hyper Text Markup Language . It is the standard markup language for creating Web
pages . It creates the structure of a Web page .
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
Example :-
Syntax - <!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>
Explaination :-
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or
in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
Note: The content inside the <body> section will be displayed in a browser. The content inside the <title>
element will be shown in the browser's title bar or in the page's tab.
Headings :-
headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h1> defines the least important heading .
Syntax - <h1> Heading </h1>
<h2> Heading </h2>
<h3> Heading </h3>
<h4> Heading </h4>
<h5> Heading </h5>
<h6> Heading </h6>
Output -
Heading
Heading
Heading
Heading
Heading
Heading
Paragraphs :-
paragraphs are defined with the <p> tag:
<p>Paragraph.</p>
Links :-
links are defined with the < a >(anchor) tag , it is used to go to respective page of link . The link's
destination is specified in the href attribute.
Syntax - <a href="file_name or file_path or page_link want to see">This is a link</a>
Attributes are used to provide additional information about its tag..
Images :-
Images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<img src="image_path" alt="image_description" width="image_width" height="image_height">
<br> tag defines a line break, and is an empty element without a closing tag .
Syntax - <p>This is a <br> paragraph with a line break.</p>
title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element .
Example :-
Syntax - <p title="I'm a tooltip">This is a paragraph.</p>
Formatting Elements :-
Formatting elements were designed to display special types of text:
<b> - Bold text
<i> - Italic text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<u> - underline text
<sub> - Subscript text
<sup> - Superscript text
<bdo> - bi-direction
<bdo dir="rtl">This text will be written from right to left</bdo>
Table:-
A table consists of cells inside rows & columns. Each table cell is defined by a <td> and a </td> tag. td
stands for data . Each row starts with a <tr> and ends with a </tr> tag. tr stands for row.th stands for
heading . <th> elements are bold and centered,
Syntax - <table>
<tr>
<th>Roll no :</th>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>01</td>
<td>XYZ</td>
<td>Maths</td>
</tr>
</table>
To make a cell span over multiple columns, use the colspan attribute . The value of the colspan attribute
represents (the number of columns to span + 1)
To make a cell span over multiple rows, use the rowspan attribute . The value of the rowspan attribute
represents ( the number of rows to span + 1 )
Form:-
form is used to collect user input. The user input is most often sent to a server for processing. <form>
element is used to create an form for user input . <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.
HTML <form> Elements
form element use for create different type data entry field and as per needs
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<input> element is the most used form element. An <input> element can be displayed in many ways,
depending on the type attribute. Placeholder attribute set a default text inside enter space .
Text Fields - <input type="text"> defines a single-line input field for text input.
The <label> Element
The <label> tag defines a label for many form elements . <label> element is useful for screen-reader users,
because the screen-reader will read out loud the label when the user focuses on the input element . The
<label> element also helps users who have difficulty clicking on very small regions (such as radio buttons
or checkboxes) because when the user clicks the text within the <label> element, it toggles the radio
button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them
together.
The <select> element defines a drop-down list . The <option> element defines an option that can be
selected . By default, the first item in the drop-down list is selected . Use the size attribute to specify the
number of visible values . Use the multiple attribute to allow the user to select more than one value:
The <textarea> element defines a multi-line input field (a text area) . The rows attribute specifies the visible
number of lines in a text area . The cols attribute specifies the visible width of a text area.
The <button> element defines a clickable button .
Note: Always specify the type attribute for the button element. Different browsers may use different
default types for the button element.
The <fieldset> element is used to group related data in a form . The <legend> element defines a caption for
the <fieldset> element.
The <datalist> element specifies a list of pre-defined options for an <input> element . Users will see a drop-
down list of the pre-defined options as they input data . The list attribute of the <input> element, must refer
to the id attribute of the <datalist> element.
List -
lists allow web developers to group a set of related items in lists.
An Unordered list:
Item
Item
Item
Item
An Ordered list:
1. First item
2. Second item
3. Third item
4. Fourth item
An Unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be
marked with bullets (small black circles) by default .
An Ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked
with numbers by default .
Block and Inline Elements -
A block-level element always starts on a new line .A block-level element always takes up the full width
available (stretches out to the left and right as far as it can).
Two commonly used block elements are <p> and <div>.
The <p> element defines a paragraph , The <div> element defines a division or a section
Inline Elements -
An inline element does not start on a new line. An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
Note: An inline element cannot contain a block-level element.
Span - The <span> element is an inline container used to mark up a part of a text, or a part of a
document. The <span> element has no required attributes, but style, class and id are common. When used
together with CSS, the <span> element can be used to style parts of the text
