Basic Structure of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text in the body of the document.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>- Declares the document type and version of HTML.
- In modern web development, this tells the browser to render the page using the latest HTML version (HTML5 in this case).
<html lang="en">- The root element of the HTML document.
- The
lang="en"attribute specifies the language of the document (English in this case).
<head>- Contains metadata and links to external resources like stylesheets and scripts. The content inside the
<head>is not displayed directly on the webpage.
- Contains metadata and links to external resources like stylesheets and scripts. The content inside the
<meta charset="UTF-8">- Specifies the character encoding for the document.
UTF-8is a common encoding that supports most characters used on the web.
- Specifies the character encoding for the document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">- Controls the layout on mobile browsers. It ensures the page scales correctly on different devices.
<meta http-equiv="X-UA-Compatible" content="IE=edge">- Ensures compatibility with Internet Explorer’s rendering engine.
<title>Document Title</title>- Specifies the title of the webpage, which appears in the browser tab.
<body>- The content of the webpage that is visible to users.
- Everything inside the
<body>tag is displayed in the browser.
<h1>Hello, World!</h1>- This is a heading element (level 1). It displays the main heading or title of the content.
<p>This is a paragraph...</p>- This is a paragraph element. It contains a block of text inside the body.
HTML Tutorial Index
HTML Elements
- HTML Tags and Elements
- Nesting HTML Elements
- Block-level vs Inline Elements
- Empty (Void) Elements
HTML Document Structure
- The
<html>,<head>, and<body>Tags - Metadata:
<meta>,<title> - Linking External Files:
<link>
HTML Headings, Paragraphs, and Text Formatting
- Headings:
<h1>to<h6> - Paragraphs:
<p> - Line Breaks and Horizontal Rules:
<br>,<hr> - Text Formatting Tags:
<b>,<i>,<strong>,<em>,<mark>
HTML Links (Hyperlinks)
- Creating Links: The
<a>tag - Internal Links vs External Links
- Opening Links in New Tabs:
target="_blank" - Linking to Email or Phone Numbers
HTML Images
- Adding Images: The
<img>tag - Image Attributes:
src,alt,height,width - Responsive Images
- Image Formats and Optimization
HTML Lists
- Ordered Lists:
<ol> - Unordered Lists:
<ul> - Definition Lists:
<dl> - Nesting Lists
HTML Tables
- Basic Table Structure:
<table>,<tr>,<td>,<th> - Table Headers and Footers
- Merging Cells:
rowspan,colspan - Styling Tables with CSS
HTML Forms
- The Form Tag:
<form> - Input Types:
<input>,text,password,email,number, etc. - Form Controls:
<textarea>,<select>,<option>,<button> - Form Validation and Attributes
- File Uploads
HTML Multimedia
- Embedding Audio:
<audio>tag - Embedding Video:
<video>tag - Adding Captions and Subtitles
- Embedding YouTube Videos
HTML Semantics
- Semantic Elements:
<header>,<footer>,<article>,<section>,<aside>,<nav> - Importance of Using Semantic Tags
HTML5 New Features
- The New Input Types:
email,date,url,range - Geolocation API
- Canvas API: Drawing Graphics
- Local Storage and Session Storage
HTML Attributes
- Global Attributes
- The
idandclassAttributes styleand Inline CSStitleanddata-*Attributes
HTML Accessibility
- Adding
altText for Images - Using ARIA Attributes
- Best Practices for Accessibility
HTML Best Practices
- Writing Clean and Readable Code
- File Naming Conventions
- Organizing Project Files
- Comments and Documentation
HTML and CSS
- Linking CSS to HTML:
<link>,<style> - Inline, Internal, and External CSS
- Using CSS for Layout and Design
HTML and JavaScript
- Adding JavaScript:
<script> - Event Handling with HTML
- Using JavaScript for Interactivity
Responsive Web Design
- Meta Viewport Tag
- Mobile-First Design
- Media Queries
HTML Tools and Resources
- HTML Validators
- Browser Developer Tools
- Online Code Editors and Resources
