Is this valid HTML syntax?

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: 'Segoe UI Adjusted';">Aloha from Hawaii</p>

Please notice the ' 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:

<p style="font-family: 'Segoe UI Adjusted';">Beloha from Hawaii</p>

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?

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

<img>

While this is the literal text <img>:

<img>

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: 'Segoe UI Adjusted';">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>:

<p style="font-family: 'Segoe UI Adjusted';">Beloha from Hawaii</p>

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.

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: 'Segoe UI Adjusted';">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