HTML Lesson 2: How To Create and Save Your First HTML File By Hand

It’s time to get your hands dirty and write your first HTML file. Let’s begin by opening a text editing program. If you are on a Microsoft Windows PC open the program named Notepad (look in your Start Menu for it, or simply hold down the Windows Key on your keyboard and press R, then type “notepad” into the run command prompt and press enter). If you are using a Macintosh computer, launch the application named “TextEdit” (which can be found in your Apps folder).

As a coder, it is our job to turn this blank canvas of a document into a HTML masterpiece. Let’s begin by entering the following code into our blank text document, (or utilize your computer’s copy and paste function and lift it directly from below):

<!DOCTYPE html>

This code tells the web browser what computer language we are using (HTML). You will begin every web page you ever create with this code.

Writing HTML is Like Making Sandwiches

We are now ready to begin the actual structure of our page. Begin by adding the following code to your document, directly below our last piece of code:

<html>

</html>

The start-tag <html> tells the web browser that we want to begin our document; similarly the end-tag </html> tells the browser we want to end our document. If our page is a sandwich, the <html> start and end tags are the slabs of bread.

Before we can add any exciting content to our page, there is one more element we must add. Insert the following code directly beneath the <html> start tag:

<body>

</body>

The <body> element signifies the portion of our document that will house our actual content (paragraphs, images, etc…). You may be thinking “But I thought that’s what the <html> tags did?” In fact, the <html> element houses everything, both our actual content (which goes inside the <body> element) and more complex elements that we will learn about in future lessons. For now, just know that the <body> element goes inside the <html> element.

This is what your document should look like so far:

<!DOCTYPE html>

<html>
    <body>
    </body>
</html>

Finally, The Fun Part

Now, let’s add our first bit of content to our page! How about a big bold heading? Add the following code underneath the <body> start tag:

<h1>This is a big bold heading</h1>

This code raises a good question for the beginning coder: “How am I supposed to know what element to use? How did you decide on using the <h1> tag?

We decided to use the <h1> element to describe our heading because this is the most important (and only) heading on our page. In future lessons we will create pages with multiple headings and utilize <h1>, <h2>, and <h3> tags to create a hierarchy of importance for our content.

Russian Stacking Dolls

At this point, it is helpful to think of HTML as a set of Russian stacking dolls. Smaller elements fit inside larger elements, which fit inside even larger elements, etc… Our header rests inside our <body> element, which rests inside our <html> element. To fully illustrate this point, let’s add a bulleted list to our page. Add the following code directly beneath your </h1> end tag:

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
</ul>

The <ul> element is code for “Unordered List” and the <li> element is code for “list item.” Just like your grocery list on a scrap of paper, a list is made up of multiple list items. This is reflected in our code; our many list items are nested inside our single unordered list.

Saving Your Document

Now is a good time to save our document and then see how it looks in our web browser. From within your text editing program, click File, and then Save. Just so we’re on the same page, let’s agree to name the file “test.html”. It is very important that our file ends with the “.html” extension. This tells our computer what type of file our document is (a web page of course!). Choose If you’re on a Windows PC, be sure to click the dropdown box below the file name input, labeled “Save as type:” and select the option “All files”. This will insure your document is saved in the correct format. Go ahead and save your document.

Viewing Your File In a Web Browser

Now navigate to wherever you chose to save your file (I recommend creating a new folder on your desktop to store all of your learning files) and double click “test.html.” This should open our page in a web browser and you should be greeted by a rather simple looking header which reads “This is a big bold heading” followed by a bulleted list of grocery items.

Write First HTML page by hand

Giving Your Page a Title

You may have noticed that our page doesn’t have a title (usually displayed in the title bar of our web browser). Web page titles are an absolute necessity, as they play a huge roll in search engines being able to find your pages. Now that you are a little more familiar with the syntax of HTML, let’s go ahead and give our page a title.

The <title> element should be stored in a new section of the page named <head>. In future lessons you will learn more about the <head> element, but for now just know that it is used to hold our page’s title. Add the following code directly below our <html> start tag:

<head>
    <title>My First Page</title>
</head>

From within your text editing program, save your document, and then switch to your web browser window and refresh the page (pressing Control + R refreshes on a Windows PC, and Cmd + R refreshes on a Macintosh computer). Notice that our page now has a title in the web browser title bar.

Just One Last Step!

Before we finish this lesson, let us add a bit more code that will help all web browsers better understand our code. Insert the following line of code directly below the <head> start tag:

<meta charset="utf-8">

This marks the first time you’ve seen an equal sign or quotation marks inside an HTML element. You will learn about this new syntax in the next lesson (HTML Attributes and Values) but for now just be content with copying and pasting this code and knowing that it makes your page complete! You just wrote a 100% valid web page from scratch! By hand! That is more than some professional web developers can say.

Remember, no one ever promised that your first web page would be beautiful! What’s important is that you now know how to write your own HTML code and create basic web pages. You may think “Yes, but I don’t know all of the element codes. Without someone telling me which element to use to describe a piece of content I’ll be lost!” Let me offer you some words of comfort: you already know more than you realize. I would estimate that 95% of websites use the same basic collection of HTML elements that a beginner can master quickly and easily. Follow the rest of my lessons and you will be completely proficient in writing HTML in no time!

For your reference, here is the code we just put together, in its entirety:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">
        <title>My First Page</title>

    </head>

    <body>

        <h1>This is a big bold heading</h1>

        <ul>
            <li>Milk</li>
            <li>Bread</li>
            <li>Eggs</li>
        </ul>

    </body>

</html>

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

