How to save an html file so that it opens correctly in a browser?-CodePudding

Just created a simple html file in TextEdit on Mac. It looks like this.

<html>

        <head>

                <title>My First Web Page</title>

        </head>

        <body>

                <h1>Welcome to My First Web Page</h1>

                <p>This is an HTML page that I created in TextEdit.</p>

        </body>

</html>

Afterwards I saved it using an .html extension, and tried to open this file in multiple browsers. However, instead of displaying the correct layout, I got this same code on a page again: see the pic below.

Safari does not display an html file

The result persisted across all browsers and after refreshing the page, too. Though if I first saved the document as an RTF file, and later changed the extension manually to HTML, browsers displayed some stuff, but not as expected and shown in a textbook. Below the second result.

Safari displays an html file not as expected

The intended result is from the textbook and is shown on the next picture.

intended result as in textbook

Any ideas why doesn't Safari (or Firefox, Opera, Chrome, DuckDuckGo likewise) show the file correctly?

CodePudding user response：

My first instinct is to make line 1 read <!DOCTYPE HTML> to see if that would make your webbrowser read the code as HTML instead of a plain text. Not sure if that would work, but I would try it.

CodePudding user response：

There are a few properties you are missing, which should be included to enable browsers to parse the file correctly.

The following is a minimal snippet, passing https://validator.w3.org/

<!doctype html>
<html lang=en>
    <head>
      <meta charset=utf-8>
      <title>Your Title</title>
    </head>
    <body>
      <p>Your Content</p>
    </body>
</html>

the doctype is a declaration informing the browser in which version of html the document is written in, by default html5

head is a container for metadata

meta charset=utf-8 specifies the character encoding

the rest are html tags you are probably familar with

CodePudding user response：

The problem must have been with TextEdit, since it worked immediately and as expected after I copied the same text to Brackets.

CodePudding user response：

Are you using any sort of IDE like VS Code, for instance, to write this html?

I ask because there are other html elements you are missing which the browser - no matter what browser it is - requires in order to fully render a page.

Those details are automatically populated to the minimum extent required to render an html webpage in a browser when you use an html boilerplate. That link will give you more info on WHY you need all the stuff in a boilerplate, but basically it's like a pre-fab template for your html page that already comes with all the basics you need there... just start adding content and you're off to the races.

On VS Code, you can add boilerplate by typing the ! (exclamation mark) and then enter; VS Code will open a dropdown to autocomplete this line to be boilerplate for html5 and when you hit enter, populate the page with that boilerplate.

Then you can simply copy in the content you wrote yourself, remove what is duplicate, and you should be good to go.