Why is my HTML file not displaying to the browser?

Question

I am learning how to use a text editor, and I've just created my first file with it. It previews with the correct output, but when I run it in the browser, it gives me a blank page.

As you can see, the doctype and html tags are in place, as well as the head and body. I am using Visual Studio Code as my text editor. Why will this not display anything in my browser? To be clear, it does preview, just won't display in browser

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Do you save the file with extension .html and open it using the browser or are you trying to get VSC to display it? As you can see it shows in the snippet I made you — mplungjan, Nov 15 '20 at 21:14
How are you trying to run it in the browser? Are you typing the URL manually? Are you using VS code to open the browser and send it the URL? Are you double clicking the file in your file manager? Where are you loading the HTML document from? A web server? A local file? The live server plugin for VS Code? Have you tried refreshing the page in the browser? Clearing the cache? Using a different browser? — Quentin, Nov 15 '20 at 21:23
I created the file as index.html in VS Code, then went to my file explorer and selected to open in Google Chrome. I originally opened it in Fire Fox, but that browser doesn't load well on my computer (I have a windows 7). I selected Google Chrome as my default, and the file is now classified on my computer as a Chrome HTML Document. Refreshing the page was the first thing I tried. If it changes anything, the browser showed a dark screen with all of my bookmarks/tabs at the top. I know this is a simple question, but I am unfamiliar with the software and just looking for a little help. — coding_gecko972, Nov 17 '20 at 00:30

Arca Ege Cengiz · Answer 1 · 2020-12-12T23:48:55.120

2

Are you sure? It does display on mine. Is the file saved as a .html file? Also, try opening it on another browser. If that doesn't work, try creating a new file in Notepad or something similar, save it with a .html file extension and try opening it again.

EDIT: Try using Notepad. Check if the file is saved with a UTF-8 encoding. If that doesn't work, try installing another browser or using Edge/Safari/Internet Explorer or whatever built-in browser you have.

edited Dec 12 '20 at 23:48

answered Nov 15 '20 at 22:21

Arca Ege Cengiz

315
3
16

It is saved as index.html. I have been using google chrome. I can try to use Fire Fox, but that browser doesn't load well on my computer. – coding_gecko972 Nov 17 '20 at 00:33

score 1 · Answer 2 · answered Oct 07 '21 at 08:22

1

In case someone is still struggling with this, try saving your files before you open them. That fixed the problem for me.

answered Oct 07 '21 at 08:22

Yuzu

21
1

score 1 · Answer 3 · edited Jan 04 '22 at 13:22

1

Possible Reasons:

You might not have saved the changes after writing the code (most likely).
Problem with the browser (load it in another browser)
Check the extension (just for clarification)

There is no problem with !DOCTYPE html tag or html tag.

edited Jan 04 '22 at 13:22

K450

691
5
17

answered Dec 28 '21 at 07:58

Tarun M

31
2

score 0 · Accepted Answer · answered Nov 17 '20 at 00:36

0

It loaded on Fire Fox, just not on Google Chrome for some reason. I'm sorry for wasting everyone's time. As I have said, I am unfamiliar with VS Code. Thank you for all of your suggestions.

answered Nov 17 '20 at 00:36

coding_gecko972

82
1
1
7

can you then please accept an answer that worked so that it's easier for others to find the correct answer? – Arca Ege Cengiz Feb 16 '21 at 20:33
Also, maybe Google Chrome doesn't have read access to the html file – Arca Ege Cengiz Feb 16 '21 at 20:35

score 0 · Answer 5 · answered May 12 '21 at 16:00

0

I had this same baffling problem. I quit Chrome, re-opened, and then I was able to open my .html files (from my Mac's Finder) with Chrome just like I could already open them with Safari or other browsers.

answered May 12 '21 at 16:00

43Quintillionaire

1

score 0 · Answer 6 · edited Nov 29 '22 at 18:04

0

Add this line of code inside your head element:

<meta charset="UTF-8"/>

edited Nov 29 '22 at 18:04

Eric Aya

69,473
35
181
253

answered Nov 29 '22 at 16:10

Vince Ybañez

103
10

score 0 · Answer 7 · edited Jan 02 '23 at 20:43

0

I would recommend to put the right path under the src with the correct file location

<script src="scripts/main.js"></script>

edited Jan 02 '23 at 20:43

Reynadan

649
4
18

answered Jan 01 '23 at 08:11

Kartikey

9

score 0 · Answer 8 · answered Jan 09 '23 at 16:41

I was facing the same issue and none of the steps mentioned helped. So I deleted the index.html file I had, opened my project folder in VS Code, created a new index.html file there, pasted my code and clicked on go live. Then I could see my image on the webpage. And after that I could see the image even by double clicking the index.html file from Finder. Hope this helps.

score 0 · Answer 9 · answered Feb 05 '23 at 01:45

0

Save your file in Notepad or whatever text generator you are using and then close it before launching the html file in the browser. Mine would not open if Notepad was still open.

answered Feb 05 '23 at 01:45

Dulane Holly

1

score 0 · Answer 10 · edited May 17 '23 at 21:23

When i created my file folder and css text files, the ext <.txt> was hidden. so when i saved my <index.html> it was actually saved as <index.html.txt>. So i went into my explorer window and under options go to and changed the choice to show hidden extensions. Then i was able to see the <.txt> and delete it and resave as just <index.html>. Then also had to rename my <style.css.txt> and delete the .txt.

score -1 · Answer 11 · answered Nov 15 '20 at 21:23

-1

In visual studio code just type in a blank page

html:5

then just press the touch "tab", it will display a basic html 5 structure to start

answered Nov 15 '20 at 21:23

bfalsata

71
1
4

1

How would that help? They've **got** a basic HTML 5 structure already. – Quentin Nov 15 '20 at 21:23

score -1 · Answer 12 · answered Jan 03 '23 at 15:12

-1

If anyone still needs help- It worked after saving the file on VS Code!

answered Jan 03 '23 at 15:12

anukshi

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 03 '23 at 16:02

score -4 · Answer 13 · answered Nov 15 '20 at 21:19

-4

Just remove "<html>" a the second line it's already set in the first line

<!DOCTYPE html>
<head>
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

answered Nov 15 '20 at 21:19

bfalsata

71
1
4

5

That won't make any difference. – Quentin Nov 15 '20 at 21:20
2

The HTML 5 Doctype is a magic string that triggers Standards Mode in browsers. The `` start tag starts the HTML element. They are **not** the same thing. (Historically the `html` in the Doctype declaration would state what the name of the root element was). – Quentin Nov 15 '20 at 21:21

Why is my HTML file not displaying to the browser?

13 Answers13

Possible Reasons:

Linked