25 thoughts on “HTML Lesson 2: How To Create and Save Your First HTML File By Hand

  1. Thank you so much. this was indeed helpful for an XHTML dummy like me. made me very enthusiastic about going further.

  2. Greetings Brad,
    When I try to open test.html all Safari does is display it as source code. I checked the syntax many times and in the end did a copy/paste of your source code from lesson 2 but when I open a file and select the test.html again Safari just displays the source?
    Any ideas? from an appreciative novice.
    kind regards
    kim

  3. Hi Kim – excellent question!

    Since you mentioned Safari I will assume you are using Mac OS X.

    It sounds like you might have accidentally saved the file as “test.html.txt” – however the “txt” part may be hidden.

    Try this:

    When you open TextEdit – click the top “Format” menu item – and then look for “Make Plain Text.” Once you’ve switched the document to plain text – now input your HTML code. Finally, try to save the document “test.html” and make sure to remove any instances of “txt” in the file name.

    Also – on the “Save As” screen prompt – you can look in the bottom left of the pop up for an option titled “Hide extension” – you can make sure this is unchecked which will help you spot the “txt” extension that you’ll want to avoid.

    Thanks!
    Brad

    1. Hi Brad,

      Yes I’m on an old PowerBook G4 – and your advice is spot on! which is brilliant as I can now continue.

      Many thanks
      kim

    2. Hi Brad,
      I spoke to soon. When saving into a file called test.htm with ‘Hide extension’ unchecked and format option ‘Make Plain Text’ selected, after saving the file and then going back into it (using TextEdit) there’s no code just a black background and the only thing I see is the link added in lesson 3!
      Any ideas?
      kind regards
      kim

  4. I think the issue is that TextEdit can view / edit rich text documents, so when you re-open the “test.htm” file TextEdit is trying to view it as a formatted document. To get around this, launch TextEdit. Click File > “Open…”

    Now, when you browse to the “test.htm” file – make sure the “Ignore rich text commands” checkbox is checked. We want this box checked so it will simply show us the code.

    If you are interested in continuing to learn and experiment with HTML and CSS I recommend you download a text editor (aside from TextEdit) that is designed for coding. A quality, and freely available Mac OS X text editor I recommend is TextWrangler:

    http://www.barebones.com/products/TextWrangler/

    Thanks!
    Brad

  5. Thank you SO MUCH! I am an online marketer, not a web developer, and I have always been handicapped by my inability to write and understand code. This is completely empowering for me. Thank you, thank you, thank you!

  6. Brad, thank you for these lessons. Fun stuff.
    Just curious about the choice of html transitional vs. html 5.
    It seems there may be a convention for the writing of html elements for ease of reading. Can you expand on these questions?

    1. Hi Geoff,

      Great questions! I started writing these guides several years ago, and at the time I felt there were compelling reasons to stay with XHTML a bit longer. However, in 2012 I recommend using HTML5.

      Having said that – if you aren’t planning on using the canvas element, or native video embeds I’m not sure if there are any extremely compelling reasons to use HTML5 over XHTML for a typical website. This sentiment can be found by visiting any extremely popular, mainstream website: some will use HTML5, while plenty are still using (X)HTML4.

      For most (basic) websites the only real difference is that HTML5 offers semantic divisions for the page such as the “header” and “footer” elements instead of assigning a DIV element a class of “header” and/or “footer.”

      There are groups of people that have arguments in favor of both methods, but at this point I honestly believe it’s personal preference. For the sake of staying current with industry standards however, I don’t think you can go wrong with HTML5.

      To recap – as far as the elements we use to markup our content I don’t think HTML5 is anything to worry about. It’s extremely simple to learn. I think the excitement centering around HTML5 has more to do with the canvas element, and it’s marriage with CSS3 and media queries (for responsive / mobile design).

      I hope to touch on all of these topics in future lessons,
      Thanks!
      Brad

  7. Amazing site! I learnt HTML and CSS and completed my assignment on the same day I discovered this site. Clear instructions and very well taught.
    Today was told I passed with a credit. Can’t thank you enough!

  8. Hi Brad

    This is awesome staff, this is my first year study on this course and you just simplified just about everything for me on this lesson. Thanks a lot i can now start with my assignment without worries.

    Thanks
    Tshepso

  9. seriosly brad u r just an angel to me
    i was totally fed up from learning & memorizing the codes alements.
    u make it so easy & Well defined in ur tutorial
    realy helpful for me

    thank u

  10. Hi Brad,

    Thanks for this this site. This is simply amazing. Though I am from Finance background but by going through this site and working on the example code, i am now more interested to learn HTML.

    Thanks Again.

    Regards
    Alagar

  11. Hi Brad

    I really don’t have words to thank you, am studying Web design with Unisa, I was clueless and the Text book don’t help at all, I was ready to give up, I didn’t even do my 1st assignment because I didn’t understand, javascript is worse, I wanted to cry till I found these lesson that took me from 0-10, you really gave me hope

    Thank you for helping us all

  12. Your such a wonderful tutor what can i say i have studied programming from my collage but nobody as ever extensively taught me programming like you do your such a greater master. thanks its so helpful cos they are really the basics of programming. once again thanks

  13. Hi Brad

    I would like to personally thank you for this information, it has helped me in more ways than one. I am a 4th year student and I am doing bachelor of Education specialising in IT,Computer Application Technology and Accounting. during my teaching practice in one of the schools I was told that I was going to teach HTML, and this site helped me to understand it better and be able to deliver my lessons efficiently. so, I am looking forward to more informative and clear sites like this. god bless and keep up the good work :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>