Why is the element <title> not considered in the document outline? Surely this should be the root title? I’ve gotten into the habit of having a <h1> at the start of my page to include the page title in the document hierarchy, but surely this shouldn’t be necessary given we have <title>?
<title> defines the title of the page as displayed in the browser window itself, not in the content of the page. It should be between the <head> tags.
The <title> tag belongs in the <header> and describes the entire page. The <h1> tag describes a content block. You can have multiple <h1> tags on the page, but only one <title> tag should be present.
More on this can be found in the W3 HTML Specification: http://www.w3.org/TR/html401/
To further add: the document outline describes rendered content, that is everything that goes in to the <body> tag. It is not required to use these additional tags, the title tag can be sufficient. However if the HTML page contains multiple articles/sections/documents then without these tags it will be hard for say a search engine to make sense out of the content.
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 there any drawback to never using
<html> and <body>
on your web pages that are written in HTML and PHP?
I mean, everything works perfectly fine with it or without it, so why use it?
They are explicitly optional in the spec (so the document will still be valid).
This has been true since the original spec (which says <!ELEMENT HTML O O (( HEAD | BODY | %oldstyle)*, PLAINTEXT?)>, O O meaning Start Tag Optional, End Tag Optional) through to the current spec (which says "An html element's start tag can be omitted if the first thing inside the html element is not a comment. An html element's end tag can be omitted if the html element is not immediately followed by a comment.").
They are only mandatory in XHTML since XML has no concept of optional tags.
I've never seen any browser or user-agent fail to handle them correctly in an HTML document. (Note that while the tags are optional, the elements are not, so browsers will insert an HTML, HEAD and BODY elements even if the tags are missing, so any script which tries to find them in the DOM will still work).
The only technical drawback is that you can't put attributes on tags which aren't there, and a lang attribute for the HTML element is useful.
Leaving them out can confuse other people who have to maintain your code who don't know that the tags are optional though.
Both <head> and <body> tags are optional in HTML5. In fact it is recommended by Google's HTML style guide to not use them:
<!-- Not recommended -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
By not using those tags, some drawbacks include:
that it is drastically different from what is typically learned for developers, so it may cause some confusion.
a restriction that a comment cannot be immediately after the <html> tag that is omitted.
Reiterating the optional nature of the tags from the spec:
An html element's start tag may be omitted if the first thing inside the html element is not 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 meta, link, script, style, or template element.
See:
https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Optional_Tags
https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission
If you do not use <html> and <body> than your HTML document will be not valid, some libraries/plugins may not work too.
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.
If I want to redirect to another page in my HTML file, do in have to place the meta tag in the head or can I place it at the top of the file before the DOCTYPE? Thank you.
You can't place a meta tag above the DOCTYPE. The DOCTYPE must always be the first element in an HTML document, and meta tags must only be placed in the head.
Documents must consist of the following parts, in the given order:
Optionally, a single "BOM" (U+FEFF) character.
Any number of comments and space characters.
A DOCTYPE.
Any number of comments and space characters.
The root element, in the form of an html element.
Any number of comments and space characters.
Source: http://www.w3.org/TR/html5/syntax.html#writing
For purposes of this question, the spec says that a document must start with a DOCTYPE and be followed by a root html element. While a meta tag might still work, there is no guarantee of it doing so today and continuing to do so in the future.
The meta tag has to be inside the <head></head> section. You can not add anything before <!DOCTYPE html>
Here is detailed description of DOCTYPE
W3C deprecates the use it, but they do offer an example on W3C:
<HEAD>
<TITLE>Don't use this!</TITLE>
<META http-equiv="refresh" content="5;http://www.example.com/newpage">
</HEAD>
<BODY>
<P>If your browser supports Refresh, you'll be transported to our
new site
in 5 seconds, otherwise, select the link manually.
</BODY>
GIYF: H76: Using meta refresh to create an instant client-side redirect
You should insert the following line in the head section of your HTML page, replacing http:example.com/ with the actual web page to which you want to redirect your viewers:
< meta http-equiv="refresh" content="2;url=http://example.com/" />
Here is an example with the correct line inserted in a typical HTML page. Note that it comes above the title tag.
<html>
<head>
<meta http-equiv="refresh" content="2;url=http://example.com" />
<title>Page Moved</title>
</head>
<body>
This page has moved. Click here to go to the new page.
</body>
</html>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
<header> vs. <head>
Do I have to use <div class="header"> as <header> in HTML5? Somebody explained one question like that <header> vs. <head>. I am a bit confused.
Thanks for any help. I appreciate it.
As the linked question explains:
<head>
<title>Your page | Your company</title>
<meta name="keywords" value="blah blah"/>
<link rel="stylesheet" href="css/style.css">
<script></script>
</head>
is still the same in HTML5, for storing meta information and linked scripts etc.
Header is a new element for grouping the header of a page or section symantically.
Including James Simm's info:
Technically, the element in HTML5 represents a group of
introductory, or navigation aids. It isn't just for a given page or
document. can be used within sectioning elements such as
or too. See WHATWG for more info
<header>
<h1>Your page heading</h1>
<nav>
<ul><li>Global Nav Item 1</li></ul>
</nav>
</header>
You do not need to use any of the new tags in HTML5. You can use them if you want though.
<header> is a semantic tag to mark the header section of your site while <head> is the are where things like meta tags go.
<head></head>
is where your meta information, scripts, stylesheets etc.. goes.
And header is a bit like <div class="header">.
The <head> tag is used outside the body element
Here you load your scripts and style sheets, put your meta data and your page title.
The HTML5 <header> tag is used to display a header on your page. Containing your logo or your menu. Depending on the site.
These are 2 different tags with 2 different meanings
<header>, <article>, <section>, <aside>, <mark>, <footer> etc are tags added in HTML5 to make your code more meaning full then <div>.
<div> is basically for division it's not make clear what content you do have inside your DIV.
<header> as it's name anyone can understand that it's contain content related to heading
same for article, section, aside, mark they all are tags contain content have to display to user.
<head> tag do not contain any information have to display on screen to user. It's for your meta tags, to add style sheets, title, keywords etc.
For more information in detail you can check http://html5doctor.com/ It's a excellent website to understand HTML5 in detail