Practical HTML Examples - A Ready-to-Try Code Library
The best way to reinforce what you learned is to practice. On this page you will find a set of complete practical examples - from the simplest HTML structure to interactive forms. Click "Try the code" to open the example directly in the smart editor, where you can edit it and see the result instantly.
1. Basic Page Structure
The simplest possible HTML page.<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>My First Page</title>\n</head>\n<body>\n <h1>Welcome to the Web!</h1>\n <p>This is my first paragraph in HTML.</p>\n</body>\n</html>2. Text Formatting
Using different formatting tags.<h2>Text Formatting</h2>\n<p>This is <b>bold</b> text.</p>\n<p>This is <i>italic</i> text.</p>\n<p>This is <u>underlined</u> text.</p>\n<p>This is <mark>highlighted</mark> text.</p>\n<p>H<sub>2</sub>O is the chemical symbol for water.</p>3. Links and Images
How to add links and images to a page.<h2>Links and Images</h2>\n<p>Visit <a href="https://google.com" target="_blank">Google</a>.</p>\n\n<h3>Image from the web:</h3>\n<img src="/assets/images/mylogo.png" alt="Sample image" style="border-radius: 10px;" width="300">4. Lists
Ordered and unordered lists.<h3>Unordered List:</h3>\n<ul>\n <li>Apple</li>\n <li>Banana</li>\n <li>Orange</li>\n</ul>\n\n<h3>Ordered List:</h3>\n<ol>\n <li>Wake up early</li>\n <li>Learn programming</li>\n <li>Sleep well</li>\n</ol>5. Tables
Display data in a structured table.<table border="1">\n <thead>\n <tr>\n <th>Name</th>\n <th>Age</th>\n <th>Job</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Ahmed</td>\n <td>25</td>\n <td>Engineer</td>\n </tr>\n <tr>\n <td>Sara</td>\n <td>28</td>\n <td>Designer</td>\n </tr>\n </tbody>\n</table>6. Forms
A simple registration form.<form onsubmit="return false;">\n <div class="form-group">\n <label>Name:</label>\n <input type="text" placeholder="Enter your name" required>\n </div>\n <div class="form-group">\n <label>Email:</label>\n <input type="email" placeholder="example@mail.com" required>\n </div>\n <button type="submit" onclick="alert('Form submitted!')">Register</button>\n</form>