'We have a title “The best page ever” nested in the head element, and then it shows another one in a header element nested in the body element. Why is that?
<!DOCTYPE html>
<html>
<head>
<title> The best page ever</title>
</head>
<body>
<h1>The best page ever</h1>
</body>
</html>
title what is in that tag nested in head, is what is displayed in the tab info in your browser. h1 which is nested in the body will display on the web page.
Hey, I love to write articles so here is my unnecessarily long and probably boring take about this question:
HTML is a markup language, we use it to define meaning and general structure for a website.
Inside the <html> tag which tells the browser “hey I am an html document and between <html> and </html> is my documents body”. Oh by the way, the thing above " <!DOCTYPE html> " indicates I am not any HTML like HTML4 but HTML5 so please treat me as such.
All is fine and dandy, finally a browser is able to identify our HTML5 document but there is too much information in a document and further more… information about information(yeah… I know how you feel, take 1 minute to let that sink in) we call that information metadata and as you’ll probably realize in the future(more like 1/2 paragraph into the future) it is a must have.
So roughly speaking HTML’s take about how to organize this information and metadata is to divide it as follows:
<head>
Here you should put the information and metadata for things like browsers, search engines, external documents like CSS style sheets and javascript scripts. A lot of code can go into this secton but it follows the patterns I just described. Mr.Google and its spider bots (Maybe a future article 
) will come into your website and a good <head> is one of the things that will let it know it is a top notch high quality ultimate source of <insert idea> and should be placed in the top results of a related search.
<body>
I’ve written quite a lot and I could go on and on about what goes into this section but I don’t want to over do it. I will just say that here you’ll put all those juicy paragraphs, headings, forms and everything that the user will see in the main screen of its browser, the actual content.
SOOOOO the TL;DR and answer to your question is the <title> tag will only modify the title of your broswer’s tab but there can be a lot of more information inside your head element as the example code I give you below so <title> is its own tag. <h1> is the title for the body of your document and there should be only 1.
General Structure of an HTML Document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="You wouldn't believe it even if I told you">
<meta name="keywords" content="HTML,CSS,JavaScript ">
<meta name="author" content="coolCat">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> The best page ever</title>
</head>
<body>
<h1>The best page ever</h1>
</body>
</html>
sorry to ask a stupid question, but what is the tab info of my browser? is that that weird window that comes up by accident that has all the coding in it?
Wow your response was exceptionally helpful! I have some questions to further understand it.
1.So I understand we are telling the browser we’re an HTML5 document with
<!DOCTYPE html> and for some reason it’s version description is just html. How would I hypothetically tell the browser that its an HTML4 (or lower) document?
2. This “metadata” is information about information? Can you put your CSS style blocks in <head> or would that still go within the <body> ?
3. Is this metadata basically a hashtag for finding your page on the internet? You mentioned it being visible in not only my browser tab but also in a google search
Thank you again
oh wow so the literal tab’s name as we see it in the browser. Thanks for the screen shot!
1.It’s something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
2.When you put your CSS in the same file as your HTML you put it in the <body>. CSS is for style and in fact you would put your CSS between <style> </style> tags.
Generally speaking you want separate files for HTML, CSS and javascript. That way you can use the same style across multiple html files for a multipage website without repeating yourserf, this is a principle you’ll hear a lot about(DRY) Don’t Repeat Yourself or just copy CSS/javascipt files to your next project or projects and you won’t have to rewrite everything from scratch or copy and paste multiple parts of a file. This also keeps your files to a reasonable size and there is a clear structure to your projects.
Because it’s not the actual code but a reference to an external file you can link your HTML to external files like CSS with…wait for it… a link tag <link>, this tag is placed in the <head>. Again this is the prefered way to structure your projects.
3.Yes, it’s a sort of hashtag that would give context to software(including search engines) about what your website is all about but it also has some additional information and I encourage you to investigate about it when you feel prepared.
Please tell me the curriculum covers your response to number 2. I definitely want to apply this but I have to see it visually. For now, I will put CSS in the <body>as you’ve said. Is there a situation where I actually would put CSS in the <head>?
Don’t worry. freeCodeCamp will teach you a buch of topics and you’ll learn even more as you try to code your own and freeCodeCamp’s projects.
sorry I realize you answered this. The CSS goes in the <head> in some sort of a <link> element if the CSS is in its own file somewhere else
