Introduction in Simple Language
We have all heard the name HTML; it is a language that is the foundation of web design. In this explanation, we want to take a simple and straightforward look at various HTML elements and their primary applications. So far, you may have imagined that a web page is like a book? HTML is like the guidelines that help us build this book chapter by chapter in a coherent and understandable manner. For example, each of the HTML tags corresponds to sentences and paragraphs of a book and creates a more readable site.
At the beginning, when starting to design, it might occur to you, "Where do I use each of these tags?" But don’t worry, every tag has its own use in different sections of the website. For instance, the textual tags like <h1> or <p> and the lists like <ul> and <ol>. Each of these tags serves a specific purpose.
To clarify the topic, let’s consider a simple example. Imagine you want to create a web page that includes a title, a paragraph, and several list items. Well, we will use <h1> for the title, <p> for the paragraph, and for the list, we will use <ul> or <ol>.
When writing code in HTML, you should always pay attention to the structure and make sure everything is right. The main goal is that it should not only be understandable by computers and browsers but also be easily interpreted by developers.
Now, let’s take a small practical example together. Here, we will create a simple HTML page that includes all these elements.
<!DOCTYPE html>.
<html lang="fa">.
<head>.
<meta charset="UTF-8">.
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
<title>HTML Example Page</title>.
</head>.
<body>.
<h1>This is a sample title</h1>.
<p>This is a sample paragraph that aims to provide more explanations about this page topic.</p>.
<ul>.
<li>First item from the list</li>.
<li>Second item from the list</li>.
<li>Third item from the list</li>.
</ul>.
</body>.
</html>.Line-by-Line Explanation
<!DOCTYPE html>This declaration indicates that our file is an HTML5 document.
<html lang="fa">This tag begins the HTML and specifies that the document is in Persian.
<head>A section that holds metadata tags and non-visible information about the main page.
<meta charset="UTF-8">This tag sets the character encoding of the page to UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">This is used to define the proper display of the page on different devices.
<title>HTML Example Page</title>This is the title of the page shown in the browser tab.
</head>The closing tag for the head section of the document.
<body>The main content section of the document visible to the user.
<h1>This displays the main title of the page.
<p>This displays the paragraphs.
<ul>This displays unnumbered lists.
<li>This shows each item in the list.
</body>The closing tag for the body section of the document.
</html>The closing tag for the HTML document, indicating the end of the HTML file.