10.04.2025
151
HTML (HyperText Markup Language) is a markup language used to create the structure of web pages. "HyperText" refers to text that enables links between different pages or documents, and "Markup Language" means a system using special tags that define how content is structured and displayed.
The main purpose of HTML is to build the skeleton of a webpage – including headings, paragraphs, images, links, forms, and other elements. This language tells the web browser things like “this part is a heading,” “this is an image,” or “this is a link.” As a result, the browser reads these tags and displays a visually readable and well-structured web page to the user.
In short:
HTML is the foundation of a website.
It defines how content (text, image, video, etc.) is placed on a webpage.
It works together with other technologies – CSS (for design) and JavaScript (for functionality).
If you want to build a website, HTML is the first language you need to learn. It's like the foundation of a building – nothing can be built without it.
An HTML document is built according to specific rules. This structure is important for the web browser to properly read and present the page to the user. The structure of an HTML document follows a “top-middle-bottom” principle and consists of several key parts.
1. <!DOCTYPE html>
– Declaration of Document Type
This line is used to specify that the document follows the HTML5 standard. Browsers use this to understand how to interpret the document.
<!DOCTYPE html>
2. <html>
– Start and End of the HTML Document
This element encompasses the entire HTML document. All other elements are nested inside this tag.
<html>
<!-- Head and body go here -->
</html>
3. <head>
– Technical Information
The <head>
section is not visible to users. It contains the page title, meta data, links to external files (such as CSS or JavaScript), favicon, and more.
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
4. <body>
– Visible Content
All visible content for the user is placed inside <body>
. This includes text, images, buttons, videos, links, and other elements.
<body>
<h1>Welcome!</h1>
<p>This is your first HTML page.</p>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML structure example.</p>
</body>
</html>
HTML uses tags to build the structure of a web page. These tags tell the browser which part is a heading, which is text, an image, a list, or a link. Below are the most commonly used and important tags in HTML with explanations.
1. Headings – <h1>
to <h6>
Headings are used to structure content and indicate importance levels.
<h1>
– The largest and most important heading, usually the page title.
<h6>
– The smallest and least important heading.
example:
<h1>Website Title</h1>
<h2>Section Title</h2>
<h3>Subheading</h3>
2. Paragraphs – <p>
Used to display blocks of text as paragraphs.
example:
<p>This is a simple paragraph example.</p>
3. Links – <a>
Used to create hyperlinks from one page to another. Links can point to any URL.
example:
<a href="https://example.com">Visit the site</a>
4. Images – <img>
Used to add images to a webpage. The src
(source) and alt
(alternative text) attributes are important.
example:
<img src="image.jpg" alt="Alternative text">
5. Lists – <ul>
, <ol>
, <li>
Lists can be unordered (<ul>
) or ordered (<ol>
), and each item is defined using <li>
.
example:
<ul>
<li>Apple</li>
<li>Pear</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
6. Tables – <table>
, <tr>
, <td>
, <th>
Used to present data in rows and columns.
<table>
– Table container
<tr>
– Table row
<td>
– Data cell
<th>
– Header cell (bold and centered)
example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Aysel</td>
<td>23</td>
</tr>
</table>
7. Emphasis and Strong Text – <strong>
, <em>
<strong>
– Strong emphasis (bold)
<em>
– Emphasis (italic)
example:
<p><strong>Attention:</strong> This is important information.</p>
<p><em>Note:</em> This is an additional explanation.</p>
8. Horizontal Rule – <hr>
Adds a visual horizontal line between sections.
example:
<p>First section</p>
<hr>
<p>Second section</p>
9. Line Break – <br>
Used to insert a line break within text.
example:
<p>Hello<br>How are you?</p>
No, HTML is a markup language, not a programming language.
No, it’s very simple. You can learn the basics in just a few days.
No, if you want a beautiful and interactive site, you also need to learn CSS and JavaScript.
HTML5 offers better multimedia support and introduces new semantic elements.
Yes, because the fundamental structure of a website cannot be built without HTML.