Editors, First Page, Elements & Attributes

An HTML editor is any program where you type code. VS Code is free and very popular. You can also use Notepad, Sublime Text, or online editors.

HTML Editors

An HTML editor is any program where you type code. VS Code is free and very popular. You can also use Notepad, Sublime Text, or online editors.

Install VS Code, create a file ending in .html, and open it in Chrome or Firefox. Press F12 to open DevTools and inspect your page.

Real-life example: An editor is like your school notebook. The .html file is one page. You write on it, save, and show it to the browser (teacher) to check.

VS Code — free, color highlights, extensions
Live Server extension — auto refresh when you save
Browser DevTools (F12) — see HTML tree and errors

HTML Basic — your first page

Every HTML page starts with <!DOCTYPE html>. Then comes <html>, with <head> (hidden info) and <body> (visible content).

Save the file, double-click it, or use Live Server. You will see your text in the browser tab and on the page.

Real-life example: <!DOCTYPE html> is like writing "Official Letter" at the top. <head> is the envelope label (address, stamp). <body> is the letter people actually read.

Your first HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, Rishtaara!</h1>
  <p>This is my first web page.</p>
</body>
</html>

HTML Elements

An element has an opening tag, content, and a closing tag. Example: <p>Hello</p>. Some tags are empty (void) and have no closing tag, like <br>, <img>, and <hr>.

Tags are written in lowercase. Nesting means putting one element inside another — always close inner tags before outer tags.

Real-life example: An element is like a lunch box (tag) with food inside (content). You open the box, eat, and close it. Nested boxes go inside bigger boxes.

Tip: If your page looks wrong, check that every opening tag has a matching closing tag.

Elements and nesting

<h1>Main Title</h1>
<p>This paragraph has <strong>bold text</strong> inside.</p>
<br />
<hr />

HTML Attributes

Attributes give extra information to elements. They go inside the opening tag as name="value". Common ones: href, src, alt, class, id, and style.

Always use quotes around attribute values. One element can have many attributes.

Real-life example: A student ID card has attributes — name, roll number, class. The card (element) stays the same; the details (attributes) change for each student.

Common attributes

<a href="https://rishtaara.com">Visit Rishtaara</a>
<img src="photo.jpg" alt="My photo" width="200" />
<p class="intro" id="welcome">Welcome!</p>