HTML (HyperText Markup Language) is the standard language used to structure content on the web. This guide covers every fundamental aspect of HTML, from the basic syntax to more advanced features such as forms and semantic elements introduced in HTML5.
1. Introduction to HTML
HTML is a markup language used to define documents for the web. It
relies on tags (or elements) to describe both the structure and the meaning of content.
A basic HTML file contains the following structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example HTML File</title>
</head>
<body>
<h1>Example HTML File</h1>
<p>This is an example of an <a href="https://www.w3.org/html/">HTML</a> document.</p>
<ul>
<li>Readable text content</li>
<li>Formatting elements
<ol>
<li>Sections with <strong>strong emphasis</strong></li>
<li>Heading levels</li>
<li>Numbered or unnumbered lists</li>
</ol>
</li>
<li>Hypertext links (<a href="links.html">anchors</a>)</li>
<li>Embedded images:
<img src="images/logo.png" width="260" height="91" alt="Logo" />
</li>
</ul>
</body>
</html>
The browser interprets these tags to render the document visually. Each tag defines a role, not a visual appearance --- styling is handled by CSS.
2. The DOCTYPE Declaration
Every HTML document begins with a DOCTYPE declaration, which tells the browser what type of document to expect. In HTML5, the declaration is simplified:
<!DOCTYPE html>
Older versions (like HTML 4.01 or XHTML) required long DTD references. HTML5 simplified this to a single universal declaration that ensures consistent rendering across browsers.
3. HTML Elements and Syntax
An HTML element is defined by an opening and closing tag, enclosing its content:
<p>This is a paragraph.</p>
Some elements are empty (self-closing), meaning they contain no content:
<br />
<img src="image.png" alt="Example" />
Attributes add metadata to elements and appear inside the opening tag:
<a href="contact.html" target="_blank">Contact</a>
4. The <html> Element
The <html> tag marks the beginning and end of an HTML document. It can include the lang attribute to specify the language of the content, improving accessibility and SEO:
<html lang="en">
...
</html>
Inside the <html> element, there are always two main sections: -
<head>: The document header containing metadata. - <body>: The visible content.
5. The <head> Element
The header provides information about the document --- metadata, title, description, and encoding.
<head>
<title>My Webpage</title>
<meta charset="utf-8" />
<meta name="author" content="h0ag" />
<meta name="keywords" content="HTML, web, tutorial, HWIKI" />
<meta name="description" content="Comprehensive HTML guide from HWIKI" />
</head>
Key Points
-
<title>is mandatory and defines the title shown in browser tabs and bookmarks. -
<meta charset="utf-8">defines the character encoding. UTF-8 supports nearly all characters. -
<meta>tags describe the document for search engines and browsers.
6. The <body> Element
The <body> contains the content that will be displayed on the page --- text, images, links, lists, and so on.
<body>
<h1>Welcome to HWIKI</h1>
<p>This is a sample paragraph.</p>
<img src="images/logo.png" alt="HWIKI Logo" width="260" height="91" />
</body>
Content can be textual, structural, or multimedia.
7. Character Encoding and Entities
HTML supports special characters through entities, which start with & and end with ;.
| Entity | Symbol | Description |
|---|---|---|
|
non-breaking space | |
¦ |
¦ | broken bar |
± |
± | plus/minus |
£ |
£ | pound sign |
¥ |
¥ | yen sign |
Ø |
Ø | slashed O |
© |
© | copyright |
® |
® | registered mark |
° |
° | degree symbol |
² |
² | superscript 2 |
³ |
³ | superscript 3 |
& |
& | ampersand |
¼ |
¼ | one quarter |
½ |
½ | one half |
¾ |
¾ | three quarters |
à |
à | small a grave |
À |
À | capital A grave |
œ |
œ | oe ligature |
é |
é | small e acute |
É |
É | capital E acute |
ë |
ë | e umlaut |
î |
î | small i circumflex |
Î |
Î | capital I circumflex |
ç |
ç | c cedilla |
" |
" | quotation mark |
ß |
ß | sharp s (eszett) |
ñ |
ñ | n tilde |
< |
< | less-than sign |
> |
> | greater-than sign |
µ |
µ | micro symbol |
These entities are essential when writing characters that have special meanings in HTML (like < or >).
8. Text Formatting and Emphasis
HTML provides tags to emphasize or style text semantically:
<p>This is <em>important</em> and <strong>very important</strong>.</p>
<p><mark>Highlighted</mark> text example.</p>
<p>Equation: x<sub>1</sub><sup>2</sup> = 1</p>
-
<em>(emphasis): conveys importance, typically italicized. -
<strong>(strong emphasis): denotes strong importance, often bold. -
<mark>: highlights text. -
<sub>and<sup>: subscript and superscript.
Styling-only tags like <b>, <i>, and <u> should be used only when semantic equivalents don't apply.
9. Headings and Paragraphs
HTML defines six heading levels (<h1> to <h6>) to represent document structure, not visual size.
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Subsection</h3>
Paragraphs are written with <p> and can include short quotes (<q>) or block quotes (<blockquote>):
<blockquote cite="https://hwiki.xyz/html">
HTML5 is the standard markup language for web documents.
</blockquote>
10. Lists
HTML supports three list types:
- Unordered list (bulleted):
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
- Ordered list (numbered):
<ol>
<li>Introduction</li>
<li>Content</li>
<li>Conclusion</li>
</ol>
- Description list:
<dl>
<dt>HTML</dt>
<dd>A markup language for the web.</dd>
</dl>
Lists can be nested inside one another to represent hierarchical structures.
11. Tables
Tables present data in rows and columns using the following structure:
<table>
<caption>Lovers</caption>
<thead>
<tr><th>Name</th><th>Email</th></tr>
</thead>
<tbody>
<tr><td>h0ag</td><td>h0ag@hwiki.xyz</td></tr>
<tr><td>Emmal0y</td><td>-</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">End of Table</td></tr>
</tfoot>
</table>
Use colspan and rowspan to merge cells horizontally or vertically.
Tables should never be used for page layout --- CSS handles that purpose.
12. Hyperlinks
Links are created with the <a> tag:
<a href="https://hwiki.xyz/">Visit HWIKI</a>
<a href="about.html" target="_blank">Open About Page</a>
- Absolute URLs: full path to a resource (including protocol and domain).
- Relative URLs: local paths within your project directory.
Internal anchors can also link to specific parts of a page:
<a href="#section1">Go to Section 1</a>
...
<h2 id="section1">Section 1</h2>
13. Images
Images are inserted using the <img> tag:
<img src="images/photo.jpg" alt="A landscape photo" width="300" height="200" />
The alt attribute is mandatory and describes the image content, useful for screen readers and when the image fails to load.
14. Forms
Forms allow user input and interaction. A basic example:
<form>
Name: <input type="text" name="name" /><br />
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
Common Input Types
-
text,password,number,date,color,range -
checkbox,radio,select,textarea
Example of a dropdown list:
<select name="language" size="1">
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3" selected>JavaScript</option>
</select>
Use <fieldset> and <legend> to group form sections, and <label for="id"> to connect text to input fields.
15. Semantic Page Structure (HTML5)
HTML5 introduced semantic elements that describe the role of different page sections:
<header>Header content</header>
<nav>Navigation links</nav>
<main>Main article content</main>
<aside>Sidebar or related information</aside>
<footer>Footer content</footer>
These replace older <div id="header"> (HTML4) structures, making documents more meaningful to search engines and assistive technologies.
16. References
Made by h0ag
Top comments (0)