Getting Started With HTML
Getting started with HTML is super simple. All you need to begin is a plain text editor. On Mac, you can start off with TextEdit (just make sure to hit command+shift+T so it works in plain text). Windows users can use Notepad.
The first thing to know about HTML is that it is used to describe only the content of a web page. Since it dedicates itself to only content, that means you can’t program with it. You can use other programming languages to generate or modify HTML pages, but we’ll leave that for a later tutorial. Styling is also left to another language called CSS, which we’ll leave for a later tutorial as well.
Okay. Now that you have your text editor ready, let’s get started. The first thing all good HTML pages should begin with is a doctype declaration. This lets whoever or whatever is looking at the file know what type of file it is. It also specifies the version of the code. Lucky for you, the doctype declaration for HTML5 is really, really simple. Ready?
<!DOCTYPE html>That’s it! This line needs to be the very, very first line of your document for it to be a valid doctype declaration. Now that we’ve put in a declaration, let’s get started with building the page itself. Every well-formed HTML document has a single root element which contains everything (other than the doctype declaration).
This root element is always represented using the tag <html>. And unlike the doctype, we have to close this element using </html>. A lot of tags will take on a similar form, with an opening and then a closing tag, which look exactly the same except the closing tag has a backslash! Let’s add our root element now.
<!DOCTYPE html>
<html>
</html>As it is, this HTML page isn’t well formed. One attribute that every HTML document must have is the <title> element, which tells the browser the title of the page. The title is displayed at the top of the window, as the text that goes in the tab. But we can’t just add this title anywhere. Instead, we need to put it inside another element called <head>, which contains all the metadata about our webpage, or information about the webpage itself. Let’s go ahead and add both: a <head> element, and inside a <title>. We’ll put “Hello World!” as our title text. Then we’ll close our new elements:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
</html>Great! Now our HTML document is well-formed. Of course, this is hardly an exciting web page. All it does is tell us what the title of our web-page is. Now, to add content, we first have to add a new element. This new element is called <body>, and it will contain the body (intuitive, right?) of our page. Images, text, videos, etc., must all go within the body. This new element will go as a sibling of our <head> element (which remember, only deals with metadata, not actual data!). So we’ll place it after the closing tag of our <head>. We’ll go ahead and place some text inside.
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
Hello world! This is my own HTML document!
</body>
</html>As it stands, our web page is complete! We can open it in our browser. If you click on your document in Finder or Windows Explorer, it should automatically open in your default browser, where you’ll just see one line of text: whatever is in between our <body> tags. You may have put linebreaks, or extra spaces, or done something fancy. It’s important to understand that HTML ignores whitespace. You could have one thousand carriage returns between words, or a thousand spaces between letters, like the next e.e. cummings you are. At most, you’ll see only one space (and none of the linebreaks!).
We’ll learn more about the wonderful world of tags you can put in your <body> element next, then later, what you can put in your <head>. But for now, we’ve built a great web page and started to learn more about HTML. We learned how to write a doctype declaration, what the root element was, and how to define the metadata of our document. Though they’re simple, no web page could really exist without them, so pat yourself on the back!
