Web Development
HTML(Hypertext Markup Language)
Skeletal Tags (Starting---never change)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tushar Choudhary</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Hey this is my first website. Trying my best.
<script src="script.js"></script>
</body>
</html>
Heading Tags (Used in headings)
<h1>Heading</h1> (biggest)
<h2>Heading</h2> (smaller than h1)
<h3>Heading</h3> (smaller than h2)
<h4>Heading</h4> (smaller than h3)
<h5>Heading</h5> (smaller than h4)
<h6>Heading</h6> (smallest)
Paragraph Tag (Used to write paragraphs)
<p> This tag is used to format text into distinct paragraphs. Each paragraph element is separated by automatic
empty line spaces above and below the content, providing a clear visual separation. The tag must be closed with its
corresponding. </p>
Horizontal Line Tag (no closing tag)
<hr> ( It serves as a visual separator, dividing different sections of your document with a horizontal line.)
Line Brake Tag (Used to insert breaks)
<br /> (To insert a line break in your HTML document. This tag is Used to insert line breaks in text or paragraphs.)
. Anchor Tag (Used to insert links)
<a href="(Link)">Content</a> (In HTML,links are created using the anchor tag.)
(Links typically appear in different colors based on their state:)
(Active: Displayed in red and underlined like this sentence.)
(Visited: Appears purple and underlined like this sentence.)
(Unvisited: Shown as blue and underlined like this sentence.)
{You can customize these colors using CSS to better match the style of your website.}
(To link to a specific section of a web-page, you can:
Use the name or id attribute of the target section.
Use a hyperlink with a hash (#) followed by the target id or name.)
. Image Tag (Used to insert image & no closing tag)
<img src="image.png" alt="Description" />
<img src="image.png" alt="Description" width="300" height="100" />
(src attribute: Specifies the path to the image file.)
(alt attribute: Provides a text description for the image.)
. Pre Tag (Used to display preformatted text)
<pre></pre> (This tag maintains both spaces and line breaks, ensuring that text appears exactly as it was originally
formatted.)
, Block-Level & Inline elements.
*Common Block-level Elements:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> -
Headings
<p> - Paragraphs
<hr> - Horizontal rule
<address> - Address information
<article> - Article content
<aside> - Sidebar content
<blockquote> - Block quotations
<canvas> - Drawing area
<dd> - Description in a description list
<div> - Generic container
<dl> - Description list
<dt> - Term in a description list
<fieldset> - Group of related form elements
<figcaption> - Caption for a figure
<figure> - Image or media with a caption
<footer> - Footer of a section or page
<form> - HTML form
<header> - Header of a section or page
<li> - List item
<main> - Main content of a document
<nav> - Navigation links
<noscript> - Alternate content when JavaScript is not enabled
<ol> - Ordered list
<ul> - Unordered list
<pre> - Preformatted text
<section> - Standalone section in a document
<table> - Table
<video> - Video content
*Common Inline Elements:
<span>: A generic inline container for text
<a>: Defines a hyperlink
<strong>: Defines important text
<em>: Defines emphasized text
<img>: Embeds an image
<input>: Defines an input control
*Most used Inline Elements:
<a>, <abbr>, <acronym>, <button>, <br>, <big>, <bdo>, <b>, <cite>, <code>, <dfn>, <i>, <em>, <img>, <input>, <kbd>,
<label>, <map>, <object>, <output>, <tt>, <time>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>,
<textarea>.
HTML Lists
<ul><li>(items)</li></ul> (Unordered List: Displays items using bullets.)
<ol><li>(items)</li></ol> (Ordered List: Displays items in a numerical sequence, and supports various numbering
styles like Arabic numerals, Roman numerals, and so on.)
<dl><dt>Definetion term</dt><dd>Definetion description</dd></dl> (Definition List: Organizes items in a format
similar to a dictionary, with terms and their corresponding definitions.
<dl> is the container for the list.
<dt> defines the terms that you want to explain.
<dd> contains the definitions or explanations for the
terms.)
HTML Tables
HTML(Hypertext Markup Language)
Skeletal Tags (Starting---never change)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tushar Choudhary</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Hey this is my first website. Trying my best.
<script src="script.js"></script>
</body>
</html>
Heading Tags (Used in headings)
<h1>Heading</h1> (biggest)
<h2>Heading</h2> (smaller than h1)
<h3>Heading</h3> (smaller than h2)
<h4>Heading</h4> (smaller than h3)
<h5>Heading</h5> (smaller than h4)
<h6>Heading</h6> (smallest)
Paragraph Tag (Used to write paragraphs)
<p> This tag is used to format text into distinct paragraphs. Each paragraph element is separated by automatic
empty line spaces above and below the content, providing a clear visual separation. The tag must be closed with its
corresponding. </p>
Horizontal Line Tag (no closing tag)
<hr> ( It serves as a visual separator, dividing different sections of your document with a horizontal line.)
Line Brake Tag (Used to insert breaks)
<br /> (To insert a line break in your HTML document. This tag is Used to insert line breaks in text or paragraphs.)
. Anchor Tag (Used to insert links)
<a href="(Link)">Content</a> (In HTML,links are created using the anchor tag.)
(Links typically appear in different colors based on their state:)
(Active: Displayed in red and underlined like this sentence.)
(Visited: Appears purple and underlined like this sentence.)
(Unvisited: Shown as blue and underlined like this sentence.)
{You can customize these colors using CSS to better match the style of your website.}
(To link to a specific section of a web-page, you can:
Use the name or id attribute of the target section.
Use a hyperlink with a hash (#) followed by the target id or name.)
. Image Tag (Used to insert image & no closing tag)
<img src="image.png" alt="Description" />
<img src="image.png" alt="Description" width="300" height="100" />
(src attribute: Specifies the path to the image file.)
(alt attribute: Provides a text description for the image.)
. Pre Tag (Used to display preformatted text)
<pre></pre> (This tag maintains both spaces and line breaks, ensuring that text appears exactly as it was originally
formatted.)
, Block-Level & Inline elements.
*Common Block-level Elements:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> -
Headings
<p> - Paragraphs
<hr> - Horizontal rule
<address> - Address information
<article> - Article content
<aside> - Sidebar content
<blockquote> - Block quotations
<canvas> - Drawing area
<dd> - Description in a description list
<div> - Generic container
<dl> - Description list
<dt> - Term in a description list
<fieldset> - Group of related form elements
<figcaption> - Caption for a figure
<figure> - Image or media with a caption
<footer> - Footer of a section or page
<form> - HTML form
<header> - Header of a section or page
<li> - List item
<main> - Main content of a document
<nav> - Navigation links
<noscript> - Alternate content when JavaScript is not enabled
<ol> - Ordered list
<ul> - Unordered list
<pre> - Preformatted text
<section> - Standalone section in a document
<table> - Table
<video> - Video content
*Common Inline Elements:
<span>: A generic inline container for text
<a>: Defines a hyperlink
<strong>: Defines important text
<em>: Defines emphasized text
<img>: Embeds an image
<input>: Defines an input control
*Most used Inline Elements:
<a>, <abbr>, <acronym>, <button>, <br>, <big>, <bdo>, <b>, <cite>, <code>, <dfn>, <i>, <em>, <img>, <input>, <kbd>,
<label>, <map>, <object>, <output>, <tt>, <time>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>,
<textarea>.
HTML Lists
<ul><li>(items)</li></ul> (Unordered List: Displays items using bullets.)
<ol><li>(items)</li></ol> (Ordered List: Displays items in a numerical sequence, and supports various numbering
styles like Arabic numerals, Roman numerals, and so on.)
<dl><dt>Definetion term</dt><dd>Definetion description</dd></dl> (Definition List: Organizes items in a format
similar to a dictionary, with terms and their corresponding definitions.
<dl> is the container for the list.
<dt> defines the terms that you want to explain.
<dd> contains the definitions or explanations for the
terms.)
HTML Tables
