How to save an html file in TextEdit so that it opens correctly in a browser?
Question
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?
5 answers
solution1
0 2022-12-31 01:50:50
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.
solution2
0 2022-12-31 02:06:16
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
solution3
0 2022-12-31 02:15:29
The problem must have been with TextEdit, since it worked immediately and as expected after I copied the same text to Brackets.
solution4
0 2022-12-31 08:10:21
A ascii-encoded text file is not the same as a TextEdit file. TextEdit will be using RTF by default which is more similar to a Word document doc type format than raw text. When you save the file, TextEdit is actually saving it to a RTF file containing your HTML text.
TextEditcan edit HTML but, in default mode, it writes the HTML for you from how you format the text in the editor (You might hear this called WYSIWYG )
You can change the TextEdit settings to edit the HTML file as text in TextEdit -> Settings but I feel you would be far better to find a more appropriate programmers editor to edit text. On macOS, you have the command line programs installed by default: vim and nano or you can install a GUI based editor such as Sublime Text
solution5
-2 2022-12-31 01:50:56
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.