<Head> appears inside the <body> - html

The following html intepreted wrongly.
Using debug tool of chrome, the <head> appears inside the <body>.
Why is that happening ?
Code:
<!DOCTYPE html>
<html>
<hed>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</hed>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Result:
https://zoharch.github.io/position/index.html

Because you have a error in the head tag
<hed> should be <head>
</hed> should be </head>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</head>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>

Your spelling is not correct for head. you wrote hed.
it will be:
<head></head>

It happens because the <hed> tag (misspelling of <head>) is not recognized, so the browser treats it as starting a hed element of unknown type. Since no such element is allowed in a head element, the browser implies the start of a body element, containing all the rest in the document. Before this, it implies an empty head element.
In most situations, this does not really matter, since the division of an HTML document to head and body elements is syntactical and “philosophical”. The meta, link, and title element work normally in practice, even though the browser treats them as being inside body. But of course you should correct the misspellings of the <head> and </head> tags.

it should be like this just copy paste this head and it will be OK :)
<head>
<meta charset="utf-8">
<link href="_css/style.css" rel="stylesheet">
<title>Position test</title>
</head>

Related

I am not able to align the heading of my Web Page using some code editors but it works for other code editors, is something wrong in my code?

This is sample code(HTML):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="The_secondweb.css">
<meta charset="utf-8">
<title><!-- There will be a title --></title>
</head>
<body>
<h1 class="title">Welcome to this website</h1>
</body>
</html>
This is what I did in CSS:
#title{
text-align: center;
}
Problem:
When I don't use the id attribute the text don't gets aligned to the center, but when I don't use the id attribute the code does what it should. Am I doing something wrong while using the id attribute or we cannot align the text to center using any attribute we should name the tag in CSS?
When you are using class you have to use "." whereas "#" is used in case of id.
You can also do it with inline styling in html as below:
<html>
<head>
<link rel="stylesheet" href="The_secondweb.css">
<meta charset="utf-8">
<title><!-- There will be a title --></title>
</head>
<body>
<h1 style="text-align: center;">Welcome to this website</h1>
</body>
</html>
using # in CSS is id selector
.title{
text-align: center;
}
when your use classes

Setting black for one line - There are more web links on the line

I'm trying to set black for one line. There are more web links on the line. But the link is still blue. Thanks for the help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2 style="color:black;">YouTube Google</h2>
</body>
</html>
Because there is a default style from <a> tag, which it hides the set style from <h2>. There are 2 ways (not only 2) to resolve the problem.
Way 1: by adding a <style> tag and put your styles inside it.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
<style>
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<h2>YouTube Google</h2>
</body>
</html>
Way 2 (not recommended because it looks not really tidy): add styles to each <a> tag.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2>
YouTube
Google
</h2>
</body>
</html>
Hope helped.

How does <center> tag still works in HTML5 script when it is being removed?

In HTML5 introduction it is being mentioned that tag is being removed. In order to test it, I tried the below script:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<center>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</center>
</body>
</html>
How can we test it.
The <center> tag is deprecated and should be removed going forward. However some browsers have chosen to support it in their current versions most likely to allow older sites to still present correctly.
It being removed means that you shouldn't rely on it always working.
There is no problem in testing. Try the following code in all browsers.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<center> <h1>This is a Heading</h1> <p>This is a paragraph.</p>
</center>
</body>
</html>
Without the "center" tag you can use css to align the text. Try following code:
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body >
<h1 style="text-align: center;">This is a Heading</h1> <p style="text-align: center;">This is a paragraph.</p>
</body>
</html>

HTML and corresponding DOM Tree

I have to create a DOM Tree for class and just wanted to know if I did it correctly before I turn it in. If anyone could confirm for me that it is correct or point out what I did wrong I would appreciate it. Here is the code:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Lab 2</title>
<link href="lab2.css" type="text/css" rel="stylesheet">
<script src="lab2.js"></script>
</head>
<body>
<h1>Images</h1>
<div id="content">
<img id="display" src="images/blank.gif" alt="Blank Image"><br />
<button onclick="change()" id="changeImage">Display Image</button>
<h2 id="description">The image is blank</h2>
</div>
</body>
</html>
The img and the h2 are children of the div, not siblings.
Also, what happened to the button and the br?

How to make new page in html?

I am a noob at HTML.
I have a folder on my desktop with page1.html and page2.html.
This is an example of page1
<html>
<h1> Welcome
<title>Website
</h1>
<body>
<p> to page 2
</body>
Link
</html>
Whenever I open page1.html, It just says "Welcome", and "to page 2". There is no hyperlink. What am I doing wrong?
You are missing a </p> tag and the <a> tag should be inside the <body> tag.
<h1> tag is malformed as well. Remember, this is just like parentheses in math. If you open one then you need to close one.
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>
Link to page 2
</p>
</body>
</html>
The A tag should be inside the body tags. You probably also want to close the p tag.
Try something like:
<html>
<head><title>Website</title></head>
<body>
<h1>Welcome</h1>
<p>to page 2 Link</p>
</body>
</html>
Try this. (remember to close your tags!)
<html>
<h1> Welcome
<title>Website </title>
</h1>
<body>
<p> to page 2 </p>
Link
</body>
</html>
You should close <title> with </title>. Fixing that will make the rest of the content show (demo).
As others are saying, you should also close your <p> tags, and move the <a> inside the <body>. Also, <title>Welcome</title> should be outside <h1>, and <h1> should be inside <body>.
It simpler to see with an example. The valid HTML would be:
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>to page 2</p>
Link
</body>
</html>
See the result here.
Your <title> tag should go in your document's head and your content should all be inside the body. You also need to close all your tags.
Try this:
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p> To page 2: Link</p>
</body>
</html>
The title and everything the browser needs to understand the page is better suited to go in between the <head> </head> tags.
The content that has to be displayed in the browser viewport windows has to be in between the <body> </body> tags. As others have mentioned, most of the HTML tags require to be closed.
Also, the <!DOCTYPE> declaration must be the very first thing in your HTML document before the <html> tag.
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
</head>
<body>
<h1> Welcome </h1>
<p> to page 2 </p>
Link
</body>
</html>
For a quick tutorial or help you can always refer the following website seen below. It's easy and fun. Best of luck!
http://www.w3schools.com/html/default.asp