HTML Tutorial
HTML Basics
HTML, or HyperText Markup Language, is the backbone of web development, forming the structure and content of web pages. Understanding HTML is essential for anyone interested in creating or designing websites. This guide will walk you through the fundamental aspects of HTML, from basic tags to more advanced elements, and provide practical examples to help you get started.
What is HTML?
HTML stands for HyperText Markup Language and serves as the standard language for creating web pages. It uses a system of tags to define elements on a page, instructing the web browser on how to display content. HTML structures the content, creating a framework that other technologies like CSS and JavaScript enhance.
Table of Contents
- Basic HTML Document Structure
- HTML Headings
- HTML Paragraphs and Breaks
- HTML Horizontal Lines
- HTML Images
- Viewing HTML Source Code
- FAQs – HTML Basics
Basic HTML Document Structure
Every HTML document begins with a declaration that defines the document type and version of HTML being used. This is followed by the main HTML structure, which includes the <html>, <head>, and <body> tags. Here’s a basic template:
Basic HTML Tags
| Tag | Description |
|---|---|
<html> | Encloses the entire HTML document. |
<head> | Contains metadata and links to external resources like stylesheets and scripts. |
<title> | Defines the title of the document, shown in the browser’s title bar or tab. |
<body> | Encloses the visible content of the webpage, such as text, images, and links. |
Example 1: Basic HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<p>Welcome to the HTML basics guide!</p>
</body>
</html>
Output:
A simple webpage with a paragraph displaying “Welcome to the HTML basics guide!”
HTML Headings
Headings are essential for structuring content and improving readability. HTML provides six levels of headings, from <h1> to <h6>, each decreasing in size.
Syntax:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<!-- and so on -->
Example 2: HTML Headings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Headings</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
Output:
Headings ranging from large (h1) to small (h6).
HTML Paragraphs and Breaks
Use the <p> tag to create paragraphs, and the <br> tag for line breaks. The <p> tag automatically adds space before and after paragraphs, while <br> inserts a single line break without additional spacing.
Syntax:
<p>This is a paragraph.</p>
<br>
Example 3: Paragraphs and Breaks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraphs and Breaks</title>
</head>
<body>
<p>
HTML stands for HyperText Markup Language.<br>
It structures web pages using a markup language.<br>
HTML defines the layout and links between pages.<br>
It includes various elements and attributes to format content.
</p>
</body>
</html>
Output:
A paragraph with line breaks separating each sentence.
HTML Horizontal Lines
The <hr> tag creates a horizontal line across the page, useful for dividing sections or content.
Syntax:
<hr>
Example 4: Horizontal Lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Lines</title>
</head>
<body>
<h1>Section 1</h1>
<p>Content for the first section.</p>
<hr>
<h1>Section 2</h1>
<p>Content for the second section.</p>
<hr>
</body>
</html>
Output:
Content separated by horizontal lines.
HTML Images
The <img> tag inserts images into a webpage. The src attribute specifies the image source, while the alt attribute provides alternative text for accessibility.
Syntax:
<img decoding="async" src="image_url" alt="Description of image">
Example 5: Inserting Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images in HTML</title>
</head>
<body>
<img decoding="async" src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>
Output:
Displays a placeholder image.
Viewing HTML Source Code
To view the HTML code of a webpage:
- Entire Page: Press
Ctrl + Uor right-click and select “View Page Source.” - Specific Element: Right-click the element and choose “Inspect” to view its HTML and CSS in the browser’s developer tools.
FAQs – HTML Basics
1. What are the basics of HTML?
Basics include understanding the document structure, HTML tags, attributes, and elements.
2. What are the fundamental rules of HTML?
- The basic structure includes
<!DOCTYPE>,<html>,<head>,<title>, and<body>. - Tags are enclosed in
<and>, with opening and closing tags (e.g.,<h1>...</h1>). - HTML is case-insensitive.
3. What are the uses of HTML?
HTML is used to create and structure web pages, embed multimedia, and establish hyperlinks. It forms the foundation of web content.
Thank You for Visiting Codeezy.org!
We’re thrilled to have you as part of our coding community. Your engagement and support inspire us to continue providing high-quality resources and tools to enhance your web development journey. Whether you’re a beginner or an experienced coder, we hope you found valuable insights and tools here at Codeezy.
Stay connected for more tips, tutorials, and updates to help you code with ease. Thank you for choosing Codeezy.org—your growth as a developer is our motivation!
Happy coding!