# Beginner Level HTML Tutorial ## Table of Contents 1. [Introduction to HTML](#introduction-to-html) - [What is HTML?](#what-is-html) - [Why HTML?](#why-html) - [Installing a Text Editor](#installing-a-text-editor) 2. [Basic Structure](#basic-structure) - [HTML Document Structure](#html-document-structure) - [Doctype Declaration](#doctype-declaration) - [HTML Elements](#html-elements) - [HTML Attributes](#html-attributes) 3. [Common HTML Elements](#common-html-elements) - [Headings](#headings) - [Paragraphs](#paragraphs) - [Links](#links) - [Images](#images) - [Lists](#lists) - [Ordered List](#ordered-list) - [Unordered List](#unordered-list) - [Definition List](#definition-list) - [Tables](#tables) - [Forms](#forms) 4. [Semantic HTML](#semantic-html) - [Semantic Elements](#semantic-elements) 5. [HTML5 Features](#html5-features) - [Audio and Video](#audio-and-video) - [Canvas](#canvas) - [Geolocation](#geolocation) 6. [HTML Best Practices](#html-best-practices) - [Use Semantic Elements](#use-semantic-elements) - [Keep Code Clean and Readable](#keep-code-clean-and-readable) - [Optimize Images](#optimize-images) - [Validate HTML](#validate-html) 7. [Conclusion](#conclusion) ## Introduction to HTML ### What is HTML? - HTML (HyperText Markup Language) is the standard language for creating web pages and web applications. - HTML describes the structure of a web page using markup. - HTML elements are represented by tags. ### Why HTML? - HTML is the foundation of web development, used to structure content on the web. - It is easy to learn and widely supported across all web browsers. - Knowledge of HTML is essential for creating and designing websites. ### Installing a Text Editor - To write HTML, you need a text editor. Some popular options include: - Visual Studio Code (https://code.visualstudio.com/) - Sublime Text (https://www.sublimetext.com/) - Atom (https://atom.io/) - Notepad++ (https://notepad-plus-plus.org/) - You can also use a simple text editor like Notepad (Windows) or TextEdit (Mac). ## Basic Structure ### HTML Document Structure - An HTML document is made up of various elements that define its structure. - Example: ```html My First HTML Page

Hello, World!

This is my first HTML page.

``` ### Doctype Declaration - The `` declaration defines the document type and version of HTML. - It should be the first line in an HTML document. ### HTML Elements - HTML elements are defined by a start tag, some content, and an end tag. - Example: ```html

This is a paragraph.

``` ### HTML Attributes - HTML elements can have attributes that provide additional information about the element. - Attributes are always included in the opening tag and usually come in name/value pairs like `name="value"`. - Example: ```html This is a link ``` ## Common HTML Elements ### Headings - Headings are used to define headings of different levels in an HTML document. - There are six levels of headings, from `

` to `

`. - Example: ```html

This is a heading 1

This is a heading 2

``` ### Paragraphs - The `

` element defines a paragraph. - Example: ```html

This is a paragraph.

``` ### Links - The `` element (anchor) is used to create hyperlinks. - Example: ```html Visit Example.com ``` ### Images - The `` element is used to embed images. - The `src` attribute specifies the path to the image. - Example: ```html Description of image ``` ### Lists - HTML supports ordered lists (`
    `), unordered lists (`