📘 Frontend Development & HTML
Notes
🔹 SECTION 1: What is Frontend Development?
Frontend Development refers to the part of web development that involves
building the user interface (UI) and user experience (UX) of a website or web
application.
� Components of Frontend:
HTML (HyperText Markup Language): Structure of the webpage
CSS (Cascading Style Sheets): Styling and layout
JavaScript: Interactivity and dynamic behavior
🔹 SECTION 2: What is HTML?
HTML (HyperText Markup Language) is the standard language used to create
and design the structure of web pages.
✅ Features:
Describes the structure of web content
Uses elements (tags)
Works with CSS and JavaScript
🔹 SECTION 3: HTML Elements & Tags
🔸 What is a Tag?
A tag is a keyword enclosed in angle brackets (< >) that defines an element.
Example:
<p>This is a paragraph.</p>
🔸 Opening Tag & Closing Tag
Opening Tag: <tagname>
Closing Tag: </tagname>
Example:
<h1>This is a heading</h1>
Some tags are self-closing:
<img src="image.jpg" alt="Sample Image" />
<br />
<hr />
🔹 SECTION 4: HTML Element Structure
<tagname attribute="value">Content</tagname>
Example:
<a href="https://example.com">Visit Example</a>
Element: The complete structure from opening tag to closing tag
Content: What is inside the element
Attributes: Provide additional info about the element
🔹 SECTION 5: What is an Attribute?
Attributes provide additional information about HTML elements. They are
always included in the opening tag and usually appear as name/value pairs
like:
attribute="value"
🔹 SECTION 6: Common HTML Attributes
Attribute Description Used With
id Unique identifier All elements
class CSS class All elements
style Inline styling All elements
title Tooltip text All elements
href URL reference <a>
Attribute Description Used With
src Source of media <img>, <video>, <audio>
alt Alternative text <img>
type Input type <input>
value Predefined value <input>, <button>
placeholder Hint text <input>
name Form element name <input>, <form>
action Form submission URL <form>
method HTTP method (GET/POST) <form>
target Open link in new tab (_blank) or same (_self) <a>, <form>
🔹 SECTION 7: Basic HTML Tags
Tag Description
<html> Root of the HTML document
<head> Metadata, title, links
<title> Title shown in browser tab
<body> Visible page content
<h1> to <h6> Headings (largest to smallest)
<p> Paragraph
<br> Line break (self-closing)
<hr> Horizontal rule (self-closing)
<a> Anchor (link)
<img> Image (self-closing)
<ul> Unordered list
<ol> Ordered list
<li> List item
<div> Block container
<span> Inline container
<strong> / <b> Bold text
<em> / <i> Italic text
<form> HTML form
<input> Input field
<button> Clickable button
<label> Label for input
<textarea> Multi-line input
<select> Dropdown menu
<option> Option in dropdown
Tag Description
<table> Table
<tr> Table row
<td> Table data cell
<th> Table header cell
🔹 SECTION 8: Semantic HTML Tags
Semantic tags describe the meaning of the content:
Tag Meaning
<header> Page or section header
<nav> Navigation links
<main> Main content
<section> Section of content
<article> Independent article
<aside> Sidebar or extra content
<footer> Footer of page or section
🔹 SECTION 9: HTML Forms Overview
Forms are used to collect user input.
Example:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="username" placeholder="Enter your name" required />
<button type="submit">Submit</button>
</form>
Common Input Types:
text
password
email
radio
checkbox
submit
button
file
number
date
🔹 SECTION 10: Doctype & HTML Boilerplate
✅ Basic HTML Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
<!DOCTYPE html> – Declares HTML5 document
<meta charset="UTF-8"> – Character encoding
<meta name="viewport"> – Responsive scaling
