How to Create an HTML Document 💻 Introduction
1. How to Create an HTML Document Introduction
- Start with
<!DOCTYPE html>declaration - Wrap everything in
<html>tags with language attribute likelang="en" - Add a
<head>section containing metadata like<meta charset="UTF-8">and<title> - Place all visible content within the
<body>element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>How to Create Paragraphs
Use the <p> tag with opening and closing tags:
<p>This is my first blog post where I'm practicing my HTML skills.</p>How to Add Headings
Use heading tags from <h1> to <h6>:
<h1>Hello, HTML!</h1>
<h2>Subtitle</h2>How to Create Hyperlinks
Use the <a> tag with href attribute:
<a href="about.html">click here to visit the about page</a>How to Insert Images
Use the <img> tag with src and alt attributes:
<img src="https://via.placeholder.com/600x400" alt="A placeholder image">How to Add Attributes to Elements
Specify attributes in the opening tag using format attribute="value":
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="description">How to Create Self-Closing Elements
Use void elements like <br> or <img> without closing tags:
<p>First line<br>Second line</p>
<img src="image.jpg" alt="image">How to Add Alternative Text to Images
Include the alt attribute in <img> tags:
<img src="image.jpg" alt="Description of what the image shows">How to Create a Title for Your Webpage
Use the <title> tag within the <head> section:
<title>My First Blog Post</title>How to Add Tooltips to Links
Use the title attribute in <a> tags:
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" title="Visit the MDN Web Docs for HTML">MDN HTML documentation</a>