Here’s a simple HTML sample code for beginners. This example includes the basic structure of an HTML document, along with some common elements like headings, paragraphs, links, and images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<main>
<section id="about">
<h2>About Me</h2>
<p>Hello! My name is John, and I'm learning HTML. This is my first webpage.</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
</section>
<section id="services">
<h2>Services</h2>
<p>Here are some services I offer:</p>
<ul>
<li>Web Design</li>
<li>Content Writing</li>
<li>SEO Optimization</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>You can reach me at <a href="mailto:john@example.com">john@example.com</a>.</p>
</section>
</main>
<!-- Footer Section -->
<footer>
<p>© 2023 My First Website. All rights reserved.</p>
</footer>
</body>
</html>
Explanation:
-
<!DOCTYPE html>: Declares the document type and version of HTML (HTML5 in this case). -
<html>: The root element of the HTML document. -
<head>: Contains meta-information about the document, such as the character set, viewport settings, and the title. -
<title>: Sets the title of the webpage, which appears in the browser tab. -
<body>: Contains the visible content of the webpage. -
<header>: Typically includes the website's header, such as the title and navigation menu. -
<nav>: Defines a navigation menu with links. -
<main>: Represents the main content of the webpage. -
<section>: Used to group related content. -
<h1>,<h2>: Headings of different levels (h1 is the highest, h6 is the lowest). -
<p>: Defines a paragraph. -
<img>: Embeds an image in the webpage. -
<ul>and<li>: Create an unordered list and list items. -
<a>: Defines a hyperlink. -
<footer>: Contains the footer content, such as copyright information.
How to Use:
- Copy the code into a text editor (e.g., Notepad, VS Code).
- Save the file with a
.htmlextension (e.g.,index.html). - Open the file in a web browser to see the result.
This is a great starting point for learning HTML! You can modify the content and experiment with different tags to see how they work.
I found this amazing website where you can download tons of beautiful free HTML templates to use for your study.
Top comments (0)