Editor's Recommendation: Do you really understand HTML? Below, we'll take a closer look at HTML. Through an example of faulty HTML code, the editor will help you gain a deeper understanding of HTML.
Here is a snippet of HTML—can you spot the issues?
```html
<P> What I write isn't HTML, it's loneliness.<br><br> I say:<br>Don't be infatuated with me, I'm just a legend.
```
This was originally a Yahoo interview question (the text has been slightly altered). It’s been used for many years, and no one has ever answered it completely correctly.
---
### Analysis
The motivation behind this question is that too many people think HTML is too simple, but in reality, it is the most fundamental and critical part of front-end development. Whether the structure of HTML is designed reasonably directly affects how easy the code is to maintain, how flexible it is, and even the performance of the webpage and collaboration efficiency. Many people mistakenly believe that front-end development is just JavaScript development, which is a huge misunderstanding. JavaScript, HTML, and CSS are the three foundational pillars of front-end development. They have different natures but are closely related. Proper understanding and reasonable application of these technologies distinguish professionals from amateurs. Some back-end engineers can write beautiful JavaScript, but they often don’t know how to properly integrate JavaScript, HTML, and CSS. Accurate mastery of HTML doesn’t come from learning a programming language in the traditional sense—it stems from rich practical experience and insight. This is a basic skill for front-end engineers.
This is not a nitpicking or show-off question; it’s a serious "painting eggs" question that tests your fundamentals. Your understanding of a single line of code can reveal your level of front-end development expertise. Let’s get back to the question. Here are the key points being tested:
---
### Key Points Tested
#### Point 1: The Difference Between HTML and XHTML
This line of code is entirely correct under HTML 4.01 Strict, but it would result in numerous errors under XHTML 1.0 Strict. Therefore, this is clearly a test point. In XHTML, all tags must be closed. For example, `` and `` need to be closed, and tags cannot be uppercase (`P` should be lowercase `p`). Additionally, entities like ` ` and `` must be contained within a container element. None of these rules apply in HTML. In HTML, `` is an optionally closing tag, meaning it doesn’t need to be explicitly closed.
This point highlights how strict XHTML is compared to HTML. If you answer this correctly, you’ll score 60 points.
#### Point 2: Separation of Style
Using ` ` to control indentation is unreasonable. This should be handled using CSS instead. Therefore, the ` ` should be removed.
#### Point 3: Proper Use of Tags
`` is a forced line break tag, while `` represents a paragraph. The original question uses consecutive `` tags to create the effect of two paragraphs, which works but is clearly unreasonable because the paragraph spacing cannot be controlled later. The correct approach is to use two `` tags to represent two paragraphs. However, using `` after “I say” for normal text wrapping is reasonable.
If you answer all of the above correctly, you’ll score 100 points.
---
### Improved Version of the Original Question
#### HTML 4.01:
```html
What I write isn't HTML, it's loneliness.
I say: Don't be infatuated with me, I'm just a legend
```
#### XHTML 1.0:
```html
What I write isn't HTML, it's loneliness.
I say: Don't be infatuated with me, I'm just a legend
```
---
### Bonus: Semantic Tag Usage
Using semantic tags appropriately on top of the previous improvements will earn extra points. However, overusing tags can make the code unnecessarily complex. For instance, the phrase “I say” could be marked with the `` tag.
```html
What I write isn't HTML, it's loneliness.
I say: Don't be infatuated with me, I'm just a legend
```
I think this is sufficient. If you want to go further, you could use the `` tag for “I” and the `` or `` tag for “HTML” (though discussing the difference between `` and `` might be overly pedantic). Beyond this, there’s no need to complicate things.
```html
What I write isn't HTML, it's loneliness.
I say: Don't be infatuated with me, I'm just a legend
```
This version demonstrates proper use of semantic tags without unnecessary complexity.