HTML (HyperText Markup Language) is the foundational language for creating web pages. Here's a basic overview to help you get started:
Basic Structure of an HTML Document
An HTML document has a specific structure that includes several key components:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple paragraph on my web page.</p>
</body>
</html>
Explanation of Structure
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML.
2. `<html>`: This root element contains all the other elements and specifies the language of the document.
3. `<head>`: Contains meta-information about the document, such as its character set, title, and links to stylesheets or scripts.
4. `<title>`: Sets the title of the document, which is displayed in the browser's title bar or tab.
5. `<body>`: Contains the content of the document that is displayed in the browser.
Common HTML Elements
Headings: Define the headings of sections on a webpage.
<h1>Main Heading</h1>
<h2>Subheading</h2>
Paragraphs: Define blocks of text.
<p>This is a paragraph.</p>
Links: Create hyperlinks to other pages or resources.
<a href="https://www.example.com">Visit Example.com</a>
Images: Embed images in a webpage.
<img src="image.jpg" alt="Description of the image">
Lists: Create ordered (numbered) and unordered (bulleted) lists.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Attributes
HTML tags can have attributes that provide additional information about the elements. Attributes are included within the opening tag and usually come in name/value pairs.
Example with an image tag:
<img src="image.jpg" alt="A description of the image" width="500" height="300">
Comments
Comments can be added to HTML code to explain sections or leave notes. Comments do not display in the browser.
<!-- This is a comment -->
More Elements
Tables: Used to display tabular data.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Forms: Used to collect user input.
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Conclusion
HTML is the basic building block of web development. By learning and using these fundamental elements and structures, you can create simple web pages. As you progress, you can learn more about styling your HTML with CSS (Cascading Style Sheets) and adding interactivity with JavaScript.