HTML (HyperText Markup Language) is the backbone of all web pages. It structures the content, allowing browsers to display text, images, and other elements correctly. Understanding the main HTML elements and how to use them is crucial for any web developer.
This page teaches you how to write in HTML using some of the main HTML elements.
HTML uses a series of elements, represented by tags, to structure content. Each element has an opening tag, content, and a closing tag. For example:
<p>This is a paragraph.</p>Here, <p> is the opening tag, </p> is the closing tag, and the text between them is the content.
Headings are used to create titles and subtitles in your content. They range from <h1> to <h6>, with <h1> being the most important.
<h1>Main Heading</h1>
<h2>Subheading</h2>Headings help structure your content and improve SEO by indicating the importance of sections.
Paragraphs are used to separate blocks of text. They are essential for readability.
<p>This is a paragraph of text.</p>Links (or hyperlinks) connect one web page to another or to different sections of the same page. They are created using the <a> tag.
<a href="https://www.example.com">Visit Example</a>
Images enhance visual appeal and can be added using the <img> tag. It’s important to use the alt attribute for accessibility and SEO.
<img src="https://yourwebsite.com/path-to-image/image.jpg" alt="Description of image">Lists are used to group related items. There are ordered lists <ol> for numbered items and unordered lists <ul> for bullet points.
<ul> <li>Item one</li> <li>Item two</li> </ul>
<ol> <li>First item</li> <li>Second item</li> </ol>Forms are essential for collecting user input. They consist of various input elements like text fields, radio buttons, and submit buttons.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>Here’s an example of a simple HTML document using some of the elements discussed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph introducing my site.</p>
<img src="welcome.jpg" alt="Welcome Image">
<a href="https://www.example.com">Learn more</a>
<h2>Topics Covered</h2>
<ul>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>JavaScript Programming</li>
</ul>
<h2>Contact Us</h2>
<form action="/submit" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Subscribe">
</form>
</body>
</html>Understanding and using HTML elements correctly is the foundation of web development. By mastering these basic elements, you can create structured, accessible, and SEO-friendly web pages. Practice using these elements in your projects to gain proficiency and improve your web development skills.
Ready to start building your web pages? Explore more tutorials on HTML, CSS, and JavaScript on HowCodingWorks and take your web development skills to the next level.
Quick Links
Social Media
