HTML stands for HyperText Markup Language and it's used to structure web pages and their content. It's the backbone of a web page, allowing designers and developers to create a visually appealing and well-organized online experience.
The basics of HTML are easy to grasp. The basics of HTML are indeed quite straightforward, making it accessible for beginners to start learning in just a few hours. By actively applying what you've learned through hands-on projects and exercises over the course of about a month, you will significantly enhance your proficiency in HTML. So don't hesitate to dive into coding exercises or even create simple web pages on your own as part of your practice routine.
Basic Structure of HTML
<!DOCTYPE html>
<html>
<head>
<title>The title</title>
</head>
<body>
<h1>My Website</h1>
<p>My content</p>
</body>
</html>
In order to better understand the concept, let's take a closer look at the basic structure of an HTML5 document as depicted in the above snippet. To do this, we'll need to open the developer tools. The quickest way to access them is by using the Inspect button. Simply right-click on this page and select Inspect from the menu. This will provide us with valuable insights into how HTML elements are structured and can help enhance our comprehension of HTML coding principles.
Let's break down the elements here.
- <!DOCTYPE html>: This tells you that its an HTML5 document. Its present at the top of each HTML document.
- Tags <>...</>: The structure of an HTML element consists of three essential parts: a start tag <>, the content, and an end tag </>.
Certain HTML elements, do not contain any content. These elements are commonly referred to as empty elements. It is important to note that empty elements do not require an end tag.
- <html>: This is the root element of an HTML page.
- <head>: This element in an HTML page holds crucial meta information that is essential for optimizing web pages. It includes important details like the title, description, keywords, and character encoding. This meta information plays a pivotal role in enhancing search engine visibility and attracting more organic traffic to your website. Giving due attention to the element will ensure that your HTML page is well-structured and strategically optimized for maximum impact.
- <title>: This tag defines the title of an HTML page. It appears in the title bar and tab of the browser and also helps in conveying the essence of the page to users.
- <body>: The element is an essential component for organizing your document, acting as a comprehensive container for all the visual elements that comprise its content. It efficiently manages and structures various elements such as headings, paragraphs, images, hyperlinks, tables, lists, and much more.
- <h1>: This tag defines a heading elements. We will look at all major HTML elements in upcoming articles.
References: