What is HTML?
HTML is the language that the web is written in. It puts all of the information that you see on a website into a structure that your browser can understand. It also internally links to resources that enhance that information, such as CSS files for visual styling and JavaScript for logic and interactivity.
What does HTML look like?
The atomic building blocks of HTML are called tags. A tag always begins with a less than symbol (<) and ends with a greater than symbol. In between goes the type of tag. For example, the <strong> tag is a very commonly used tag to create bold text elements. Each opening tag generally requires a closing tag, to tell the browser when your element ends.
Code:
<strong>I am a bold sentence!</strong>
Output:
I am a bold sentence!
What you need to write HTML
To write HTML and create websites, you don’t need much. For now, if you are using windows, notepad will be sufficient, but if you would like something a more advanced, check out HTMLKit. For Mac users, TextEdit is fine, for a more advanced editor, check out TextWrangler.
Your First HTML Page
Fire up the text editor of your choice, as we just discussed, and create a new file. Enter the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
</head>
<body>
</body>
</html>
This is the basic structure that we begin with for an HTML page. I will give you a quick explanation of its parts.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
This piece of code tells the browser what kind of page it is loading and how to parse it by referencing what is called its DTD or Document Type Declaration. We are using XHTML 1.0 Strict because this is the most progressive doctype out there right now.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
This gives the browser further instructions about text encoding and begins the <head> element. The head element of a document is where you put a lot of code that does not need to be visible to the user, but that the browser uses to make your website work properly. It is also where the title element lives:
<title>
</title>
</head>
The title element is the name of the page. This is what shows up at the top of the browser window and the link that comes up on search engines when your page is listed. The title element is very important for letting users know where they are on the website, as well as helping search engines index your website properly. We have also closed the head element here.
<body>
</body>
</html>
Here, we create the body element, and close the html element. The body is where everything that you want to be visible to the user goes. We will be primarily concerned with this area of the document.
Homework
You are going to use this basic page structure to create your own HTML page. You will use the strong, em (italic), and p (paragraph) elements in order to create a page that resembles the following:
