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>
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
So I've got down my basic html framework down and some basic CSS to make it look centered and adjust the background color, but I've tried a couple different adjustments and none seem to work properly when linking my CSS.
I've attempted to adjust the path to my CSS, tried to change the encoding between utf-8 and a few other random Windows 'save as' ones, and tried adjusting spacing:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html>
<body>
<link rel=stylesheet type=text/css href=/Computer/C:/Users/JohnDoe/Downloads/Test.css>
</body>
</html>
And in the .css file:
body {
text-align: center;
background: powderblue;
}
Whenever I run my program it just comes out looking like a normal black and white page that is off centered.
So it would probably be good to read up on building a website. But in the meantime, here are some things you need to fix:
link elements go in the <head>
link href should be an absolute server link (starting with https://...) or a relative path
quote attribute values
remove stray css at the end of the doc and put in css file
Relative path means it's the path relative to the file being served (for example, "index.html"). So if your index.html file is in /Computer/C:/Users/JohnDoe and your css file is in /Computer/C:/Users/JohnDoe/css/ then the relative file path is css/Test.css
Example
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Test.css">
</head>
<body>
<p>This text appears in the browser</p>
</body>
</html>
You got a few things going on here:
First, for externally linked style sheets, the link goes in the <head>...</head> tags, rather than the <body> tags.
Here's a quick reference:
https://www.dummies.com/web-design-development/html5-and-css3/how-to-use-an-external-style-sheet-for-html5-and-css3-programming/
Note the quote:
The <link> tag only occurs in the header. Unlike the <a> tag, the <link> tag can occur only in the header.
you're asking to link to an external style sheet, but also including some inline CSS (the body stuff you have a t the bottom. Also note that when including inline CSS you need to wrap it in <style> tags.
Lastly, that href path looks odd to me ...
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>
When creating an html document my code works either way, but how do others like to organize their html hierarchy? for example I like to put my site's banner and the navigation bar in <head>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src='script.js'></script>
<title> User's Profile'</title>
<div id="header">
<img src="http://svc004.bookeasy.com/images/MARGS/flourish-website-banner3.jpg" />
</div>
<div id="toolbar">
<span>Username</span>
<p>Profile</p>
<p>Medals</p>
<p>Account Settings</p>
<p>logout</p>
</div>
</head>
<body>
<div id="left_nav">
<p>Home</p>
<p>Scout</p>
<p>Attack</p>
<p>Fourms</p>
<p>Contact</p>
</div>
</body>
</html>
You shouldn't put anything in your head that you want to display as en element, because it's not the correct element for it.
It may work but you never know when it may not (or have subtle bugs). It will also confuse anyone who has to maintain this markup after you.
The spec says that the <head> element has to contain:
One or more elements of metadata content, of which exactly one is a title element.
Further down:
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
You can only put these tags in there:
<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>
The way you're doing it isn't good. Put the header in a <header> element in the <body>.
I'm currently using the above tags in this way (classic tag order):
<html>
<head>...</head>
<body>
<header>...</header>
<section>...</section>
<footer>...</footer>
</body>
</html>
Tag usage and specifications were very rigid in previous versions of HTML (4.x), while HTML5 doesn't really need <head> and even <body> tags.
So I would use the following structure, which IMHO is much more semantic than the previous one.
<html>
<header>...</header> <!-- put header and footer outside the body tag -->
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</html>
What do you think?
Well, the <head> tag has nothing to do with the <header> tag. In the head comes all the metadata and stuff, while the header is just a layout component.
And layout comes into body. So I disagree with you.
Let's get a canonical answer here. I will reference the HTML5 spec.
First of all, 12.1.2.4 Optional tags:
A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.
Then, the 4.1.1 The html element:
Content model: A head element followed by a body element.
Having the cited restrictions and strictly defined element order, we can easily work out what are the rules for placing implicit <body> tag.
Since <head/> must come first, and it can contain elements only (and not direct text), all elements suitable for <head/> will become the part of implicit <head/>, up to the first stray text or <body/>-specific element. At that moment, all remaining elements and text nodes will be placed in <body/>.
Now let's consider your second snippet:
<html>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</html>
Here, the <header/> element is not suitable for <head/> (it's flow content), the <body> tag will be placed immediately before it. In other words, the document will be understood by browser as following:
<html>
<head/>
<body>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</body>
</html>
And that's certainly not what you were expecting. And as a note, it is invalid as well; see 4.4.1 The body element:
Contexts in which this element can be used: As the second element in an html element.
[...]
In conforming documents, there is only one body element.
Thus, the <header/> or <footer/> will be correctly used in this context. Well, they will be practically equivalent to the first snippet. But this will cause an additional <body/> element in middle of a <body/> which is invalid.
As a side note, you're probably confusing <body/> here with the main part of the content which has no specific element. You could look up that page for other solutions on getting what you want.
Quoting 4.4.1 The body element once again:
The body element represents the main content of the document.
which means all the content. And both header and footer are part of this content.
I see what you are trying to do, you are trying to use the <body> tag as the container for the main content of the page. Instead, use the <main> tag, as specified in the HTML5 spec. I use this layout:
<!DOCTYPE html>
<html>
<head> *Metadata* </head>
<body>
<header>
*<h1> and other important stuff </h1>*
<nav> *Usually a formatted <Ul>* </nav>
</header>
<main> *All my content* </main>
<footer> *Copyright, links, social media etc* </footer>
</body>
</html>
I'm not 100% sure but I think that anything outside the <body> tag is considered metadata and will not be rendered by the browser. I don't think that the DOM can access it either.
To conclude, use the <main> tag for your content and keep formatting your HTML the correct way as you have in your first code snippet. You used the <section> tag but I think that comes with some weird formatting issues when you try to apply CSS.
If you really want it to look more semantic like having the <body> in the middle you can use the <main> element. With all the recent advances the <body>element is not as semantic as it once was but you just have to think of it as a wrapper in which the view port sees.
<html>
<head>
</head>
<body>
<header>
</header>
<main>
<section></section>
<article></article>
</main>
<footer>
</footer>
<body>
</html>
According to the HTML standard, the content model of the HTML element is:
A head element followed by a body
element.
You can either define the BODY element in the source code:
<html>
<body>
... web-page ...
</body>
</html>
or you can omit the BODY element:
<html>
... web-page ...
</html>
However, it is invalid to place the BODY element inside the web-page content (in-between other elements or text content), like so:
<html>
... content ...
<body>
... content ...
</body>
... content ...
</html>
I agree with some of the others' answers. The <head> and <header> tags have two unique and very unrelated functions. The <header> tag, if I'm not mistaken, was introduced in HTML5 and was created for increased accessibility, namely for screen readers. It's generally used to indicate the heading of your document and, in order to work appropriately and effectively, should be placed inside the <body> tag. The <head> tag, since it's origin, is used for SEO in that it constructs all of the necessary meta data and such. A valid HTML structure for your page with both tags included would be like something like this:
<!DOCTYPE html/>
<html lang="es">
<head>
<!--crazy meta stuff here-->
</head>
<body>
<header>
<!--Optional nav tag-->
<nav>
</nav>
</header>
<!--Body content-->
</body>
</html>
This is the general structure of an html document.
<html>
<head>
Title, meta-data, scripts, etc go here... Don't confuse with header
</head>
<body>
You body stuff comes here...
<footer>
Your footer stuff goes here...
</footer>
</body>
</html>
Even though the <head> and <body> tags aren't required, the elements are still there - it's just that the browser can work out where the tags would have been from the rest of the document.
The other elements you're using still have to be inside the <body>