Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In today's tutorial I will be dissecting an HTML document.
Specifically, I will be talking about what you need to include in every HTML document, why you need to include those elements, and what those elements do.
As shown here, every HTML document starts the same way and includes a number of elements that must be included in order for an Internet browser to correctly read an HTML document.
The first thing that needs to be included is the doctype declaration.
The doctype declaration tells an Internet browser what type of document it is loading.
In this example, we have an HTML5 document.
The next thing we need to add is a pair of HTML tags.
The text between the HTML tags basically describes the document's content for the Internet browser.
Next, we need to make sure we include a set of head tags.
The text between the head tags offers the Internet browser information about the HTML document and also includes instructions on how to handle specific page formatting rules.
Inside the head tags, then, we need to add some descriptions.
We do that with what are known as meta tags.
We use meta tags to include information like an author’s name, a description of the document, or keywords that a search engine can use.
Although many meta tags are optional, there is, however, one required meta tag that we need to include in every document, which is the charset tag.
The charset, or character set tag, is important because it tells the Internet browser what type of character encoding is used to create the document.
It is important to note that all digital files are converted to bits of information before they are sent to the Internet.
The charset allows us to tell the Internet browser how the document was converted to data before it opens the document.
This is important information for an Internet browser to know because without it it will not properly display the content that we later add to the HTML document.
Inside our head tags, the next thing that we need to add is a set of title tags.
As their name suggests, the text between the title tags provides an HTML document with the title.
This information is also what the Internet browser will use to display information in a browser tab.
So far, everything that we've added to our HTML document is background information and will not be displayed on the web page itself.
To add content to a web page, then, we need to add a pair of body tags.
The body tag is extremely important.
The body tag is used to separate our page content from the rest of the information that we add to an HTML document.
It helps an Internet browser understand what should be displayed when a web page loads.
In other words, what we add between the body tags will be what is actually displayed on the screen when the Internet browser loads the page. The rest of the information will be ignored.
As you can see here, when we add “this is my page content” between the body tags when the Internet browser loads the page the only thing it will display is “this is my page content.”
Although the rest of the information will not be displayed, the Internet browser does, however, need that information and it is very important. So, in other words, don't delete it.
Luckily for us, most HTML editors will preload this information for you whenever you start a new document.
Just remember, never delete these tags.
That concludes the basics of HTML video tutorial series.
In the next video tutorial series, I will be talking about how to markup content and prepare it for the Internet.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.