Basic Concepts in HTML / Elements

html elements basics
10 November 2024

Okay, let's talk a little about HTML. HTML, or HyperText Markup Language, is the primary language used to describe content for websites. This language might seem simple at first glance, but it is essential for all web pages. The primary goal of HTML is to make it easier for the browser to understand the content of a web page and how it should be displayed.

Each HTML element consists of two main parts: the opening tag, which is usually named after the element and includes smaller and larger symbols (< and >), and the closing tag, which is similar to the opening tag but starts with a slash (/). Some HTML elements do not require a closing tag and are referred to as self-closing elements.

When using HTML, one should consider what role each part of the page's content plays. Is this a title, a paragraph from the text, an image, or perhaps even a link to another page?

In HTML, tags are used to structure the elements. For example, headings are created using the <h1> to <h6> tags. <h1> is the most important and largest heading, while <h6> is the least important and smallest heading.

A very common question beginners face is: "How do I understand what tag to use for what?" The answer is that HTML is very logically designed, and the tag names often indicate what they are meant for.

This is a great area to work in because HTML is a completely artistic subject; it can be stunning because understanding page content and the relationships between various elements is necessary. You can achieve extraordinary results with practice and experience.

Sample Code for Creating a Simple HTML Page

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
</head>
<body>
<h1>Welcome to the website</h1>
<p>This is a sample paragraph on a simple web page.</p>
<a href="https://minilearn.ir">Learn More</a>
</body>
</html>

Line by Line Explanation of the Code

<!DOCTYPE html>: Defines the version of HTML being used.
<html lang="fa">: Specifies the language of the page as Persian.
<head>: The head section, which contains metadata and the title of the page.
<meta charset="UTF-8">: Sets the character encoding for the page to support many languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the page responsive to various devices.
<title>Simple HTML Page</title>: The name of the page shown in the browser tab.
<body>: The main content of the webpage goes in this section.
<h1>Welcome to the website</h1>: A large heading welcoming users.
<p>This is a sample paragraph on a simple web page.</p>: A paragraph explaining the webpage.
<a href="https://minilearn.ir">Learn More</a>: A link directing users to another website.

FAQ

?

How do I create a new HTML element?

?

What is the difference between opening and closing tags?

?

Do all tags need a closing tag?