`html Understanding HTML and How the Web Works

Web Foundations Journal

A sleek, practical guide for curious builders / Article content / main.content { padding: 24px; background: radial-gradient(circle at top, #ffffff, #f7fbff); } article { background: rgba(255, 255, 255, 0.96); border-radius: 10px; padding: 20px 20px 24px; box-shadow: 0 0 18px rgba(11, 60, 93, 0.12); } article h2 { font-family: "Pacifico", cursive; font-size: 1.8rem; color: var(--accent-blue); text-shadow: 2px 2px 0 var(--accent-dark-blue); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; } article h2 i { color: #0f9b8e; } .meta { font-size: 0.85rem; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .meta h4 { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .meta .category { font-style: italic; } .meta .date { background: var(--highlight); padding: 3px 8px; border-radius: 999px; border: 1px solid #f0d88a; display: inline-flex; align-items: center; gap: 6px; } .meta .date i { color: #c28b00; } .meta h4 i { color: #999999; } article p { margin-bottom: 14px; font-size: 0.96rem; } article p strong { font-weight: 600; } pre { background: var(--code-bg); color: #e6f1ff; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--code-border); overflow-x: auto; font-family: "Fira Code", "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.85rem; margin-bottom: 16px; position: relative; } pre::before { content: "\f121 Code example"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8ab4ff; position: absolute; top: 6px; right: 10px; opacity: 0.8; } code { color: #ffdd88; } / Glossary / .glossary { margin-top: 24px; padding-top: 18px; border-top: 2px dashed #dde6f5; } .glossary-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; color: var(--accent-dark-blue); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.08em; } .glossary-title i { color: #0f9b8e; } dl.glossary-list { margin-top: 8px; } dl.glossary-list dt { font-weight: 600; margin-top: 10px; display: flex; align-items: center; gap: 6px; color: var(--accent-blue); } dl.glossary-list dt i { color: #1b6ca8; font-size: 0.85rem; } dl.glossary-list dd { margin-left: 20px; font-size: 0.9rem; color: #444444; margin-bottom: 4px; } / Fake article links footer / .footer-links { background: #ffffff; border-top: 1px solid #e1e7f0; padding: 16px 24px; } .footer-links h3 { font-size: 0.95rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; color: var(--accent-dark-blue); text-transform: uppercase; letter-spacing: 0.08em; } .footer-links h3 i { color: #0f9b8e; } .footer-links ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; font-size: 0.9rem; } .footer-links li a { display: inline-flex; align-items: center; gap: 6px; } .footer-links li a i { font-size: 0.8rem; color: #1b6ca8; } / Final footer / footer.site-footer { background: var(--footer-dark); color: #ffffff; padding: 12px 24px; font-size: 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; } footer.site-footer .left, footer.site-footer .right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } footer.site-footer i { color: #0f9b8e; } @media (max-width: 640px) { .nav-inner { flex-direction: column; align-items: flex-start; gap: 4px; } ul.nav-menu { flex-wrap: wrap; gap: 10px; } .page-container { margin: 0 auto; } main.content { padding: 18px 16px; } article { padding: 16px 14px 20px; } }

Web Foundations Journal

A sleek, practical guide for curious builders who want to understand how the web really works—step by step.

A Step-by-Step Introduction to HTML and How the Web Works

By Kalina Example

February 20, 2026

Web Foundations & HTML

When you open a web page, it can feel like magic: a click, a tap, and suddenly a fully designed experience appears on your screen. Underneath that magic is a simple but powerful language called HTML (HyperText Markup Language). In this article, we will walk step by step through what HTML is, how the web moves information around, and what pieces come together to form a website.

At its core, HTML is a way of describing the structure of a document so that a browser knows what is a heading, what is a paragraph, what is a link, and what is an image. You can think of HTML as the skeleton of every web page. It does not decide the colors or animations—that is mostly the job of CSS—but it defines the content and the meaning of each part of: #ffffff; font-size: 0.95rem; padding: 10px 0; } .nav-brand i { color: #0f9b8e; } ul.nav-menu { list-style: none; display: flex; gap: 18px; position: relative; } ul.nav-menu > li { position: relative; } ul.nav-menu > li > a { color: #f5f5f5; font-size: 0.9rem; padding: 10px 0; display: inline-flex; align-items: center; gap: 6px; } ul.nav-menu > li > a i { font-size: 0.8rem; opacity: 0.8; } / Dropdown levels / .dropdown, .dropdown-level2, .dropdown-level3 { list-style: none; position: absolute; left: 0; top: 100%; min-width: 190px; background: #050b10; border-radius: 6px; padding: 8px 0; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45); display: none; z-index: 20; } .dropdown-level2 { left: 100%; top: 0; } .dropdown-level3 { left: 100%; top: 0; } .dropdown li, .dropdown-level2 li, .dropdown-level3 li { position: relative; } .dropdown a, .dropdown-level2 a, .dropdown-level3 a { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: 0.85rem; color: #f5f5f5; white-space: nowrap; } .dropdown a:hover, .dropdown-level2 a:hover, .dropdown-level3 a:hover { background: #0f9b8e; } / Hover logic / ul.nav-menu > li:hover > .dropdown { display: block; } .dropdown li:hover > .dropdown-level2 { display: block; } .dropdown-level2 li:hover > .dropdown-level3 { display: block; } / Article content / main.content { padding: 24px; background: radial-gradient(circle at top, #ffffff, #f7fbff); } article { background: rgba(255, 255, 255, 0.96); border-radius: 10px; padding: 20px 20px 24px; box-shadow: 0 0 18px rgba(11, 60, 93, 0.12); } article h2 { font-family: "Pacifico", cursive; font-size: 1.8rem; color: var(--accent-blue); text-shadow: 2px 2px 0 var(--accent-dark-blue); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; } article h2 i { color: #0f9b8e; } .meta { font-size: 0.85rem; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .meta h4 { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .meta .category { font-style: italic; } .meta .date { background: var(--highlight); padding: 3px 8px; border-radius: 999px; border: 1px solid #f0d88a; display: inline-flex; align-items: center; gap: 6px; } .meta .date i { color: #c28b00; } .meta h4 i { color: #999999; } article p { margin-bottom: 14px; font-size: 0.96rem; } article p strong { font-weight: 600; } pre { background: var(--code-bg); color: #e6f1ff; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--code-border); overflow-x: auto; font-family .meta { font-size: 0.85rem; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .meta h4 { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .meta .category { font-style: italic; } .meta .date { background: var(--highlight); padding: 3px 8px; border-radius: 999px; border: 1px solid #f0d88a; display: inline-flex; align-items: center; gap: 6px; } .meta .date i { color: #c28b00; } .meta h4 i { color: #999999; } article p { margin-bottom: 14px; font-size: 0.96rem; } article p strong { font-weight: 600; } pre { background: var(--code-bg); color: #e6f1ff; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--code-border); overflow-x: auto; font-family: "Fira Code", "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.85rem; margin-bottom: 16px; position: relative; } pre::before { content: "\f121 Code example"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8ab4ff; position: absolute; top: 6px; right: 10px; opacity: 0.8; } code { color: #ffdd88; } / Glossary / .glossary { margin-top: 24px; padding-top: 18px; border-top: 2px dashed #dde6f5; } .glossary-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; color: var(--accent-dark-blue); text-transform: