These two simplified HTML5 codes gets the same result:
code #1:
<html>
<head>
<title>test</title>
</head>
<body>
<p>test1</p>
</body>
</html>
--
code #2:
<html>
<head>
<title>test</title>
</head>
<body>
test1
</body>
</html>
====
The output is the same in both cases, the screen prints the word "test1", so what the use of the tag <p> ? how does the browser understand the two codes? please note that the file code is .html extension
The <p> tag stands for paragraph, which is used for text, and you can read more about it at MDN: https://developer.mozilla.org/en/docs/Web/HTML/Element/p
If you take a a good look you'll see the output is not the same, the p is slightly far down the page because it has a default margin set, which for example a div does not.
The browser parse through the code/markup and render the content in each tag accordingly to that particular tags default layout settings.
Related
This one got me really stumped. I have stripped a problematic website of basically everything, being left with the most trivial barebone site you can imagine:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test site</title>
</head>
<body>
<img src="http://placekitten.com/200/300" />
</body>
</html>
...and yet, the img tag doesn't work. I get an empty website - and the W3 validator throws errors like Element img not allowed as child of element body in this context. (Suppressing further errors from this subtree.). What am I doing wrong? I have no idea what can be causing issues in a markup that consists of basically no elements other than the img and the ones required.
<!DOCTYPE html>
<html>
<body>
<img src="http://placekitten.com/200/300" alt="W3Schools.com"
style="width:104px;height:142px;">
</body>
</html>
As mentioned in the comment, there were 2 invisible characters after img and src.
I used text-compare to figure out this, please refer the attached screenshot.
Can anyone tell me why special here?
<html>
<head>
<script src="editor.js"></script>
</head>
<body>
<div id="scripts" class="scripts">
Editor.Execute('<html>Html String</html>');
Editor.Execute('<something>Html String</something>');
</div>
</body>
</html>
document.getElementById("scripts").innerHTML shows something however html dissapears.
Execute('Html String');
Execute('<something>Html String</something>');
It behaves the same way in Firefox and Chrome.
You're running into this issue.
Basically, the browser sanitizes out the HTML tags before your JavaScript can even access the page – you can check in the Chrome elements inspector, your <html> tag is not there.
I guess the answer depends on what exactly you're trying to do, but if you're just trying to output that code onto a web page, you can just escape the characters:
<html>
<body>
<div id="scripts" class="scripts">
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
</div>
</body>
</html>
Then document.getElementById('scripts').innerHTML will output:
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
And then you can replace the HTML entities in JavaScript.
Without knowing what you do in that Execute() it is hard to say what is going on there.
Just in case: HTML document can have one and only one <html> node.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
</body>
</html>
When I run this code, I see 'My Page' in my Browser's Title Bar and in Body too!
Why am I getting this?
Because <head> and <title> are just tags, like anything else. And the * selector picks them up too.
For kicks, take a look at this fiddle, which clearly demonstrates when you give head and title a display:block style, they indeed show up as text on the page:
HTML
<body>
<p>hi</p>
</body>
CSS
head, title {display:block}
Output
- jsFiddle demo
hi
For a bit more fun, we can color things too. And we even learn something about the inner workings of JSFiddle in the process. It looks like they inline your style in a <style> tag inside the <head>. Ha!
No. It doesn't and wouldn't output such a result. Have you tried refreshing/clearing the cache of your browser?
I have always wondered but can't really find an answer anywhere if there are any set standards regarding indenting the body or head tag.
Is this version correct?
<html>
<head>
</head>
<body>
</body>
</html>
Or this one?
<html>
<head>
</head>
<body>
</body>
</html>
Whilst I appreciate that it probably doesn't make the slightest bit of difference as far as the functionality of the final website goes, we are all human beings, and all blessed with the gift / burden that is curiosity.
Are there any set standards or does it not matter?
HTML does not care about indentation, it only requires proper nesting. It is parsed the same (except for whitespace text nodes of course), it does really not matter for correctness.
While proper indentation does matter for readability, many people choose not to indent <html>, <head> and <body> tags as their structure is trivial, and only shifts the whole document rightwards unnecessarily. The contents of those tags should always be indented for clean markup, so that the nesting structure is clear to the reader.
To answer your question explicitly:
Should <head> and <body> tags be on a different level of indentation to <html>?
There is no need for that, as everybody knows they are nested in <html>. You can do it if you want. Both
<html>
<head>
<title>…</title>
…
<head>
<body>
<div>
<div>…</div>
…
</div>
…
</body>
<html>
and
<html>
<head>
<title>…</title>
…
<head>
<body>
<div>
<div>…</div>
…
</div>
…
</body>
<html>
are fine, while the following is not:
<html>
<head>
<title>…</title>
…
<head>
<body>
<div>
<div>…</div> <!-- which nesting level ??? -->
…
</div>
…
</body>
<html>
It does not matter in functionality, but for the purpose of clean, readable and manageable code you should always indent child tags.
I teach an introductory course in web design and have quite a challenge to explain to students why indentation is important especially for someone new to HTML. I often show them the DOM diagram from the W3schools website as an example of the tree structure which is an HTML page. In my honest opinion, although knowing full well that it does not make a difference in the slightest, indenting both the <head></head> and <body></body> helps to show the HTML tree structure better. As someone above said, indentation makes for clear readable code but not just, <head> and <body> are both children of <html> and thus should be indented to show this fact.
Instead of this:
<html>
<head>
</head>
<body>
<h1>That's 2 levels of indenting and we haven't even started yet.</h1>
</body>
</html>
Or this (nobody knows why people started doing this):
<html>
<head>
</head>
<body>
</body>
</html>
I'd like to propose another style. A three-line general structure:
<html><head>
</head><body>
</body></html>
Insert some HTML:
<html><head>
<style>
</style>
</head><body>
<div>
</div>
</body></html>
In this case, we get rid of an indentation level in a natural way (because a double indentation wouldn't make sense). It's the head and body elements that cause indentation of its content.
I am using Sublime Text 2 to write my testing html file. I save the text as HTML format.
Then when I try to open the file with browser by either drag&drop or Open_With...
Then.....
The browser open my plain text file, not the actual html.
This is what it look like. Just white background and these text.
<!DOCTYPE html>
<head>
<title>A Hello World Page</title>
</head>
<body>
<p>Hello World</p>
</body>
This is my first time with html ever, do I have to do special setup with anything? I just use default SublimeText2.
That may be because you are missing the main tag <html>.
Do this:
<!DOCTYPE html>
<html>
<head>
<title>A Hello World Page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
<html> is the main tag, browser will look for to tell whether it is html or not.
Also make sure it is saved as .html or .htm
Open up Sublime Text, press CTRL SHIFT + P.
Type in HTML into the box and select Set syntax: HTML.
Then, in the file, type in html then press tab straight after and it should create a snippet (which is default):
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Then make sure you save the document as .html or .htm.
This should work in your browser after.
Note: Setting syntax and doing snippet wont actually 'help' in terms of this question, but will help you in HTML by making things quicker and having syntax highlighting.