HTML Essentials by Lynda – The document head and body

This morning I am going to be looking at document heads, this is going to go straight after your doctype declaration.

The head contains things like external scripts and styles as well as other information telling the browser how the webpage should be rendered.

15

After entering in the doctype on line 1, we can move down to line 2 and enter in the HTML opening tag. In my coder editor, it automatically adds the closing tag on the line beneath once I have finished typing out the opening tag, this just makes things a little bit quicker.

16.jpeg

Before finishing the HTML tag and moving onto the head, we have to add a language attribute to the HTML tag. This isn’t a necessity but it is nice to have, especially if your page is being visited by people who speak a different language as it very easily detects that the page is not in their language and translate it for them.

17.jpeg

Now we can open up the head tag! The first thing we want to do is tell the user agents which character encoding to use for the page. This will be done in the form of a meta tag. 

In the last tutorial from last week, they touched on character sets and I seem to have remembered what needs to be written for it so I am feeling a bit proud of myself right now!

The character set will be set to UTF-8 which is considered a fairly standard character encoding. Meta tags are one of those special tags that don’t need a separate closing tag, therefore we only need to add a right angle bracket to the end of it and we are ready to move on.

18

The next line is going to contain another meta tag, but this time it will contain a brief description of what the page is going to contain.

19.jpeg

The description tag used to be a lot more important back in the day, but in time, search engines have progressed and can now detect what a page contains. Leaving the description tag relatively, but not entirely, useless. It is now deemed more useful for your own indexing purposes rather than the search engines.

The last thing to go into our head tag is the title tag. As I established last week, if you don’t add a title to your code, the tab in the browser will use the name you have used to save your document which looks terrible! So do not forget to add a title tag.

20


 

We are now moving onto the body tag. The body tag is not nested within the head tag, it comes after the head tag but is on the same level.

If you openly type within the body tag without tagging the text, it will show as a plain text paragraph. This is the default for HTML.

21.jpeg

If we surround the text with a tag, we can alter how it looks or what it represents.

22.jpeg

We have now been given a paragraph to type out with no tags on either side of it. This automatically renders out as a paragraph.

23

Now if we add in the paragraph tags, you can see that… It makes absolutely no visible difference. It could be left without any tags but really it should be in a paragraph tag.

24.jpeg

Another thing we can do is make parts of the paragraph text bold.

25


 

Now we have covered everything that a basic HTML page needs

  1. Doctype declaration with HTML tags
  2. HTML tag containing a head tag that represents the invisible functioning content and a body tag that represents the visible elements on the page

 

Regardless of how big or small you make any HTML document, this structure is always going to provide the foundation and starting point for any of your documents.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s