<Header> VS. <Head>

What is the real difference between the head and header tag?

A quick Google search reveals the following:

Head tag:
The HTML <head> element provides general information (metadata) about the document, including its title and links to/definitions of scripts and style sheets. (HTML MDN)

Header tag:
The HTML <header> element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on. (HTML MDN)

-

In other words; the head tag is used for document title, styling, scripts, etc.

Whereas the header tag is used for headers as seen in articles.

Newspaper 'header'.
Newspaper 'header'

EDIT: Updated reference, as psuedocoder mentioned, W3Schools is not always fully reliable.

Can header replace head in HTML?

Generally the browsers are way too tolerant to invalid html. For example, regardless of whether you have duplicate id's or you have a <tr> inside a <ul>, It will still render your html, But it's better to not take advantage of it, because this can cause unexpected results in later point of time, for example when you're writing css or scripts.

The <header> element is one of the semantic tags introduced as part of html5.

From MDN -

<header>

The HTML <header> Element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

<head>

The HTML Head Element (<head>) provides general information (metadata) about the document, including its title and links to or definitions of scripts and style sheets

Information about your website such as title should semantically go in the <head> tag.

So adding the information about your site in a <header> tag is "Semantically" incorrect.
If you don't want your html code to be semantically correct, then there's no purpose for you using semantic tags at all (my opinion)

Relationship between the header and h1 tags in HTML5

I would explain this by an example.
A lion living in a jungle marks its territory and no other male is allowed to rule there. In the same way, tag is a territory where the header information is put and tag is used to highlight the lion i.e the important statement, title , etc.

What's the difference between HTML head and body tags?

Generally javascript code will function in the head before code in the body. The head section is usually used to contain information about the page that you dont neccessarily see like the meta keywords meta description or title of a page. You would also link to any external files like .css .js files in the head section as they need to load before the page is displayed.

Anything in the body section is what you would expect to be see on screen.

HTTP HEAD for custom header vs partial object fetching

Recently found out about an HTTP concept called conditional requests. It is similar in idea to the first approach I had in mind, only that it's even better. The headers are standard ones and the error handling is taken care of.

Page template layout. HTML /head header.php vs page.php

One easy solution is to have inside "header.php" a line to echo the content of $extraHeaders:

<!DOCTYPE html>
<html>
<head>
<?php echo $extraHeaders ?>
...

Then, any page you want to add specific headers to (stylesheet, javascript file, etc.), you just include it in the $extraHeaders variable:

$extraHeaders = '<script type="text/javascript" src="myscripts.js"></script>'

And it will be automatically be included in the headers for that page.


To solve the problem of syntax highlighting and avoiding to have to escape the quotation marks, you can use the output buffer syntax:

ob_start();
?>
<your html goes here> Alternatively, you can include an html file here.
<?php
$extraHeaders = ob_get_contents();
ob_end_clean();
...

This will allow you to use a variable, as previously suggested, but with syntax highlighting, and there is no need to escape anything.



Related Topics



Leave a reply



Submit