Mastering HTML -- The Complete Guide

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:

html

<!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:

html

<!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:

html

<p>This is a paragraph.</p>

Some elements are empty (self-closing), meaning they contain no content:

html

<br />
<img src="image.png" alt="Example" />

Attributes add metadata to elements and appear inside the opening tag:

html

<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

<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.

html

<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.

html

<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
`&oelig;`	&oelig;	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 >).

HTML entities

8. Text Formatting and Emphasis

HTML provides tags to emphasize or style text semantically:

html

<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.

html

<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>):

html

<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):

html

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered list (numbered):

html

<ol>
  <li>Introduction</li>
  <li>Content</li>
  <li>Conclusion</li>
</ol>

Description list:

html

<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:

html

<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:

html

<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:

html

<a href="#section1">Go to Section 1</a>
...
<h2 id="section1">Section 1</h2>

13. Images

Images are inserted using the <img> tag:

html

<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:

html

<form>
  Name: <input type="text" name="name" /><br />
  Password: <input type="password" name="password" /><br />
  <input type="submit" value="Submit" />
</form>

All input types

Common Input Types

text, password, number, date, color, range
checkbox, radio, select, textarea

Example of a dropdown list:

html

<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:

html

<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

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
`&oelig;`	&oelig;	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

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
`&oelig;`	&oelig;	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

Mastering HTML -- The Complete Guide

1. Introduction to HTML

2. The DOCTYPE Declaration

3. HTML Elements and Syntax

4. The <html> Element

5. The <head> Element

Key Points

6. The <body> Element

7. Character Encoding and Entities

8. Text Formatting and Emphasis

9. Headings and Paragraphs

10. Lists

11. Tables

12. Hyperlinks

13. Images

14. Forms

Common Input Types

15. Semantic Page Structure (HTML5)

16. References

4. The `<html>` Element

5. The `<head>` Element

6. The `<body>` Element

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
`&oelig;`	&oelig;	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