So I started writing HTML code for a school assignment. I wanted to use HTML5 semantics such as <section>, <article> and so on. But I encountered something peculiar about heading sizes when placed in these tags (see below). I then proceeded to change the semantics back to only HTML that being only <div> and the headings worked fine. I'll post some screen shots to help clarify the situation.
First the Code with <div> tags only
<!DOCTYPE html>
<html>
<head>
<title>
Curriculum Vitae
</title>
</head>
<body>
<div>
<h1>Curriculum Vitae</h1>
</div>
<div>
<h2>Personal Information</h2>
<ul>
<ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
</ul>
</div>
</body>
</html>
The heading sizes appear to work properly within in the div tags
Next is the code using HTML5 semantics
<!DOCTYPE html>
<html>
<header>
<title>
Curriculum Vitae
</title>
</header>
<body>
<article>
<section>
<h1>Curriculum Vitae</h1>
</section>
<section>
<h2>Personal Information</h2>
<ul>
<ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
</ul>
</section>
</article>
</body>
</html>
Note here in this picture I have used the same heading tags for Curriculum Vitae and Personal Information but the heading sizes seemed to have switched?!
Could someone else please verify whether this appears to be a problem only with me or am I using HTML5 semantic tags in a completely wrong manner which is causing the peculiar behavior of the headings?
P.S. Any links for HTML documentation or tutorials would be awesome (currently I'm learning the course online on udacity & w33schools and in school as a subject)
You're mixing up head and header tags. They are very different.
Every HTML page must have a head tag (although browsers usually insert one if it's missing).
The header tag is used as a heading for the content of the page, as a title or something similar. It's optional and will be inside the body tag; potentially before a article, or some other "main content tag".
Something weird is happened to me when i write this code in tag in html:
<div id="header1" style="background-color:white;color:grey;font-size:20px;">
<img id="MainImg" src="StatMarketlogo_final.gif" style="float:left;">
<b>Hello Amit,you last login was on 5/3/2015</b>
</div>
It pop's out from <head> tag and go to <body> tag.
What happened?
I am doing this because i want my background of head will be different from body back-color. So i want they will be in different tags.
The end tag for the head element is optional.
The start tag for the body element is optional.
A div element is not allowed inside the head element. (Div elements include content, the head element isn't supposed to hold any content, only meta data like the <title> and <link>s to stylesheets.).
Putting a div start tag before you have a head end tag will implicitly end the head element and start the body element.
It sounds like your <div> should actually be a <header> that is inside the <body> and before your <main>.
The HEAD tag is not what you think it is. It contains information about the document: http://www.w3schools.com/html/html_head.asp
Try changing your div to a header tag then style that separately to the rest of the document. Both of these should remain inside of the body tag:
<header id="header1" style="background-color:white;color:grey;font-size:20px;">
<img id="MainImg" src="StatMarketlogo_final.gif" style="float:left;">
<b>Hello Amit,you last login was on 5/3/2015</b>
</header>
<div class="some-content" style="background-color:red;">
Some content
</div>
I am quite new to using HTML coding. Basically, when i try to link my pages together via . If you can look at my coding, and please try and help me somehow, that would be great.
<html>
<head>
<title> Information about Birmingham </title>
<link rel="stylesheet" type ="text/css" href="style.css" />
<link rel="style" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container">
<div id="Header">
<h1> Information|Birmingham </h1>
</div>
<div id="Nav">
<h2>
<ul style="list-style-type:none">
<li>Home</li>
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
</h2>
The href tag to point to the html file you'd like to link to. If you home file is index.html it should be Home
The others would be something like this:
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
Just keep in mind that these need to point to html files that are in your root directory.
Your links must include the full file name "i.e home.html rather than home" and you should also make sure that the files of the other pages are in the same directory as the current page for that to work.
Another problem in your code is that you forgot to close the <ul> tag. You must add </ul> just before </h2>.
Also, it is not recommended that you place your list inside a heading tag <h2> in your case. If you are doing this for styling reasons you should better use csss to style your list.
I'm really new to using HTML and CSS and I'm trying to create a rectangular box -
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css" />
<link rel="stylesheet" type="text/css" href="stylesAgg.css" />
</head>
<body>
<h1>Testing the class page</h1>
<ul>
{% for book in books %}
<div id ="bookInfo" style = "display">
<div>
<text class= "text" id = "bookTitle">{{ book.title|safe }}</text></br>
<text class= "text" id= "bookAuthor">by {{ book.author|safe }}</text></br>
</div>
</div>
{% endfor %}
</ul>
</body>
</html>
My css code is here -
#bookInfo {
float:right;
width:700px;
height:300px;
background-color:#dd2424;
padding-left:12px;
padding-top:17px;
}
why doesn't my html page display the coloured rectangle?
Thanks!
EDIT-
I've included all the advice below and it still doesn't work - however, when I view the page through firebug, it says that there are no rules(there's some 404 error, despite the fact that I have the style sheets) - I think this is the problem- how do I fix it?
IDs are supposed to be unique in an HTML page. For formatting multiple elements on a page with similar rules, use the class attribute. Try to change the id attribute on your div to a class. Also change your CSS fro #bookInfo to .bookInfo.
Also, <ul> starts an unordered list. The only tag type that is allowed directly inside of it is a <li> which creates an entry in that list. <div>'s are not allowed here. You could either change the <div> to a <li> or just drop the <ul> altogether, depending on your actual semantic desires.
Another wrong usage are your </br> tags. If a tag starts with </ it is considered a closing tag, as opposed to <br/> which is an empty tag and is probably what you meant here.
As a final advise to style, you should stick to all lower classes and IDs.It makes debugging much easier and looks better.
You have few errors in your code.
the id attribute of an element must be unique across the whole html page. I assume that there will be more books than one. I recommend you to use attibute class="bookInfo" instead of id. The corresponding css selector could be: .bookInfo {} (notice the dot at the start)
value of style attribute here: <div id ="bookInfo" style = "display"> is invalid. If you wanted to set css display property, you should assign some value to it. Otherwise, you should delete the whole attribute.
You are missing <li> elements of the <ul>.
The correct HTML code should look like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css" />
<link rel="stylesheet" type="text/css" href="stylesAgg.css" />
</head>
<body>
<h1>Testing the class page</h1>
<ul>
{% for book in books %}
<li>
<div class ="bookInfo">
<div>
<text class= "text" id = "bookTitle">{{ book.title|safe }}</text></br>
<text class= "text" id= "bookAuthor">by {{ book.author|safe }}</text></br>
</div>
</div>
</li>
{% endfor %}
</ul>
</body>
</html>
and css:
.bookInfo {
float:right;
width:700px;
height:300px;
background-color:#dd2424;
padding-left:12px;
padding-top:17px;
}
Also make sure, that css file is really loaded with the page.
I recommnend usage of Firebug (Firefox extension) or Chrome dev tools... Right click anywhere on page - inspect element. Very helpful.
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>