Welcome to your introduction to HTML
Step One: Open your .html file.
To begin, start by opening the .html file you created in the previous tutorial. To open the document, right click on the document’s icon and select “Open With”, and then click on “Choose another App”.
In the window that pops up, scroll down until you see Notepad. Click on this.
Your text editor should then pop up.
Step Two: Type
<!DOCTYPE html>; on the first line of your document.
HTML consists entirely of a series of tags, each of which represents a specific type of HTML element. These elements have specific purposes and attributes and must have an opening and closing component. The first tag in the HTML of any webpage is the:
The opening and closing tag of the DOCTYPE element is:
This tag lets the browser know that the document is an HTML file and should be treated as such by the browser.
Next is the html tag. The opening html tag is
<html> and the closing html tag is
Step Three: Type
<html> on the second line and
</html>; on the fourth line of your document. Nothing on the third line.
<!DOCTYPE html> <html> </html>
Nesting Tags (Not the egg-holding kind)
Everything on the webpage will be contained within these opening and closing html tags. This introduces the concept of nesting. Every new tag written in an HTML file may be written between the opening and closing tags of another HTML element. This allows the different elements to be grouped and organized according to their function and the overall structure of the page. Placing a new element within the opening and closing tags of another element nests the new element within the old element. We will go over nesting in more detail in a moment.
Everyone Needs a Head (and metadata)
The next element tag that must be included in every webpage is the head tag. The opening and closing tags of the head element are:
Step Four: Type
<html> ; and
The head element contains the metadata of a webpage. Metadata is any data that describes or applies to the page as a whole, rather than one specific element within the webpage. This data is not displayed on the webpage itself. The title of the webpage, for instance, describes the entire page and is nested within the opening and closing head tags exactly as shown in the example below:
<head> <title>Your Webpage's Title </title> </head>
Step Five: Type
<title> My First Webpage </title> between
You will notice the opening and closing tags of the title element. Remember that the text between these two tags become the title of the page and not a heading within the webpage. The title of the webpage is displayed in the tab at the top of the browser window. When we combine all the tags discussed so far, we end up with:
<!DOCTYPE html> <html> <head> <title>Your Webpage's Title </title> </head> </html>
Giving Your Page Character
Another important piece of metadata always included within the head tags is the character set of the webpage. While we are accustomed to the Latin alphabet you are currently reading, there are many different alphabets that must be accommodated (the web is a worldwide phenomenon after all). A generally-used character set is UTF-8 (Universal Transfer Format-8). This character set is used because it does not require an exorbitant amount of memory yet can include any Unicode character. The ‘8’ means that each character takes up 8 bits of memory space. A webpage’s character set information is included within thetag as follows:
Step Six: Type
<meta charset="UTF-8"/> after the line that contains
<title> Your Webpage's Title </title>
When we include the
tag with what we have already written, our code looks thus:
<!DOCTYPE html> <html> <head> <title>Your Webpage's Title </title> <meta charset="UTF-8"/> </head> </html>
The Self-Closing Tag:
I’m sure you have picked up on the fact that the meta tag looks a little different than the title tags (if not check to see if both ‘tag’s in this sentence are plural). This is because the meta tag is a self-closing tag. There are several of these tags in HTML and they will be identified as we come across them. For now, just know that a self-closing tag does not need a separate closing tag and ends with just the ‘/>’.
Step Seven: Right Click on your .html document icon and open with your browser
It might look like nothing changed, but if you look at the tab, you’ll see it contains the text between your and tags. In the next tutorials we’ll create elements that are displayed on the page itself.
An Important Note on Format
Looking at our HTML document, we can see that some of our nested tags are indented and others are not.
There is no ironclad rule dictating which nested elements are indented and which are not, but most follow the convention that the head, header, body and footer tags are not indented and those within these tags (or deeper ‘levels’ of tags) are indented. While this general rule serves well just remember that the overall aim of indentation is to make your HTML document more readable to any future web developer perusing the document. If such a developer squints his or her eyes, cocks his or her head to the side and says “Huh?”, when reviewing your document, you might need to re-think your indentation scheme. If not, stay the course!!!
Congratulations!!!! You have successfully made it through your true introduction to the kind of English that constitutes HTML. Here are the points we just covered:
- HTML is made up of elements, written with tags.
- Each tag must have an opening and closing component.
- Tags may be nested within one another to organize and structure the page.
- The head tag has nested within it the metadata of a page.
- Metadata describes or applies to the entire page and is not displayed on the page.
- Two pieces of metadata include the page’s title and the character set the page uses.
- The following tags, always included in brackets, are always included in every web page:
- IDOCTYPE html
- html /html
- head /head
- title /title (Does not have to be included but it is a good idea to do so)
- meta charset=”UTF-8″/
- There is no rule regarding indentation. The most important quality of an indentation scheme is that it is readable.
Our next topic/blog will be on some of the “meat and potatoes” of HTML: the body, heading, paragraph, break and span elements.
Chadwick A. Mayer, November, 2017