Your First Step into Coding: How to Create a Simple HTML Page
Your First HTML Page: Structural Basics
Creating an HTML page involves using tags that the web browser interprets as commands on what to display. Every basic HTML page has a fixed, required structure. Below you'll find an example of the code and a detailed explanation of each line.
Simple HTML Page Example:
| Source: | Name: | Preview: |
|---|---|---|
| Download Center | post_30en | HTML |
Explanation of Every Line of Code
| <!DOCTYPE html> | Document Type Declaration. Must always be the first line. It tells the browser it's an HTML5 document. |
| <html lang="en"> | The main page tag. Encloses all content. The lang="en" attribute specifies the content language (English). |
| <head> | The header section. Contains metadata (information about the page) important for the browser and search engines. |
| <meta charset="UTF-8"> | Specifies the character encoding, crucial for correct global display of characters. |
| <meta name="viewport" ...> | Key setting for responsiveness, ensuring proper scaling on mobile devices. |
| <meta name="description" ...> | The page description used by search engines in results. |
| <meta name="author" ...> | Specifies the author or creator of the page. |
| <link rel="canonical" ...> | The canonical tag. Indicates the preferred URL for SEO. (Details below). |
| <title>...</title> | The page title, appears on the browser tab and is critical for SEO. |
| <body> | The document body. Contains all visible content of the page. |
| <h1>...</h1> | First-level heading. The most important title, usually one per document. |
| <h2>...</h2> i <h3>...</h3> | Lower-level headings, used to structure and segment content. |
| <p>...</p> | A paragraph of text. The basic tag for marking text blocks. |
| <ul>...</ul> | Unordered list (bullet points). |
| <li>...</li> | List item, must be placed inside a <ul> or <ol>. |
| <a>...</a> | The hyperlink (anchor) tag. Used to create links. |
| href="..." | The attribute of the <a> tag specifying the target page's URL address. |
| target="_blank" | The attribute of the <a> tag that opens the link in a new tab. |
How to Add a Link (Hyperlink)
A key feature of any webpage is the ability to navigate to another. We use the anchor tag, <a>, for this purpose.
We use the href attribute to specify the link's destination and the optional target="_blank" attribute to open the link in a new browser tab:
<a href="https://www.exampledomain.com" target="_blank">Text visible to the user</a>
Important Metadata and the Canonical Tag
Metadata in the <head> section is invisible but essential for search engines.
| meta name="description" | A brief summary of the content that Google may display in search results. |
| meta name="author" | A simple way to credit the content's creator. |
When and How to Mark a Page as Canonical
The canonical tag (<link rel="canonical" href="...">) is an instruction for search engines that helps resolve the problem of duplicate content.
Use it when:
- The same content is accessible via different URLs (e.g., with tracking parameters or different path versions).
- You have multiple pages with very similar content.
By specifying the preferred URL, you prevent Google from treating these addresses as duplicates, which could negatively affect your search rankings.
Syntax: You must place it in the <head> section, specifying the full, preferred address:
<link rel="canonical" href="https://www.yourdomain.com/preferred-page.html">
Conclusion
Congratulations! You've learned the absolute basics of HTML: from document structure, through headings, lists, and paragraphs, to adding links and key metadata for SEO. Remember, HTML is the foundation—you'll need CSS to add style (colors, fonts, layout).
| Source: | Name: | Preview: |
|---|---|---|
| Download Center | post_30en | HTML |
👇
▒ Blog Guide: All Programming Posts in One Place. ▹ See