■ HTML Notes for Beginners
■ 1. HTML Basics
HTML = HyperText Markup Language
Used to create structure of web pages
File extension: .html
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a
heading</h1> <p>This is a paragraph.</p> </body> </html>
■■ 2. Common HTML Tags
Tag Description
<h1> to <h6> Headings (H1 is biggest)
<p> Paragraph
<br> Line Break
<hr> Horizontal Line
<a href='URL'> Hyperlink
<img src='path'> Image
<ul>, <ol>, <li> Lists (unordered, ordered)
<div> Block container
<span> Inline container
<strong> / <b> Bold text
<em> / <i> Italic text
■■ 3. Image and Link Example
<a href="https://google.com">Visit Google</a> <img src="image.jpg" alt="Image
description" width="300">
■ 4. Forms (Input fields)
<form> <label>Name:</label> <input type="text" name="username"><br>
<label>Password:</label> <input type="password"><br> <input type="submit"
value="Login"> </form>
■ 5. Styling (Inline CSS)
<p style="color:blue; font-size:18px;">Styled paragraph</p>
■ 6. Semantic Tags
Tag Meaning
<header> Top section
<footer> Bottom section
<nav> Navigation
<main> Main content
<section> Grouped content
<article> Independent content
■ 7. Best Practices
Use semantic tags for SEO Always include alt in <img> Close all tags properly Use indentation for
readability
