HTML Elements
An element is everything from a start tag to an end tag.
Syntax
<p>This is a paragraph element.</p>An HTML element is defined by a start tag, some content, and an end tag.
The parts of an element
- Start tag:
<p> - Content: the text or other elements inside.
- End tag:
</p>
Some elements, like <br>, are empty and have no content or end tag.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer wraps a blog post body in a <article> element so screen readers identify the main content.
- A front-end engineer uses <button> elements instead of <div> to ensure keyboard accessibility for interactive controls.
- A content editor marks up product descriptions with semantic elements like <h2>, <p>, and <ul> to aid SEO.
More examples
Basic element open and close tags
Each element uses an opening tag, content, and a closing tag to define its role on the page.
<h1>Welcome to SoundsCode</h1>
<p>Start your coding journey today.</p>
<a href="/courses">Browse courses</a>Void element with no closing tag
Void elements like <img>, <input>, <br>, and <hr> have no content and require no closing tag.
<img src="logo.png" alt="SoundsCode logo">
<input type="text" placeholder="Search...">
<br>
<hr>Nested elements forming a card
Nesting elements inside each other builds page structure; each element describes part of the content.
<article>
<h2>Intro to HTML</h2>
<p>Learn the <strong>basics</strong> of web structure.</p>
<a href="/html">Start lesson</a>
</article>
Discussion