Forem: Hoag

Mastering HTML -- The Complete Guide

Hoag — Tue, 21 Oct 2025 10:12:02 +0000

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

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

All input types

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

Understanding Wi-Fi (Wireless Fidelity)

Hoag — Sat, 03 May 2025 11:20:55 +0000

In the wired world, we're talking about IEEE 802.3. But the moment we cut the cable, we move into IEEE 802.11 — the world of wireless communication: Wi-Fi, Bluetooth, and friends.

Wi-Fi uses radio frequencies (RF) to send signals through the air. But for two devices to talk, they need to agree on a few things:

Same frequency
Same communication channel
Same protocol

That’s the deal. And also: they can’t talk at the same time. At least not with the basic setup. That’s what we call half-duplex communication — each host takes turns. To solve that, we use full-duplex, which relies on separate frequencies (or channels) for the upstream and downstream traffic.

WLAN Topologies

Basic Service Set (BSS)

In a BSS, all communication happens through the Access Point (AP). Devices can't talk to each other directly.

Terminology:

AP: Access Point
SSID: The public name of the network
BSSID: The MAC address of the AP
BSS: The actual Wi-Fi coverage area of one AP

Distribution System (DS)

Want to segment multiple wireless networks with one AP? Use Virtual LANs (VLANs) with multiple BSSIDs. Each BSSID maps to a specific VLAN. This setup is compliant with IEEE 802.1Q.

Extended Service Set (ESS)

When multiple APs are deployed to cover a large area (like a building), each AP creates its own BSS, but all of them together form an ESS. Channels must be carefully chosen to avoid interference.

Ad-Hoc Networks (IBSS)

No AP here. Just two devices directly talking to each other. This is called an Independent Basic Service Set (IBSS) — like Bluetooth. Both devices must use the same frequency, channel, and parameters.

Wi-Fi Repeater Topology

A repeater extends the coverage of a BSS by retransmitting the signal. It should be placed right at the edge of the AP’s BSS.

Workgroup Bridge (WGB)

A WGB allows a device that only supports wired Ethernet to connect to a wireless network through a bridge (e.g., connect a wired PC to Wi-Fi via a smartphone or dedicated bridge device).

How Wi-Fi Uses Radio Waves

Wi-Fi transmits data using electromagnetic waves. Each wave consists of:

One electric component
One magnetic component, perpendicular to the electric one

These waves propagate spherically in all directions.

A cycle = one unit of data.
If we see 3 cycles in 1 second, the frequency is 3 Hz. In Wi-Fi, frequencies are way higher: up to 2.4 GHz or 5 GHz.

Example:

2.4 GHz = 2,400,000,000 cycles per second
Each cycle carries 1 byte (in a simplified view)

Frequency Bands

2.4 GHz Band

Frequency range: 2.400 GHz to 2.486 GHz
Channels are 22 MHz wide and overlap, so only channels 1, 6, and 11 are usable without interference. Others can be used for other protocols.

5 GHz Band

Frequency range: 5.15 GHz to 5.825 GHz
Channels do not overlap → All can be used without interference

Wi-Fi Standards (Amendments)

Standard	2.4 GHz	5 GHz	Max Speed	Notes
802.11	Yes	No	2 Mbps	First version, 1997
802.11b	Yes	No	11 Mbps	1999
802.11g	Yes	No	54 Mbps	2003
802.11a	No	Yes	54 Mbps	1999 (5 GHz version of 'g')
802.11n	Yes	Yes	600 Mbps	2009, High Throughput
802.11ac	No	Yes	6.93 Gbps	2015, Very High Throughput
802.11ax	Yes	Yes	~4x 802.11ac	2019, High Efficiency (Wi-Fi 6)

Wi-Fi Security

Wi-Fi broadcasts data over the air — so anyone nearby can listen if it's not protected. That’s why security is critical.

The IEEE 802.11 standard defines three pillars of security:

Confidentiality: prevent others from reading your data
Authentication: confirm who is allowed to connect
Integrity: ensure data wasn’t modified in transit

Authentication

Access Points validate whether the device trying to connect is legit or not.

Client: Who are you ?
Server: I am < BSSID >
Client: Here are my credentials.

Message Confidentiality

