Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Introduction to HTML
The term "HTML" is an acronym for HyperText Markup Language. How the language got so hyper is beyond me, too much caffeine maybe. Anyway, web pages are built using HTML, which defines the structure of the page. The tags themselves are not visible on the web page. The browser reads them in the page’s source code and displays the content according to the HTML.
HTML "tags" are simply instructions to a web browser. Here’s an example:
<b>
Each tag consists of the containers, which are the lesser than (<) and greater than (>) arrows, and the HTML element within them. The arrows and the HTML element together are commonly called an HTML tag, or an HTML command by some.
The example tag above tells the browser that the text that follows it should be rendered in bold type. The letter "b" represents the HTML element for bold.
Most HTML tags have an opening and closing tag. To close a tag, simply place a slash in front of the HTML element. Here’s the closing tag for the previous bold tag:
</b>
That tells the browser to stop rendering the text in bold. The basics are this easy!
The source code is simply a text file with content and code instructions that tells the browser how to display the content. It is saved with a .html file type extension rather than the .txt file type extension. Note that there are other file types a browser can read (.php, .shtml, and others), but .html is probably the most common.
<b>The basics are this easy!</b>
There are dozens of HTML elements, but only a handful that are needed to make a very basic web page. The more you know the more you can do, but it’s not like you have memorize them all. You’ll “accidentally memorize” the ones you use regularly just by using them, and the rest you can just look up as you need them.
If this looks confusing, trust me, it really isn’t that difficult. The page will walk you through the basics one step at a time. After reading this tutorial you’ll be able to follow the Make Your First Web Page tutorial and make a real (albeit very simple) web page in just a few minutes that you can view in your browser.
Ready? Let’s go…
HTML Skeleton
Below is the bare bones HTML code needed to create a web page. If it looks confusing, don’t worry, each part will be explained below in simple terms.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Page Title Here</title>
</head>
<body>
Your Content Here
</body>
</html>
Let’s look at that code one line at a time. Here's line one:
<!DOCTYPE html>
The above tag identifies the document type, or DOCTYPE for short, as an HTML 5 document. You may see other tutorials that will give a much lengthier DOCTYPE, but those are for older versions of HTML. The DOCTYPE was simplified for HTML 5. Each letter of “DOCTYPE” should be capitalized.
Now let's look at line two:
<html lang="en">
The HTML tag identifies the coding language used for the browser, in this case, a document (web page) written in the HTML programming language. The rest of your page code and content goes in between the opening and closing HTML tags.
The above tag also introduces something new, an HTML attribute and value, shown in red. It's not required, but it's strongly recommended by the folks who make up the rules. Again, I don’t want to overwhelm anyone with too much information now, so you can learn more about that in the HTML attributes and values tutorial. They are common and extremely useful so you'll want to learn more about them.
In line three we have:
<head>
The HEAD section acts as a container for the page title and meta data. The title is necessary, but meta data is not. You can learn more about meta data in this meta tags tutorial. We'll keep this introductory simple so no one is overwhelmed with too much information.
Line four reads:
<meta charset="UTF-8">
This tag defines the character set the browser should use. There are other character sets available, as you can see here. However, unless you have a specific reason for using a different character set, I strongly encourage you to use the one above. Why? Because no browser understands all the character sets. The one above is perhaps the most widely recognized, thus ensuring your web page will be compatible with as many users as possible.
Did you recognize that this tag also has an attribute and value? The attribute is charset and the value is UTF-8.
These are the boring ones, it gets better.
In line five we have:
<title>Your Page Title Here</title>
The TITLE is the name of the page, more or less. The title shows up as the tab text (or in the in the title bar at the top of older browsers), as the text for bookmarks unless the user changes it when bookmarking the page, and in most search engines the title is the link text in the search results. If you look at the top of your browser window or page tab now you should see "Introduction to HTML" as the title of this web page.
The title is usually just a few words that label the page content (or site content for the home/index page). You can discover what makes a good title in the Meta tags tutorial.
Because nothing else goes in the title, you see the closing title tag at the end. Remember, a forward slash ( / ) in front of the HTML element means that command is now canceled.
Lines six through eight reads:
<body>
Content Goes Here
</body>
In between the opening and closing BODY tags is where you place the actual content of the web page. The content can be further structured and formatted using other markup tags. You’ll learn about these options in other tutorials.
And lastly:
</html>
This tag closes the html element and signals the end of page to the browser.
You can see there are only five HTML elements required to make a very basic webpage:
- html
- head
- meta
- title
- body
Learning to design a web site is simply learning these and a few other elements and knowing what they do. It's easy, but it's also easy to get overwhelmed with too much information at once. Take your time, learn what you need when you need it, and take it one step at a time and you'll be fine.
