HTML
• HTML (HyperText Markup Language) is the
standard language used to create web pages.
• It defines the structure and layout of a web page by
using a variety of tags and elements.
• Each element in HTML tells the browser how to display
the content on the screen.
KEY CONCEPTS:
•HyperText: Refers to text that contains links to other texts or resources. It's the foundation of web navigation.
•Markup Language: HTML uses "tags" to markup content, specifying how it should be formatted or displayed.
BASIC HTML DOCUMENT STRUCTURE:
• Every HTML document follows a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
•<!DOCTYPE html>: This declares the document type and version of HTML.
•<html>: The root element that wraps all content on the page.
•<head>: Contains metadata about the HTML document (like the title, character set, etc.).
•<title>: The title of the web page, shown in the browser tab.
•<body>: Contains the actual content of the webpage, like headings, paragraphs, links, images, etc.
• <head> & <body> tags are children of HTML tag.
• HTML is the parent of all tags.
• Most of the HTML elements have opening & closing tag with content in between opening & closing tags.
• Some HTML tags have no content. These are called Empty elements e.g. <br>
We can either use .htm or .html extension.
• You can use “inspect element” or “view page source” option from Chrome to look into a website’s HTML Code.
HTML TAGS AND ELEMENTS:
•Tags are used to define elements, usually enclosed in angle brackets (e.g., <p> for a paragraph).
•Most tags have an opening tag (e.g., <p>) and a closing tag (e.g., </p>), with the content in between.
COMMON HTML TAGS:
•Headings: <h1> to <h6> define headings, with <h1> being the largest.
•Paragraphs: <p> defines a paragraph.
•Links: <a href="url"> creates a hyperlink.
•Images: <img src="[Link]" alt="description"> displays an image.
HTML TYPOGRAPHY
•Headings (<h1> to <h6>):
•As explained earlier, headings define the hierarchy of your content,
from <h1> (largest and most important) to <h6> (smallest and least important).
•Paragraphs (<p>):
•<p> defines paragraphs, separating blocks of text into distinct sections.
•Bold Text (<b> or <strong>):
•<b> makes the text bold but doesn’t imply any importance.
•<strong> makes the text bold and implies that it is important.
Italic Text (<i> or <em>):<i> makes the text italicized, often used for
emphasis or quotes.<em> italicizes the text and adds emphasis, indicating the
importance of the text.
<p>This is an <i>italicized</i> word.</p>
<p>This is an <em>emphasized</em> word.</p>
Underline Text (<u>):<u> underlines the text, which can be useful for
highlighting certain words or phrases.
<p>This is an <u>underlined</u> word.</p>
Strikethrough (<s> or <del>):<s> creates strikethrough text (used to
represent something that is no longer accurate).<del> indicates text that has
been dead, often used in documents to indicate edits.
HTML is a case insensitive language. <H1> and <h1> tags are the same.
The <br> tag is used to create line breaks in an HTML document.
BIG AND SMALL TAGS
We can make text a bit larger and a bit smaller using <big> and <small> tags respectively.
<big>He110 world</big>
< small>He11o world</small>
HR TAG
<hr> tag in HTML is used to create a horizontal ruler often used to separate the content.
SUBSCRIPT & SUPERSCRIPT
We can add subscript and superscripts in HTML as follows:
this <sub> is </sub> subscript.
this is <sup> is </sup> superscript.
PRE TAG
HTML always ignores extra spaces and newlines. In order to display a piece of text as is,
we use pre tag.
<pre>
This is written.
using pre
tag
</pre>
HTML ATTRIBUTES
• HTML attributes provide additional information about HTML elements.
• They are always included in the opening tag of the element and typically come in name/value pairs,
• where the attribute name is followed by an equals sign and the value is enclosed in quotes.
• <tagname attribute="value">Content</tagname>
• <a href="[Link] Example</a>
• <img src="[Link]" alt="A description of the image">
• style:
• Inline CSS can be applied to an element using the style attribute
• <p style="color: blue; font-size: 16px;">This is a styled paragraph.</p>
• id:
• Provides a unique identifier for an HTML element, allowing it to be targeted with CSS or
JavaScript. <div id="header">This is the header section.</div>
• class:
• Assigns one or more class names to an element. Classes can be used to group elements
for styling and scripting purposes. <p class="intro">This is an introductory paragraph.</p>
• target:
• Used with the <a> tag to specify where to open the linked document. The most common
value is _blank, which opens the link in a new tab or window.
• <a href="[Link] target="_blank">Open in a new tab</a>
HTML LISTS
• Unordered List (<ul>)
• An unordered list is a list of items marked with bullet points. It is commonly used when the order of items
is not important.
• <ul>
• <li>Item 1</li>
• <li>Item 2</li>
• <li>Item 3</li>
• </ul>
• Ordered List (<ol>)
• The ordered list is a list of items marked with numbers or letters, useful when the sequence of items matters.
• Basic Structure:
• <ol>
• <li>First item</li>
• <li>Second item</li>
• <li>Third item</li>
• </ol>
• Changing List Numbering:
• You can use the type attribute to change the style of numbering for an ordered list.
• type="1" (default): Numbers (1, 2, 3)
• type="A": Uppercase letters (A, B, C)
• type="a": Lowercase letters (a, b, c)
• type="I": Uppercase Roman numerals (I, II, III)
• type="i": Lowercase Roman numerals (i, ii, iii)
• List Attributes
• start: Defines the starting number for an ordered list.
• <ol start="5">
• <li>Item 5</li>
• <li>Item 6</li>
• </ol>
• reversed: Reverses the numbering of an ordered list.
• <ol reversed>
• <li>Third item</li>
• <li>Second item</li>
• <li>First item</li>
• </ol>
DESCRIPTION LIST
<dl>
<dt>Onkar</dt>
<dd>Myself Onkar, I am a Full Stack Dev</dd>
<dt>Raj</dt>
<dd>I am a MERN Stack Dev</dd>
</dl>
HTML TABLES
• HTML tables are used to display data in a tabular format, consisting of rows and columns. Each table is made up of several components that define the structure, such as
headers, rows, and cells.
• Basic Structure of an HTML Table:
• <table>
• <tr>
• <th>Header 1</th>
• <th>Header 2</th> <table>: Defines the entire table.
• <th>Header 3</th> <tr>: Represents a row in the table.
• </tr>
<th>: Defines a header cell (bold and centered by
default).
• <tr>
• <td>Row 1, Cell 1</td>
• <td>Row 1, Cell 2</td>
<td>: Defines a standard table cell (data cell).
• <td>Row 1, Cell 3</td>
• </tr>
• <tr>
• <td>Row 2, Cell 1</td>
• <td>Row 2, Cell 2</td>
• <td>Row 2, Cell 3</td>
• </tr>
• </table>
• Example: <!DOCTYPE html>
• <html>
• <body>
• <h2>HTML Table Example</h2>
• <table border="1">
• <tr>
• <th>Product</th>
• <th>Price</th>
• <th>Quantity</th>
• </tr>
• <tr>
• <td>Apples</td>
• <td>$2</td>
• <td>10</td>
• </tr>
• <tr>
• <td>Bananas</td>
• <td>$1</td>
• <td>15</td>
• </tr>
• </table>
• </body>
• </html>
• Attributes in Tables:
• border: Adds a border around the table and cells.
• <table border="1">
• colspan: Allows a cell to span across multiple columns.
• <td colspan="2">This cell spans 2 columns</td>
• rowspan: Allows a cell to span across multiple rows.
• <td rowspan="2">This cell spans 2 rows</td>
• Example with colspan and rowspan:
• <table border="1">
• <tr>
• <th>Name</th>
• <th>Age</th>
• <th>Location</th>
• </tr>
• <tr>
• <td>John</td>
• <td rowspan="2">25</td>
• <td>New York</td>
• </tr>
• <tr>
• <td>Jane</td>
• <td>Los Angeles</td>
• </tr>
• <tr>
• <td colspan="2">Total</td>
• <td>2 People</td>
• </tr>
HTML FORMS AND INPUTS
• HTML forms are essential for collecting user input and sending it to the
server for processing.
• Forms contain various input elements like text fields, checkboxes, radio
buttons, and more, each designed to capture specific types of data.
• Basic Structure of an HTML Form:
<form action="/submit" method="POST">
<!-- Form elements go here -->
</form>
• <form>: This tag defines the form.
• action: The URL where the form data will be sent.
• method: The HTTP method used to send data (GET or POST).
• Common Input Types:
• The <input> tag is used to create various types of form fields. The type attribute specifies the kind of input
field.
• Text Input (type="text")
• Creates a single-line text input field.
• <label for="name">Name:</label>
• <input type="text" id="name" name="name">
• Password Input (type="password")
• Masks the input, commonly used for passwords.
• <label for="password">Password:</label>
• <input type="password" id="password" name="password">
• Email Input (type="email")
• Accepts email addresses and ensures the format is correct.
• <label for="email">Email:</label>
• Number Input (type="number")
• Allows input of numbers with optional restrictions (min, max, step).
• <label for="age">Age:</label>
• <input type="number" id="age" name="age" min="18" max="100">
• Checkbox (type="checkbox")
• Allows the user to select one or more options.
• <label>
• <input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter
• </label>
• Radio Button (type="radio")
• Lets the user select only one option from a set.
• <label>
• <input type="radio" name="gender" value="male"> Male
• </label>
• <label>
• <input type="radio" name="gender" value="female"> Female
• Submit Button (type="submit")
Submits the form data to the server.
• <input type="submit" value="Submit">
• Reset Button (type="reset")
Resets all form fields to their default values.
• <input type="reset" value="Reset">
<textarea id="message" name="message" <label for="country">Country:</label>
rows="4" cols="50"></textarea> <select id="country" name="country">
<option value="USA">United States</option>
<option value="UK">United Kingdom</option>
<option value="Canada">Canada</option>
</select>
BLOCK VS. INLINE ELEMENTS
Characteristics:
•Always start on a new line.
Block Elements •Take up the full width of the parent container.
Block elements occupy the full width available, •Can contain other block elements or inline
meaning they take up the entire width of their elements.
parent container and start on a new line. These •Create a block-level box around content.
elements generally contain other block or inline
elements, and they help structure the layout of a
web page.
ommon Block Elements:
div>: A generic container for block-level content.
<div>
h1> to <h6>: Heading tags for titles and subheadings. <h1>Block Elements Example</h1>
p>: Defines a paragraph. <p>This is a paragraph inside a
ul> and <ol>: Define unordered and ordered lists.
li>: List item inside a list.
block-level container (div).</p>
table>: Table structure. </div>
Inline Elements
Inline elements do not always start
on a new line; they remain in the
same line as surrounding content.
They only take up as much width as
necessary (the width of their content),
and they cannot contain block
elements. Characteristics:
•Do not always start on a new line.
•Take up only the width necessary for their content.
•Can only contain other inline elements or text.
Common Inline Elements: •Respect the boundaries of surrounding block
•<span>: A generic inline container for text. elements.
•<a>: Defines a hyperlink.
•<img>: Embeds an image.
•<strong>: Defines important text (bold). <p>This is an <strong>inline</strong> text insid
•<em>: Emphasizes text (italic). a <span>block element</span>.</p>
•<label>: Label for form elements.
•<input>: Input field in forms.
•<br>: Line break.
CLASSES AND IDS IN HTML
Classes:
•Definition: The class attribute is used to apply styles or functionality to multiple elements.
•Usage: Multiple elements can share the same class.
•CSS Selector: Use a dot (.) to target a class in CSS.
•JavaScript Access: You can access elements by their class using
[Link]() or querySelectorAll().
Example:
<div class="container">This is a container</div>
<p class="text">This is a paragraph</p>
<p class="text">This is another paragraph</p>
css
.text { color: blue; }
IDs (id):
•Definition: The id attribute uniquely identifies an element.
•Usage: Each element can have only one id, and the same id cannot be used on multiple elements.
•CSS Selector: Use a hash (#) to target an ID in CSS.
•JavaScript Access: You can access an element by its ID using [Link]().
Example:
html
<div id="main">Main Section</div> <p id="description">This is a unique paragraph</p>
css
#main { background-color: yellow; }
Key Differences:
•Class can be reused across multiple elements; ID is unique to
one element.
•Classes are ideal for styling groups of elements; IDs are often
used for individual elements.
IFRAME ELEMENT
The <iframe> element is used to embed another HTML document within the current document.
It allows you to include external content, such as other web pages,
videos, or interactive applications, directly inside your page.
Basic Syntax:
<iframe src="url" width="width" height="height“></iframe>
HTML5 SEMANTIC ELEMENTS
HTML5 introduced a variety of semantic elements that clearly describe their meaning in a human-
and machine-readable way. These elements help improve the structure of your HTML code and make
it more accessible for search engines and assistive technologies (like screen readers).
Common HTML5 Semantic Elements:
<header>
•Defines the introductory content or a section’s header
(often includes a logo, navigation, or introductory text).
•Typically placed at the top of a document or section.
<header>
<h1>My Website</h1> <nav>
<a href="#">Home</a>
<a href="#">About</a> </nav>
</header>
<nav>
•Represents a section of the page that contains navigation links.
•Used for menus, links to other parts of the site, or a table of contents.
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
•Specifies the primary content of a document.
•Only one <main> element should exist on a page.
•It contains the central content unique to the page (excluding sidebars, footers, etc.).
<main>
<h2>Main Content Section</h2>
<p>This is the main content of the page.</p>
</main>
<section>
•Represents a thematic grouping of content, typically with a heading.
•It is useful when you need to divide content into sections, especially for articles, chapters, or
parts of a webpage.
<section>
<h2>About Us</h2>
<p>Information about our company.</p>
</section>
<footer>
•Defines the footer for a section or document.
•Typically contains copyright information, links to terms of service, or author information.
<footer>
<p>© 2024 My Website</p>
</footer>
• audio
• video
• marquee
• progress
• blockquote - Used for long quotations (block-level)
• q - Inline short quotation
• code - displays in monospace and no font gets applied
• fieldset - Groups related form elements
• legend - Caption for a <fieldset>
• <colgroup> - Groups columns in a table for styling
• col - Defines individual column properties
• abbr - Abbreviation with optional tooltip