Modern Wi-Fi uses encryption protocols (like WPA2/WPA3) to ensure all messages are encrypted.

Message Integrity Check (MIC)

A hash (MIC (Message Integrity Check)) is calculated on the original message
The message is encrypted and sent
The receiver decrypts it, recalculates the MIC
If the MICs match → the message is valid

If they don’t? It’s rejected. That’s how tampering is detected.

Here you go!

Understand Spanning Tree Protocol (STP)

Hoag — Sat, 26 Apr 2025 22:04:53 +0000

So,
imagine you've got lots of switches connected together in a network.
At some point, you want to make everything more reliable, so you create backup links between them. You say "if one cable fails, another one takes over."
That's great in theory... except that in reality, as soon as you form a loop in the network, everything cracks up. Packets go round and round, the load explodes, and in the end, your network falls to the ground.

Welcome to the problem of network loops.

And so, Spanning Tree Protocol (STP) was born.
The goal?
Intelligently disable some ports to break loops, while leaving everyone connected in the end.
Originally, STP was a proprietary protocol developed by Cisco, but it later became standardized under IEEE 802.1D.

Spanning-tree-free topology problems :

Without spanning tree, a network can crash fast:

Broadcast storm: packets get duplicated exponentially every time they pass a switch.
Double frame: the same frame is received multiple times by the destination, causing network card saturation.
MAC table instability: the same host appears under different MAC addresses, often detected as an attack.

How does STP solve the problem?

STP begins by choosing a boss, a point of reference for the entire network:
the Root Bridge.

Electing the Root Bridge

Each switch balances messages called BPDUs (Bridge Protocol Data Units) to say :

"Hey! That's my ID."

Each switch has a Bridge ID, which is just a mix between a priority and its MAC address.

Priority: this is a number (32768 by default) (2 bytes).
MAC address: this... is the MAC address. (6 bytes).

Whoever has the smallest ID wins and becomes Root Bridge.
(If everyone has the same priority, the smallest MAC wins).

Switch	Priority	MAC Address	Result
SW0	32768	AA:AA:AA:AA:AA:10
SW0	32768	AA:AA:AA:AA:AA:09
SW1	28672	AA:AA:AA:AA:AA:08	win (lowest priority)
SW1	32768	AA:AA:AA:AA:AA:07
SW2	32768	AA:AA:AA:AA:AA:06
SW2	32768	AA:AA:AA:AA:AA:05	Lowest MAC

Finding the fastest way to the Root

Once the boss is elected, all the other switches ask themselves:
"Which way do I go to get to the Root the fastest?"

Each link has a cost depending on its speed:

Bandwidth	Cost
10 Mbps	100
100 Mbps	19
1 Gbps	4
>= 10Gbps	2

The faster, the cheaper.

Each switch chooses the path with the lowest cost.

Choosing which ports to shut down

Once everyone knows where to go, STP will classify the ports:

Port	Role
Root Port (RP)	The one that leads to the Root Bridge
Designated Port (DP)	The one who stays active on a link to serve others
Blocked Port (BP)	The one that is deactivated to avoid the loop

On each link between two switches:

Only one switch has its port active (Designated).
The other blocks its port to avoid a loop.

But, Spanning-tree is slow

Each time a port needs to change state, STP goes through several phases:

Blocking → "I'm not doing anything, I'm listening."
Listening → "Okay, I'm starting to look at the BPDUs."
Learning → "I'm starting to learn who's who (MAC addresses)."
Forwarding → "Come on, I'm forwarding traffic."

Each transition takes 15 seconds (forward delay).

So, all in all, a minimum of 30 seconds for a link to become active.
That's a long time. Very long.

RSTP's arrival

Faced with this unbearable slowness, the guys thought:
"What if we made it converge in a few seconds instead of waiting two hours?"

Rapid Spanning Tree Protocol (RSTP) arrives and does it all better:

No more lazy “Listening” and “Learning” steps.
A switch can immediately negotiate with its neighbor to switch to Forwarding.
Each switch actively sends BPDUs, not just the Root Bridge.
Everything converges in a few seconds instead of 30-50.

Spanning Tree is really the basis for understanding how a network prevents itself from self-destructing in a loop.

Made by h0ag for hwiki.

