An element can have no visible text and still exist, such as <p></p>. Void elements such as img and input are a different idea: they cannot contain children at all.
What You Need to Know
Empty paragraphs are not a good way to create spacing. Use CSS for layout, and give images appropriate alt text even though they are void.
The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.
Example: See It in Action
Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<p>
</p>
<img src="images/star.svg" alt="Star">
<input type="text" aria-label="Nickname">Let’s Understand the Example
- A p groups a paragraph of related text. Start another paragraph for a new thought.
- Img displays an image. Src chooses the file and alt provides a useful text alternative.
- Input creates a form control. Its type decides whether people type text, choose a date, move a slider and more.
- Src tells the browser where to find an image or other embedded resource.
- Alt supplies a text alternative for an image. Empty alt is appropriate for purely decorative images.
- Type changes the kind of input, script, resource or button, depending on the element.
An image appears only if its file path is correct. If it is informative, its alt text should share the same useful meaning; if it is decoration, empty alt text is often right.
What Should You See?
This example may change the document’s behavior or metadata rather than draw something obvious. Use your browser’s developer tools to inspect the actual elements and attributes.
Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.
Try It Yourself
- Find the empty p and decide whether it serves a real content purpose.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Using several empty p elements to push content down the page.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- An element can have no visible text and still exist, such as <p></p>.
- A p groups a paragraph of related text. Start another paragraph for a new thought.
- Empty paragraphs are not a good way to create spacing. Use CSS for layout, and give images appropriate alt text even though they are void.