HTML
The structure of every webpage.
HTML is not a programming language — it's a markup language. It tells the browser what things are. A heading, a paragraph, a link, a form. Every website starts here.
Core concepts
Document structure
Every HTML file follows a fixed structure. The DOCTYPE declaration tells the browser this is HTML5. html wraps everything. head holds metadata the user never sees directly. body holds everything that renders on screen.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="My webpage" /> <title>Page Title</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <!-- Your visible content goes here --> <h1>Hello, world</h1> <script src="script.js"></script> </body> </html>
Elements and attributes
Elements are the building blocks. Most have an opening and closing tag with content between. Some are self-closing (img, input, br). Attributes live in the opening tag and provide extra information.
<!-- Opening + closing tag --> <p>This is a paragraph</p> <!-- Self-closing --> <img src="photo.jpg" alt="A photo" /> <input type="text" placeholder="Enter name" /> <br /> <!-- Attributes: name="value" --> <a href="https://example.com" target="_blank" rel="noopener"> Open in new tab </a> <!-- Multiple attributes --> <input type="email" id="email" name="email" placeholder="you@email.com" required />
Headings and text
h1 through h6 are headings — h1 is the most important, h6 the least. Use only one h1 per page. p is for paragraphs. strong bolds text with emphasis. em italicizes. span is an inline container for styling.
<h1>Main Page Title</h1> <h2>Section Heading</h2> <h3>Subsection</h3> <p> This is a paragraph. You can make text <strong>bold</strong> or <em>italic</em>. Use <code>code</code> for inline code. </p> <p> A <span class="highlight">highlighted word</span> inside a paragraph uses span. </p> <blockquote> "This is a blockquote — a longer quoted text." </blockquote> <pre> Preformatted text preserves whitespace and line breaks </pre>
Links and images
Links use the a element with href for the destination. Images use img with src (source) and alt (alternative text — required for accessibility). Both can use absolute URLs or relative file paths.
<!-- Internal link --> <a href="/about">About page</a> <!-- External link --> <a href="https://sibah.dev" target="_blank" rel="noopener"> Visit Sibah.dev </a> <!-- Email link --> <a href="mailto:hello@example.com">Send email</a> <!-- Image from URL --> <img src="https://example.com/photo.jpg" alt="Description of the photo" width="800" height="600" loading="lazy" /> <!-- Image from local file --> <img src="./images/logo.png" alt="Logo" /> <!-- Image as a link --> <a href="/home"> <img src="logo.png" alt="Home" /> </a>
Lists
ul is an unordered (bulleted) list. ol is an ordered (numbered) list. Both use li for each item. Lists can nest inside each other. dl/dt/dd is a definition list for key-term pairs.
<!-- Unordered list -->
<ul>
<li>JavaScript</li>
<li>Lua</li>
<li>Java</li>
</ul>
<!-- Ordered list -->
<ol>
<li>Install Node.js</li>
<li>Create a project folder</li>
<li>Run npm init</li>
</ol>
<!-- Nested list -->
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>Forms
Forms collect user input. The form element wraps inputs and a submit button. action tells the browser where to send data. method is usually POST. Each input has a name attribute that becomes the key in the submitted data.
<form action="/submit" method="POST">
<!-- Text input -->
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
<!-- Email -->
<label for="email">Email</label>
<input type="email" id="email" name="email" />
<!-- Password -->
<input type="password" name="password" />
<!-- Number -->
<input type="number" name="age" min="0" max="120" />
<!-- Checkbox -->
<input type="checkbox" id="agree" name="agree" />
<label for="agree">I agree to the terms</label>
<!-- Radio buttons -->
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro
<!-- Dropdown -->
<select name="language">
<option value="js">JavaScript</option>
<option value="py">Python</option>
</select>
<!-- Textarea -->
<textarea name="message" rows="4"></textarea>
<!-- Submit -->
<button type="submit">Send</button>
</form>Semantic HTML
Semantic elements describe their purpose, not just their appearance. Use them instead of divs everywhere. They help search engines index your content, screen readers navigate your page, and future developers understand your markup.
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<time datetime="2026-01-01">January 1, 2026</time>
</header>
<section>
<h2>Introduction</h2>
<p>Opening paragraph...</p>
</section>
<section>
<h2>Main content</h2>
<p>Body of the article...</p>
</section>
<footer>
<p>Written by Sibah</p>
</footer>
</article>
<aside>
<h2>Related links</h2>
<ul>
<li><a href="#">Link one</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Sibah</p>
</footer>
</body>