HTML Notes (Structured Format for Study & Upload)
1. Introduction to HTML
HTML stands for HyperText Markup Language.
It is the standard markup language used to create web pages.
HTML describes the structure of a web document using a system of tags.
2. Basic Structure of an HTML Document
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Part Description
<!DOCTYPE html> Declares the document as HTML5
<html> Root element of the HTML page
<head> Contains metadata, links, and title
<title> Sets the title of the page (seen in browser tab)
<body> Contains visible page content
3. Common HTML Tags
Tag Purpose
<h1> to <h6> Headings (h1 = highest level)
<p> Paragraph text
Tag Purpose
<a> Anchor tag (used for hyperlinks)
<img> Embeds images
<br> Line break
<hr> Horizontal rule
<strong> Strong emphasis (bold)
<em> Emphasis (italic)
<ul> Unordered list
<ol> Ordered list
<li> List item
<div> Block-level container
<span> Inline container
4. Attributes in HTML
HTML tags may contain attributes that provide additional information.
Example:
html
CopyEdit
<a href="https://example.com" target="_blank">Visit Site</a>
Attribute Description
href Specifies the link URL in <a>
src Specifies image path in <img>
alt Alternative text for image
title Tooltip text
target="_blank" Opens link in a new browser tab
id Unique identifier for an element
class Defines a class for styling via CSS
5. Headings and Paragraphs
html
CopyEdit
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text.</p>
<h1> is the largest heading, <h6> is the smallest.
Paragraphs are defined with the <p> tag.
6. Links and Images
html
CopyEdit
<a href="https://example.com">Click Here</a>
<img src="image.jpg" alt="Description">
<a> is used to define hyperlinks.
<img> is used to display images; it is a self-closing tag.
7. Lists
Unordered List
html
CopyEdit
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List
html
CopyEdit
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
8. HTML Forms (Basics)
html
CopyEdit
<form action="/submit" method="post">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
Element Description
<form> Creates a form
action URL to send data to
method get or post
<input> User input field
<textarea> Multi-line text input
<button> Clickable button
9. Semantic HTML5 Tags
Tag Purpose
<header> Defines the top section of a page
<nav> Contains navigation links
<main> Main content area
<section> Represents a section of content
<article> Independent piece of content
<aside> Sidebar or related content
<footer> Footer section of a page
10. HTML Comments
html
CopyEdit
<!-- This is a comment -->
Comments are not rendered by the browser.
11. Nesting and Structure
HTML elements must be properly nested.
html
CopyEdit
<b><i>Bold and Italic Text</i></b>
12. Self-Closing Tags
Tags that don’t require a closing tag:
<br> – Line break
<hr> – Horizontal line
<img> – Image
13. Doctype Declaration
html
CopyEdit
<!DOCTYPE html>
This must be the first line in an HTML document.
It tells the browser the version of HTML being used (HTML5).
14. Case Sensitivity and Whitespace
HTML tags are not case sensitive (but lowercase is standard).
Extra whitespace is generally ignored in rendering.
15. File Extension and Execution
HTML files should be saved with .html extension.
Open the file in any browser to render the content.
