Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Opening Tag
Starts the element
Content
Text or nested elements
Closing Tag
Ends the element
<h1>Hello World</h1>Opening Tag + Content + Closing Tag = Complete Element
See how opening tags, content, and closing tags work together
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Elements</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is a <strong>paragraph</strong> with some <em>emphasis</em>.</p>
<p>Elements can be <span style="color: blue;">styled</span> and <span style="background: yellow; padding: 2px 4px;">highlighted</span>.</p>
</body>
</html>Loading preview...
Some elements don't have content or closing tags:
<img /><br /><hr /><input /><meta /><link />Experiment with HTML elements, see opening/closing tags, and explore self-closing elements
Examples:
<div><p><h1>-<h6><section><article><ul><ol>Examples:
<span><a><strong><em><code><img>See the difference between block and inline elements in action with visual highlighting
<header>Introductory content, site logo, navigation
<nav>Navigation links section
<main>Primary content (use once per page)
<article>Self-contained content (blog post, card)
<section>Thematic grouping with heading
<aside>Tangential content (sidebar, related)
<footer>Footer content, copyright, links
<figure>Image with caption (figcaption)
Explore semantic HTML5 elements like header, nav, main, article, aside, and footer
<a href="https://example.com" target="_blank">Link</a>idUnique identifier
classCSS class names
styleInline CSS styles
titleTooltip text
data-*Custom data attributes
hrefLinksLink destination (<a>)
srcMediaImage/script source
altImagesAlternative text for images
typeFormsInput or button type
placeholderFormsInput hint text
See global attributes, link attributes, image attributes, and ARIA accessibility attributes in action
<div>
<p>Text</p>
</div>✓ Block inside block
<p>Text with <strong>bold</strong></p>✓ Inline inside block
<span>
<div>Text</div>
</span>✗ Block inside inline
<p><p>Nested</p></p>✗ Paragraph in paragraph
Understand proper HTML nesting with valid and invalid examples
<h1-h6><p><span><strong><em><mark><code><ul><ol><li><dl><dt><dd><a><img><video><audio><picture><source><form><input><button><select><textarea><label><table><thead><tbody><tr><th><td><header><nav><main><article><section><footer><input>Single-line text input (various types)
<textarea>Multi-line text input
<select>Dropdown selection list
<button>Clickable button
<label>Input label for accessibility
<fieldset>Group related form controls
Build and test forms with various input types, labels, validation, and submit handling
A practical example showing semantic HTML, headings, paragraphs, lists, images, and links working together
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post - HTML Elements</title>
</head>
<body>
<header>
<h1>🌐 Web Development Blog</h1>
<nav>
<a href="#home">Home</a>
<a href="#articles">Articles</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Understanding HTML Elements</h2>
<p class="meta"><time datetime="2025-01-15">January 15, 2025</time> • <span>By John Doe</span></p>
<p><strong>HTML elements</strong> are the foundation of web development. They provide <em>structure</em> and <em>meaning</em> to your content.</p>
<figure>
<img src="https://images.pexels.com/photos/1666021/pexels-photo-1666021.jpeg" alt="Professional web development image" width="600" height="300" />
<figcaption>Figure 1: Professional web development</figcaption>
</figure>
<h3>Key Concepts</h3>
<ul>
<li><strong>Semantic HTML</strong> - Using meaningful tags</li>
<li><strong>Accessibility</strong> - Making content available to all</li>
<li><strong>SEO</strong> - Helping search engines understand content</li>
</ul>
<h3>Common Elements</h3>
<ol>
<li>Headings (h1-h6) for titles and sections</li>
<li>Paragraphs (p) for text content</li>
<li>Lists (ul, ol, li) for grouped items</li>
<li>Links (a) for navigation</li>
<li>Images (img) for visuals</li>
</ol>
<blockquote>
"The best way to learn HTML is by building real projects and experimenting with different elements."
<cite>- Web Developer's Handbook</cite>
</blockquote>
<p>For more information, visit <a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs</a> or check out <a href="https://www.w3.org" target="_blank" rel="noopener">W3C Standards</a>.</p>
</article>
<aside>
<h3>📚 Related Articles</h3>
<ul>
<li><a href="#">CSS Styling Basics</a></li>
<li><a href="#">JavaScript Fundamentals</a></li>
<li><a href="#">Responsive Design</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Web Dev Blog. All rights reserved.</p>
<p><small>Built with HTML, CSS, and JavaScript</small></p>
</footer>
</body>
</html>Loading preview...
aria-labelAccessible name
aria-labelledbyReferences label element
aria-describedbyAdditional description
roleElement purpose
Use semantic emphasis instead of purely visual tags.
Choose between links and buttons based on behavior.
Repeated, related items belong in lists, not separate paragraphs.
<!-- Good: button for an in-page action --> <button type="button" data-action="open-modal"> Open settings </button> <!-- Good: link for navigation --> <a href="/settings"> Go to settings page </a> <!-- Good: semantic emphasis --> <p> Please <strong>save your work</strong> before you continue. </p> <!-- Good: real list instead of repeated paragraphs --> <ul> <li>Download the starter project</li> <li>Run <code>npm install</code></li> <li>Start the dev server</li> </ul>