Scribd
Upload
4 views5 pages

HTML

The document provides an overview of Frontend Development, focusing on HTML as the standard language for structuring web pages. It covers key components such as HTML elements, tags, attributes, and common HTML tags, as well as semantic HTML and forms. Additionally, it includes a basic HTML template for creating a web document.

Uploaded by

Brawl Blitz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views5 pages

HTML

The document provides an overview of Frontend Development, focusing on HTML as the standard language for structuring web pages. It covers key components such as HTML elements, tags, attributes, and common HTML tags, as well as semantic HTML and forms. Additionally, it includes a basic HTML template for creating a web document.

Uploaded by

Brawl Blitz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

📘 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

You might also like