I notice the Chrome browser automatically creates hyperlinks for web address references that are not anchor tags. I have a page which will list web addresses (e.g.: www.mycompany.com). But in this instance having them converted to links makes things more confusing.
Is there an html tag I can use to prevent this?
I just create a file that I called test.html with the following content:
<html>
<head>
</head>
<body>
<p>
www.microsoft.com
</p>
</body>
</html>
I opened it in Google Chrome.
The text is not hyper-linked.
There might be something else going on you are not describing. Can you give an html that can reproduce your problem?
It can be settings related or you might have some javascript on your page that "linkifying" whatever looks like a url. Or a browser plugin.
Related
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 web page again: see the pic below.
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.
The intended result is from the textbook and is shown on the next picture.
Any ideas why doesn't Safari (or Firefox, Opera, Chrome, DuckDuckGo likewise) show the file correctly?
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.
The problem must have been with TextEdit, since it worked immediately and as expected after I copied the same text to Brackets.
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.
TextEdit can 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
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
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.
According to the documentation and many posts, the tag
must save a file, however for me it just opens an image in a browser: chrome, firefox, safari.
download. Prompts the user to save the linked URL instead of navigating to it.
What should I do to force downloading to a drive, without JS?
Minimum working example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
download
</body>
</html>
This link might be helpful . From Chrome 65+ download tag is discontinued. It is accepted only when it is from the same origin.
Problem here is, It uses JS. So, It is not completely independent of JS.
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>
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.
In case someone is still struggling with this, try saving your files before you open them. That fixed the problem for me.
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.
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.
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.
I just had this problem and the solution was very simple, so I´ll give it just in case someone runs into the same silly mistake. I was typing all the code in the wrong file.
Add this line of code inside your head element:
<meta charset="UTF-8"/>
I would recommend to put the right path under the src with the correct file location
<script src="scripts/main.js"></script>
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.
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.
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
If anyone still needs help- It worked after saving the file on VS Code!
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>
I am in the process of building a website and the browser keeps rearranging my HTML for some unknown reason. This is my code:
<DOCTYPE! html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is some text</p>
</body>
</html>
And here is a screenshot of what the browser uses:
(Sorry, don't have enough reputation to insert a real image)
This is all fine except when I want to use link to link an icon to the page, and it won't display unless it's in the head (I used the browser's dev tool and literally dragged the link up to the head and watched it appear immediately)
I've checked the source using the browser's developer tool and it looks exactly the same as in my code editor, so I know my web server isn't messing with it.
It does the same in Chrome and Firefox. It appears that they both use the head for script when a browser extension decides to put it there, but it does this even with no browser extensions.
I have tried the Notepad++ Encoding -> Convert to UTF-8 trick to remove the BOM character which supposedly fixes my issue but that did no good.
So how can I make the web page display as I wrote it?
Here is a download link to the file with the code snippet seen above:
http://www.filedropper.com/testpage_1
Thanks for any help!
Your Doctype is invalid. Error recovery is causing it to be treated as text. Since text is not allowed outside the body, it implies the start of the body element.
The correct syntax is:
<!DOCTYPE html>
The exclamation mark needs to be the second character.
This would have been picked up if you had used a validator.
I created a test page with your code and I can confirm that the developer tools show it like that. However, there is a typo in the DOCTYPE. Change the code to the following to fix it:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is some text</p>
</body>
</html>
The difference is that the exclamation mark needs to be before DOCTYPE, not after it. See The DOCTYPE in the HTML5 specification, which also points out that <!DOCTYPE html> is not case sensitive.
I am doing some work that would require me building up html inside of embedded iframes. Sort of like jsbin does.
However I'm stumped with my very first spike.
How come my html isn't being rendered when I put it inside an iframe?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<iframe>
<html>
<head><meta charset=utf-8 /></head>
<body>
<h1>Big Header</h1>
</body>
</html>
</iframe>
</body>
</html>
Here's my jsbin.
Additionally when I tried drawing some svgs inside the iframe with d3 they came out looking all weird and not scaling. After opening dev tools and editing the svg text as html I found that even adding a non-meaningful space anywhere would get it to redraw and render correctly. So bonus points if anyone can tell me any resources I can read up on cause clearly iframes don't work like I thought.
iframes need to be pointed at a page to load. you don't put html between iframe tags. if you put anything between iframe tags - it is text you want to display in the case the browser the client is using doesn't support the tag. you should make the html above its own local html page, and point the iframe src attribute above to point at that web page.
After a day of research:
Like Mike said, html inside an iframe is for the case the browser does not support iframes and will not show up otherwise. However, it IS absolutely possible to construct a document inside an iframe on the fly and without a server-side query. To do this, you have to use javascript to construct the document. You can get a reference to it and write html like so:
var iframe = document.getElementsByTagName('iframe')[0];
,doc = iframe.contentDocument || iframe.contentWindow.document
;
doc.open();
doc.write('<p>Some html</p>');
do.close();
Note that as Remy mentions here the document must be opened before writing and closed after.