Introduction & Tools

1. What is HTML5?

HTML stands for HyperText Markup Language. It is the fundamental language used to structure content on the World Wide Web.

• HyperText: Refers to the text that contains links (hyperlinks) to other resources or documents.
• Markup Language: Means it uses tags (e.g., <p>, <h1>) to define and organize the elements within a document. It tells the browser what each piece of content is (a paragraph, a heading, an image) rather than what it looks like.
• HTML5: The current and most widely adopted version of the language, introducing new semantic tags (like <header>, <article>) and APIs (like <canvas>).

The Web Development Trio

HTML is rarely used alone. It works in conjunction with two other core technologies:

Technology	Role	Example
HTML	Structure	Defines the text, headings, links, and overall layout.
CSS	Style	Dictates presentation: colors, fonts, margins, and responsiveness.
JavaScript	Behavior	Adds interactivity, complex animations, and dynamic updates (e.g., clicking a button).

2. Setting Up Your Local Environment

To write and test HTML code efficiently, you need a good text editor and a way to view your changes instantly.

A. The Text Editor: VS Code

We recommend VS Code (Visual Studio Code). It is free, cross-platform, and offers robust support for web development.

• Syntax Highlighting: Makes tags and attributes color-coded for readability.
• IntelliSense: Provides helpful code suggestions and autocompletion.

B. The Essential Extension: Live Server

A key challenge when developing HTML locally is that simply opening the file (e.g., file:///C:/index.html) doesn’t always handle complex paths or JavaScript features correctly.

The Live Server extension (by Ritwick Dey, available in the VS Code Marketplace) solves this:

• It launches a small local development server (e.g., http://127.0.0.1:5500/).
• Crucially, it automatically reloads the browser tab whenever you save a change in your HTML, CSS, or JavaScript files.

3. Execution and Workflow

Follow these steps for a streamlined learning experience:

1. Installation: Install VS Code and the Live Server extension.
2. Create: Create a new folder for your project (e.g., html_course). Inside it, create a file named index.html.
3. Bootstrap: In VS Code, type ! and press Tab. VS Code will generate the basic, required structure for an HTML5 document.
4. Run: Right-click anywhere in your index.html file and select Open with Live Server.
5. Develop: Write your code, save the file (Ctrl+S), and watch the browser update instantly.

Getting Started: Tools and Local Environment (H1.1 Detail)

To start learning and developing HTML5, you only need two things: a text editor and a web browser.

1. Text Editor (The Best Tool)

We recommend using a feature-rich, free code editor like VS Code (Visual Studio Code).

• Syntax Highlighting: Colors your code to make tags, attributes, and text easy to read.
• IntelliSense/Autocompletion: Suggests valid HTML tags and attributes as you type.
• Recommended Extension: Install the Live Server extension (by Ritwick Dey). This allows you to launch your HTML file in a local web server that automatically reloads the page in your browser every time you save changes, speeding up development.

2. Web Browser (The Runtime)

Any modern browser (Chrome, Firefox, Edge) will work perfectly.

• Developer Tools: Learn to use the browser’s built-in Developer Tools (usually opened by pressing F12 or right-clicking and selecting Inspect). This tool is essential for debugging and viewing the DOM (Document Object Model).

3. Execution (The Workflow)

1. Create: Open VS Code and create a new file named index.html.
2. Write: Type your HTML code into the file.
3. Run: Right-click inside the index.html file and select “Open with Live Server.”
4. View: Your default browser will open the page, and every time you press Ctrl+S (Save), the page will update instantly.