A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore enumerated attribute missing/invalid values using a short example that you can inspect and change.
The Idea in Plain English
An enumerated attribute chooses from a defined list of keywords. It may have separate defaults when the value is missing or invalid, so it is not interchangeable with a boolean attribute.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<p contenteditable="true">Try editing this text.</p>
<p contenteditable="false">This text is not editable.</p>What Each Part Does
- A paragraph keeps one idea together as readable text.
- The browser reads these lines in order and uses them to build the page or request.
- Changing the relevant value lets you test what this feature controls.
The browser interprets the supported keyword according to the HTML specification for that attribute.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: compare authored source against the DOM tree in DevTools focused on HTML Enumerated Attribute Missing/Invalid Values, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Inventing keyword values that look reasonable but do not exist in the attribute vocabulary.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- An enumerated attribute chooses from a defined list of keywords. It may have separate defaults when the value is missing or invalid, so it is not interchangeable with a boolean attribute.
- The browser interprets the supported keyword according to the HTML specification for that attribute.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.