I want to store an entire HTML document to put in an iframe (srcdoc) later.
Am I allowed to put everything in a template including the html, head and body like this?
<template>
<html>
<head>
<title>Document</title>
</head>
<body>
<main>Content</main>
</body>
</html>
</template>
If not, what's the best way to store an entire document? Thanks!
Unfortunately, the template tag is not allowed to contain <html> tags. per 4.1.1 of the HTML specification:
Contexts in which [the <html>] element can be used:
As document's document element.
Wherever a subdocument fragment is allowed in a compound document.
and from 4.12.3, the <template> tag does not provide either of these contexts. For the same reason, you can't use <head>, <body> or <title> tags either. Chrome and Firefox both actively strip out the invalid tags from the <template>, preventing you from using it.
The best way of storing HTML for use in iframes is to put the HTML code in a different file in your web server.
However, an acceptable alternative is to store the HTML inside your <iframe>, then populating the srcdoc attribute with the content.
<iframe id="yourIframe">
<!-- Everything inside here is interpreted as text, meaning you can even put doctypes here. This is legal, per 12.2.6.4.7 and 4.8.5 of the HTML specification. -->
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<main>Content</main>
</body>
</html>
</iframe>
...
<script>
...
const iframe = document.getElementById("yourIframe");
iframe.srcdoc = iframe.innerHTML;
</script>
Related
I am new to HTML and started with my first lesson.
I am unable to understand the head tag clearly and need help to understand it clearly.
As I read about the head tag, it says "The head of an HTML document is the part that is not displayed in the web browser when the page is loaded."
However when I try in my lab exercise with the below code in my html file, the content inside the h1 tag that is within the head tag is displayed in the web browser, which is confusing me as I was expecting that, whatever I write inside the head tag will not be displayed in the browser, as per what I read. Can someone give me clarity on this.
<!DOCTYPE html>
<html>
<head>
<title>First Lesson</title>
<h1>Hello World!</h1>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Modern HTML is very tolerant. You can now get away with not closing tags, or even no tags at all (remove the <h1> tags and "hello world!" will still be displayed) You could put the <title> in the body and it will still be displayed in the browser tag.
Although it still works, it is incorrect and fails HTML markup validation.
Any of the tags that meant to be in the head <title> <style> <base> <meta> etc. Won't be displayed on the page.
Html tag head contains machine-readable information, which not displayed, like metadata, scripts, styles. He also inherits all of the properties html element and browser parse him, like common html tag. More information: link, link
Is it possible wrap an HTML document within another, all within the same file? Such as:
<!DOCTYPE html>
<html>
<body>
...
<!DOCTYPE html>
<html>
<body>...</body>
</html>
...
</html>
Why would I want to do that, you ask? (I don't :-) ) The phpinfo() function in PHP generates a full HTML document (to be used as a single call, on its own). I created an HTML document around it. Most browsers display this as I expected, but it is invalid HTML.
<!DOCTYPE html>
<html>
<body>
<h1>PHP Info</H1>
<?php phpinfo(); ?>
</body>
</html>
I can solve this with PHP, but I was for an HTML-only solution; something like:
...
<xframe>
<!DOCTYPE html>
<html>
<body>...</body>
</html>
</xframe>
...
I.e., something like <iframe> without the external reference.
Not as such.
The closest you could come would be to use an iframe with the src expressed as a data: scheme URL (which encodes the entire HTML document inside the URL itself) … but that would require phpinfo() to return a string of HTML instead of just outputting it.
Why does the string hello has background color yellow? Why isn't it black?
<!DOCTYPE html>
<html>
<head style="background-color:black">
<title>Check123!</title>
<h1>Hello</h1>
</head>
<body style="background-color:yellow">
<h1>World!</h1>
</body>
</html>
https://www.w3schools.com/tags/tag_head.asp
Default CSS Settings
Most browsers will display the element with the following default values:
head {
display: none;
}
You should put the page's metadata in the head, so there is usually no need to display it.
You get the color from the parent container of your <h1> title, which is <body>.
What ever the html elements you are creating should come inside body tag only. head is where to give information about the title of the page and where the stylesheet and scripts files exist.i thing you got confused with header and head.
header is a html5 tag that comes inside the body tag
H1 is not in the header. H1 should be written in body. If you do not do this, the browser itself corrects your mistake and transfers it to the body.
https://www.w3schools.com/html/html_head.asp
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
Everything you want visible should be in the <body> tag. Your h1 should be inside of a header tag inside your body. The head tag is reserved for meta tags and linking stylesheets.
In your case, it should be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header style="background-color:black">
<h1>Check123!</h1>
<h2>Hello</h2>
</header>
<article style="background-color:yellow">
<h3>World!</h3>
</article>
</body>
Here are two html snippets:
<html>
<head>
<title>foo</title>
<style type="text/css"></style>
</head>
<body>
bar
</body>
</html>
<html>
<head>
<title>foo</title>
<style type="text/css"/>
</head>
<body>
bar
</body>
</html>
Try rendering in Firefox, Chrome or IE - the two snippets render differently! But I thought both versions of an empty element are the same? (The style element)
According to HTML Specification end tag is required for STYLE element.
14.2.3 Header style information: the STYLE element
Start tag: required, End tag: required
So self-closed version of style is not correct HTML document part.
In XML it would be valid, but you call your snippets HTML, where it is not. – In HTML5 for example (serialized as HTML, not as XML), you didn’t close the style element yet (slash is ignored).
When served as text/html, they are parsed with an HTML parser, which treats <style type="text/css"/> just as a typo for <style type="text/css"> (i.e., ignores the slash before the tag close). This makes the rest of the document part of the style element and thus ignored. – This is the reason why XHTML 1.0, appendix C, recommends that the “self-closing” syntax (aka. “minimized syntax”) be used only for elements with EMPTY declared content.
When served as genuine XHTML, with an XML content type, they are processed identically, by XML rules. However, in the absence of an xmlns attribute, they are treated just as generic XML without a style, so in practice the browsers just display the XML code as-is.
I need to figure out what makes the html code in this page doesn't show in browser.
http://arbsq.net/dev/out_html.htm
I checked with:
http://validator.w3.org/check?uri=http%3A%2F%2Farbsq.net%2Fdev%2Fout_html.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
But it is not clear to me what causes the browser not to process the html code
Remove the <title/> tag. The browser is interpreting your entire html code as the title of the page.
Remove <title/> or change to <title>Site title</title> otherwise the hole site is interpreted as your title.
You need to move the contents of your <title></title> tag to the <body></body> tag. If you just remove the <title></title> tag like others have suggested, it will still not show because tags in the <head></head> tag are invisible to the end user. The <head></head> tag contains scripts and links to external resources as well as information about the page for the browser. The <body></body> tag should contain all of your HTML markup for the page.