Create your first HTML document

Seriously, you're doing amazing and congratulations for making it this far! Get in a few reps of our mantra: Say to yourself or aloud; "I CAN DO THIS!, I WILL DO THIS!" And get pumped to build your first HTML document!

Creating your first HTML document

We're going to be using a text editor such as Notepad (Windows — Start/Search for "Notepad") and TextEdit ( Mac OSX — Spotlight > Search for "TextEdit") and after we update it, we'll save the file with a .html file extension. HTML files are nothing more than simple text files, so all you need is a simple text editor to start writing in HTML.

If you don't have a text editor, you can type along using this code editor.

Once you have you text editor open, add the document type declaration <!DOCTYPE html>. Which just tells the browser that this is an HTML document. Every web page you create should have this declaration.

html

<!DOCTYPE
                    html>

Next we'll add the <html> opening tag and it's respective closing tag </html> . Which tells the browser to expect that everything between the two is HTML code.

html

<!DOCTYPE
                    html>
                  <html>

                  </html>

Now add the <head> and </head> tags. The head section of the document is where information about the document is kept. We'll add a <title> element which controls the text found in your browser's tab.

Screenshot of a browser tab with a title

Enter whatever you like or use "My first HTML document".

html

<!DOCTYPE
                    html>
                  <html>
                  <head>
                  <title>My first HTML document</title>
                  </head>
                  </html>

Directly after the </head> closing tag, add the <body> and </body> tags. This is where everything that we want to include in the browser window goes.

html

<!DOCTYPE
                    html>
                  <html>
                  <head>
                  <title>My first HTML document</title>
                  </head>
                  <body>
                  <!-- Be creative and write something inspirational
                    -->
                  </body>
                  </html>

Let's use this as opportunity to utilize some common tags alongside text of your own or use this sample text:

This HTML document marks a new beginning for me. In a short amount of time I've accomplished a lot, and I'm very proud of the progress I have made.

Be sure to save this file in folder on your desktop or somewhere you can easily find it. Once saved, open the file and it should open in your default web browser. Alternatively you can type in or copy the file path for your document into your browser's address bar.

Continue to next lecture