From this question I started looking:
Firefox screwing up headings sizes h1 h2 h3
Here is a html snippet that will show the issue:
<html>
<head>
</head>
<body>
<section>
<section>
<h1>This is an h1</h1>
<h2>This is an h2</h2>
<h3>This is an h3</h3>
<h4>This is an h4</h4>
</section>
</section>
</body>
</html>
so save that into test.html and open it in firefox 4 and in chrome, the h1 tag shows way smaller in firefox 4.
Can anyone explain me how to fix this ?
It is possible to use <h1> tag multiple times in the same document as part of HTML5. The <h1> tag is specifically used as a title for a section. Apparently, FireFox implements the nested section as an indication to reduce the size of the <h1> for the sub-section, which makes sense, while Chrome does not.
More Info
http://brugbart.com/References/html-section-tag
http://brokensyllabus.blogspot.com/2008/02/proper-use-of-h1-tag.html
What about using CSS to specify the size of all h1 tags? Then, it shouldn't matter whether it is within a section or anything else.
Related
SOLVED: answer is actually in Mio Mio's comment
I'm super new to coding/programming and have no background in any maths/computing/sciences at all. Have hit a small roadblock in my online learning, I'm sure anyone on here would take 5 seconds to see the problem.
So my whole code went fine like this:
<doctype! html>
<html>
<head>
<h1>Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300">
<p>blah blah blah.</p>
<hr>
Then I replaced the h1 heading with
<h1 style="font-size:60px;">Blah</h1>
And it deleted everything before the 1st paragraph and turned all the text from the first paragraph until the hr tag size 60 font (with or without the hr tag, the result is the same).
I have NFC why this has happened because when trying it on the editor as:
<!DOCTYPE html>
<html>
<head>
<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>
<h1 style="font-size:60px;">This is a heading.</h1>
<p>what am I doing right here</p>
</head>
</html>
, it works as intended.
As far as my guesses go, I've closed the h1 tag, so the style attribute shouldn't be applying to anything apart from the h1 heading.
Any help is appreciated, in explaining why this has happened, and how to avoid in future. Thanks in advance!
EDIT: The problem seems to be when I copy and paste this into the w3 editor from notepad. style="font-size:60px;” I've tried typing manually, and then typing manually again into notepad, and copy pasting that, which doesn't lead to the aforementioned error. I don't see any differences so am unsure why it even registers them as different.
EDIT: It was the quote marks, for those curious! See earlier edit for the actual text that caused the problem.
Substituting like you said, it looks fine to me, as in the following link.
https://jsfiddle.net/81qzL4ft/
Maybe the problem is where you are running, try to use the latest google chrome.
<doctype! html>
<html>
<head>
<h1 style="font-size:60px;">Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300">
<p>blah blah blah.</p>
<hr>
I haven't been able to reproduce the effects you describe (might be a difference of browsers - I tried out Firefox and Chrome), but I think a good first step would be to ensure that your HTML is correct:
The document type should be <!DOCTYPE html> and not <doctype! html>
Contents of the <head> element should be stuff such as a page title, CSS and script files to include, and the like. You've put the entire body of your page into <head>, which is incorrect.
Put the content of your page into a <body> element, instead.
All HTML elements should be closed. For example, a <h1> should have a matching </h1>. For empty elements such as <br>, you should either do <br></br> or <br/>.
I've rewritten your problematic example here:
<!DOCTYPE html>
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300" />
<p>blah blah blah.</p>
<hr/>
</body>
</html>
Browsers try to figure out "what you meant" if HTML code isn't 100% correct, but sticking to the standards gets you a long way in making sure a page renders correctly and in the same way across browsers.
If you're unsure of what may be causing issues in your code, you can also try running it through the W3C's HTML validator: https://validator.w3.org/ . It's quite strict (and might be hard to understand for a beginner), but does a good job of highlighting concrete issues with your code.
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".
This is a webpage example of my site:
<html>
<title> artilce header </title>
<body>
<header> <h1> nme of website</h1></header>
<section>
<h2> name of section</h2>
<article>
<h3>article header</h3>
</article>
</section>
</body>
</html>
I want to know if this order is correct? Or does it maybe have a bad effect on SEO?
header is in all pages, section must have an header because of header/…
For example, do I I have to change it to something like this:
<html>
<title> artilce header </title>
<body>
<header> <h2> nme of website</h2></header>
<section>
<h3> name of section</h3>
<article>
<h1>article header</h1>
</article>
</section>
</body>
</html>
Both variants are valid HTML5.
The HTML5 spec says about headings and sections:
Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level.
So your first example is recommended by HTML5.
HTML5 does not define that h1 would be more "important" than h6.
How consumers (like search engines) interpret this is up to them and it most likely differs from consumer to consumer, so you’d have to check their documentation.
Use your Second Concept it looks simple and good as per SEO.
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>
In this tutorial: http://railstutorial.org/chapters/filling-in-the-layout#top
There is "header"
I know that in HTML there is "head"
But, what is <header> ?
Thanks.
<header> is one of several new tags in HTML5 that are supposed to replace <div> for some specific situations. In particular, the "header" part of your page - whatever that is, usually the part that would be wrapped in <div class="header"> - in HTML5 you should use <header> instead.
Chapter 3 of Dive into HTML5 by Mark Pilgrim does an excellent job going into the details of when and why to use the new <header> element.
<header> is a semantic tag added in HTML5. It's the HTML5 equivalent of using <div class="header"> for a header element in your page.
<head> Defines the information about the article such as including meta data,title,links & scripts. It doesn't have a visual appearance.
<header> defines a header for a document or a section. It is added in HTML5. It has a visual appearance, it will be useful to show in the header a logo, menu, and other heading details. It needs to be defined inside the body.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ganesamoorthi M</title>
<meta name="author" content="Ganesamoorthi M">
<meta name="description" content="Head vs Header">
<meta name="keywords" content="HTML,CSS,Head,Header">
</head>
<body>
<header>
<h1>Ganesamoorthi M - Software Developer</h1>
</header>
<section>
<p>Head vs Header</p>
</section>
<footer>
<p>© 2018 Ganesamoorthi M</p>
</footer>
</body>
</html>
<header> is from HTML5 and it meant to be contain the top/navigational part of your webpage in <body>. Like top logo, menu, slogan and other heading stuff.
The "header" element does not exist in the current html specification so it is ignored (but may be styled using css of course). It is part of the current draft for the upcoming HTML version 5.
It is not related to the "head" element which contains information page the page but no structure.