0

I have spent the last two hours trying to figure out whether the following code is valid HTML syntax or not. But at least using Google und co didn't help to get a decent answer. Here is the code:

<p style="font-family: &#39;Segoe UI Adjusted&#39;;">Aloha from Hawaii</p>

Please notice the &#39; which is the HTML code for the apostrophe '.

Although this example seems to get rendered correctly, the next logical step would assume to being able to replace other syntax characters as well, like the brackets, which would lead to the following code:

&#60;p style="font-family: &#39;Segoe UI Adjusted&#39;;"&#62;Beloha from Hawaii&#60;/p&#62;

Well, this definitely breaks the code. So I'm a little bit confused, whether the first example where just the apostrophes are replaced is valid HTML syntax or not - and if, why?

DarkBee
  • 16,592
  • 6
  • 46
  • 58
Slevin
  • 617
  • 1
  • 7
  • 17
  • 3
    Those are called "entities". They are valid in strings and attributes, but not in constructing the tags. – Tim Roberts Jul 20 '23 at 04:11
  • Does this answer your question? [How to display raw HTML code on an HTML page](https://stackoverflow.com/questions/2820453/how-to-display-raw-html-code-on-an-html-page) – Rituparna Warwatkar Jul 20 '23 at 04:13
  • https://stackoverflow.com/a/2820460/14027764 here's your answer i guess – Rituparna Warwatkar Jul 20 '23 at 04:13
  • So, since `style` is an attribute, the entity `'` is valid there, thus the first example is valid HTML syntax? – Slevin Jul 20 '23 at 04:13
  • @RituparnaWarwatkar unfortunately this doesn't answer my question. I don't wanna escape special syntax characters to display them as text, I want to know if I can use HTML entities to format valid HTML syntax. In my case, whether it's valid to use these entities to build the enclosing apostrophes inside the style attribute. – Slevin Jul 20 '23 at 04:19
  • 1
    https://validator.w3.org/ – Andy Ray Jul 20 '23 at 04:27
  • Well, according to @TimRoberts I think I finally entered the right path of enlightement which lead me to this https://stackoverflow.com/q/12444605/13609359 . Many thanks for the information. – Slevin Jul 20 '23 at 04:29
  • @AndyRay surprisingly validator.w3.org says `<p style="font-family: 'Segoe UI Adjusted'">Beloha from Hawaii</p>` is valid ^^. I'm pretty sure, the validator simply thinks this is all text only, so no reason to warn. At least for my question this validator is useless - but I think for many other things it might be a benefit. – Slevin Jul 20 '23 at 04:36
  • The second example is also valid HTML, just valid HTML for the string `

    Aloha from Hawaii

    ` and not for an actual paragraph     – mousetail Jul 20 '23 at 06:36

2 Answers2

2

You seem to have misunderstood the purpose of escaping. This is a img tag:

<img>

While this is the literal text <img>:

&lt;img&gt;

Escaping the characters stops their normal role in marking tags and just displays the literal character instead.

Thus this is a p tag with a certain style:

<p style="font-family: &#39;Segoe UI Adjusted&#39;;">Aloha from Hawaii</p>

Note you escaped the ' here. If we had used single quotes around the attribute this would be necessary because otherwise a unescaped ' would end the attribute. However, since you used double quotes in this case it has no effect.

This is just the literal text <p style="font-family: 'Segoe UI Adjusted';">Aloha from Hawaii</p>:

&#60;p style="font-family: &#39;Segoe UI Adjusted&#39;;"&#62;Beloha from Hawaii&#60;/p&#62;

The escaped characters prevent it from rendering as a actual paragraph and just display the special characters as characters instead.

Both versions are entirely valid HTML, just valid HTML that represents a different thing.

mousetail
  • 7,009
  • 4
  • 25
  • 45
  • Yes, I must confess, I was really confused about the fact, that replacing the `'` with entities inside attribute values is ok and complete valid. I thought these quotes are part of the HTML syntax, but for my current understanding, the attribute value itself is treated as text and gets parsed by the rendering engine, while the rendering engine allows entities according to the specs. So many thanks for deeper clarification. I think your answer in combination with https://stackoverflow.com/q/12444605/13609359 should help others as well to get a little grasp of what is going on under the hood. – Slevin Jul 20 '23 at 07:31
1

The second one is not valid because it is used to display html code on html file. This is called entities and every special symbol has one.

Suppose, you want to show a html code of paragraph on your HTML file. You cannot show the paragraph until you convert at least it's arrow symbols to entities. If you paste the code of paragraph on your html file, it'll display the paragraph element, not the code of the paragraph element. So, for that purpose entities are used.

Your first code is working because :

<p style="font-family: &#39;Segoe UI Adjusted&#39;;">Aloha from Hawaii</p>

Even if you remove the apostrophe the code will work, although that is a bad practice.

For more info : MDN Docs

Codemaster United
  • 315
  • 15
  • So the parser would split the attribute value into chunks separated by the comma even when omitting the apostrophes? Is there anywhere a reference where I could read about this? HTML is build to forgive almost every mistake one can make, but as you mentioned, good practice is always better - and knowing is best ;) – Slevin Jul 20 '23 at 07:57
  • 1
    @Slevin, Here's a similar answer about whether to quote or not the font family's value - [SO Answer : Why would font names need quotes?](https://stackoverflow.com/a/13752149/20680889) – Codemaster United Jul 20 '23 at 09:50