Is this layout for an HTML page <head> section ok

HTML & CSS
1

Hi
I am trying to construct a ‘re-useable’ head section that can mostly be used cross site and on different pages. The idea is to split the head section into different sections that can be called by a php include().

First I would use a php include to add the common global settings:-

<head>
<!-- Global meta tags -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<!-- Favicon for shortcut and browser tab -->
	<link rel="shortcut icon" type="image/png" href="img/web-design.png"/>
	<!-- Global CSS links -->
	<link rel="stylesheet" href="css/bootstrap.min.css">

Then I would manually type in the page

<!-- Page specific meta tags entered directly into html page -->
	<meta name="description" content="My Description">
	<meta name="author" content="My Author">
	<meta name="keywords" content="My Keywords">
	<title>My Title</title>
	<!-- Custom page specific css entered directly into page html -->
	<link rel="stylesheet" href="css/fullscreen.css">
	<link rel="stylesheet" href="css/button.css">
</head>

Then when loaded the page code would look as follows:-

<head>
	<!-- Global meta tags -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<!-- Favicon for shortcut and browser tab -->
	<link rel="shortcut icon" type="image/png" href="img/web-design.png"/>
	<!-- Global CSS links -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- Custom site CSS links -->
	<link rel="stylesheet" href="css/custom.css">
	<link href='https://fonts.googleapis.com/css?family=Kalam' rel='stylesheet'>
	<!-- Page specific meta tags entered directly into html page -->
	<meta name="description" content="My Description">
	<meta name="author" content="My Author">
	<meta name="keywords" content="My Keywords">
	<title>My Title</title>
	<!-- Custom page specific css entered directly into page html -->
	<link rel="stylesheet" href="css/fullscreen.css">
	<link rel="stylesheet" href="css/button.css">
</head>

In this way I can save a lot of coding and easily make global changes and still be able to change page specific settings - the downside is links and meta are a bit mixed up -

It seems to work ok but are there any problems with this idea or the general syntax - thanks

any advice or ideas greatly appreciated

2

Just a few points, but nothing major.

I would probably put the charset as the very first thing in the head.

This, I don’t think is needed anymore.

This, also not needed, unless you have some specific use for it. It is essentially ignored by search engines (in this century), so of no use in that respect. So it is probably a waste of bytes, and your time filling it in.

I would probably group all CSS together in one section.

No need for the trailing slash on self-closing tags anymore.

If I really want to upset things. What you describe is how I used to do things, when I first discovered PHP includes. Every page file had a bunch of includes in it for common elements like head, header, menu, sidebar, footer, etc, often repeated the same in every page (you know what they say about repetition).
So although I could change any one of those elements in one include file, any more major change to the page structure, still meant making multiple, identical edits to each and every page file, on a site with a growing number of pages.
What I have done since, is to turn that idea inside-out.
I have just one full page template from doctype to the closing </html> tag, with all elements common to every page.
Then the page specific parts are included into that. Eg:-

<title><?= $title ?></title>
<meta name="description" content="<?= $description ?>">

So the individual “page files” consists of really just the page content, which is printed out or included into its container in the template. You will of course need some kind of simple processing script to build all the page specific data parts of the page like title, description, h1, content, etc, be that manually hard coded, or pulled from a database, then include the template when it has all that data.
It may be a big upheaval, or not suit your needs, but I find it works a lot better that way around.

3 Likes
3

I like the idea of turning it on it’s head and having a document template and then include() the page specific elements.

Yes I thought the keywords and X-UA-Compatible were redundant but kept reading conflicting info but it seemed worse case was they done no harm.

You mention grouping all CSS together, is this just for clarity or is there a functional problem/risk

Thanks again for your help

5

You might want that href to have a leading slash, so that it points to the same folder regardless of where the particular html/php file is sitting:

<link rel="shortcut icon" type="image/png" href="/img/web-design.png">

Same with the css links…

1 Like
6

2 posts were split to a new topic: How to set up virtual hosts

8

Temporarily on the page echo the following to find the relative path using. ./ or …/ to step up to the previous level,

I prefer setting the href to the full online URL path.
‘‘‘

<?php echo getcwd(); ?>

‘‘‘

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.