QUIC: The Future Network Protocol, Already Here Today

Hoag — Thu, 24 Apr 2025 20:09:44 +0000

QUIC (Quick UDP Internet Connections) is a modern network protocol that redefines how data is transmitted over the internet. It is designed to overcome the limitations of TCP and UDP, while integrating security and multiplexing features that were previously handled separately by protocols like TCP and TLS. In this article, we’ll take a deep dive into how QUIC works, its integration with HTTP/3, its place in the OSI model, and how it’s already deployed on sites like hwiki.xyz.

What is QUIC?

QUIC is a transport protocol developed by Google to improve the performance of web applications. It relies on UDP (User Datagram Protocol) instead of TCP, allowing it to reduce latency and optimize data flow management. QUIC was designed to address the classic problems of TCP, such as the 3-way handshake latency and head-of-line blocking, where the loss of a single packet blocks the entire connection.

How QUIC Works

QUIC operates with several key features that set it apart:

No 3-way handshake: QUIC reduces the connection establishment process to 1 or 0 RTT (Round Trip Time), unlike TCP which requires 3 RTT to establish a connection.
Efficient multiplexing: Unlike TCP, QUIC allows multiple independent data streams to be sent over the same connection. The loss of one packet does not block the others.
Native encryption: QUIC integrates TLS 1.3 directly into the protocol, ensuring that all communications are encrypted from the start of the connection.

QUIC and HTTP/3

The HTTP/3 protocol is entirely dependent on QUIC for data transport, providing major improvements over previous versions of HTTP. Unlike HTTP/2, which relies on TCP, HTTP/3 uses QUIC to establish connections faster, while improving the handling of simultaneous connections and security.

Note: Adopting HTTP/3 does not mean your site will be "quic://" instead of "https://". The "https://" URL remains the same in browsers, but under the hood, the connection is made using HTTP/3, which relies on QUIC as the transport protocol.

QUIC in the OSI Model

The OSI model is a layered framework used to describe how networks function. It consists of seven layers, from Layer 1 (Physical) to Layer 7 (Application). QUIC primarily fits into Layer 4 (Transport), but its functionality extends beyond this traditional layer. Here’s how QUIC fits into the OSI model:

Element	OSI Layer
QUIC (transport)	4
QUIC (integrated encoding, TLS handshake)	6
QUIC (multiplexing / sessions)	5

Deploying QUIC: hwiki.xyz and Other Sites

Today, QUIC and HTTP/3 are already used by many websites, including giants like Google, Facebook, YouTube, and many others. On hwiki.xyz, for example, connections between the client and server pass through Cloudflare, which supports HTTP/3 and QUIC. This means hwiki.xyz is already benefiting from QUIC, with lower latency and secure-by-default connections.

Note: If you’re using Cloudflare for your website, it’s likely that you already benefit from HTTP/3 without needing additional configuration.

Testing QUIC on Your Website

If you want to check if your site is using HTTP/3 and QUIC, you can use tools like your browser DevTools (F12) or curl with the --http3 option:

curl -I --http3 https://your-site.com

This will let you see if HTTP/3 is being used for the connection.

QUIC’s Pros and Cons

Pros

Reduced Latency: Faster connections thanks to 1 or 0 RTT.
Improved Multiplexing: Multiple independent data streams without interference.
Secure: Built-in encryption with TLS 1.3, no plaintext data.
Connection Migration: Allows maintaining a connection even when the client changes its IP address.

Cons

Limited compatibility with some firewalls: QUIC uses UDP, which can be filtered by firewalls.
Complex management: Diagnosing QUIC connections requires special tools and packet decryption.

Conclusion

QUIC is a revolutionary change in how data is transported on the Internet. With its ability to reduce latency, its built-in encryption, and its handling of multiplexed connections, it paves the way for a faster and more secure web. The adoption of HTTP/3, which relies entirely on QUIC, is already well underway, and sites like hwiki.xyz are reaping its benefits.

Looking Ahead

As HTTP/3 adoption continues to grow, QUIC will become an increasingly essential part of the web. Its integration into browsers, servers, and cloud infrastructures like Cloudflare makes it a major player for the future.

Made by h0ag for hwiki.xyz.

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;`	œ	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;`	œ	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