An Introduction to Writing HTML

Updated on January 27, 2018
bluemana profile image

Bret has been writing HTML for more than 10 years, he is also proficient in CSS, JavaScript, and React. Bret is currently employed at TCN

Code
Code | Source

What is HTML?

HTML stands for Hypertext Markup Language. HTML is not a language in the traditional sense, but in the sense that it is a tool made of keywords and commands that programmers use to communicate with computers. HTML is used by web designers to create websites like Facebook, Twitter, and Hubpages. These examples also use various other tools, but for someone first learning about designing websites, HTML is the first tool that they should learn how to use.

Text Editors

In order to write HTML, you will need a text editor. A text editor is different from programs like Word that are meant for writing books or essays. Programs like word have helpful tools like paragraph styling and auto-caps, but those tools are not helpful for writing HTML, in fact, they can make it very difficult to do so. Never use Word to write HTML. On the other hand, text editors often have tools designed specifically for programming. There are many text editors out there, but I will focus on the three that I have used the most.

Text editors
Text editors

Notepad and TextEdit

Notepad, or TextEdit if you use a mac, is probably the most basic a text editor gets, and it is very easy to create and edit an HTML file with either of these programs. The downside is that neither Notepad or TextEdit offer any helpful tools writing HTML, but if you just want to write something quick and simple, then either of these would be sufficient to get the job done.

Brackets

Brackets is a good choice for beginners. It is only slightly more difficult to learn how to use than Notepad/TextEdit, and it has the added advantage that it was made HTML and CSS in mind. Brackets includes many tools that are helpful when writing HTML such as auto-complete suggestions, current line highlighter, live preview, and bracket highlighter. If you are unsure of what these tools are or do, that is okay, just know that they will be very helpful for you in the future if you choose to continue using HTML. For anyone working on simple HTML and CSS, this is the editor that I would recommend.

Atom

Atom is a very customizable text editor, it has lots of helpful tools, and it can be used for many programming languages besides HTML. Unfortunately, its hugely customizable nature can be overwhelming if you are new to programming. I used Atom for many projects myself, and I really enjoy it as an editor, but if you are new to programming or just doing basic HTML and CSS, then I would recommend one of the other two editors. That being said, I would still encourage you to give Atom a try after you've become more familiar with programming or intend to do a more advanced project.

Text Editor Comparision

Program
Learning Curve
Helpful Tools
Notepad / TextEdit
Minimal
None
Brackets
Small
Helpful Tools for HTML
Atom
Can be Overwhelming
Lots of Advanced Tools

Text Editor Links

  • Notepad / TextEdit - Your computer should already have one of these programs.

Create an HTML File

Once you have chosen an editor, open it up and create a new file, and save it as index.html (all lowercase). The ".html" tell internet browsers that this file contains HTML, and the name "index" tells the browsers that this will be your websites default home page. You can actually open this file in your web browser now and view it, but it would just be an empty page, so let's add some text to it! Go ahead and copy and paste the text below into your index.html file.

<!DOCTYPE html>
<html lang="en">
	<head>
	</head>
	<body>
		Hello World!!
		WELCOME TO MY WEBSITE!!
	</body>
</html>

View Your File in a Browser

I will explain what each line means, but first let's see what your website looks like. Go ahead and save your file again. To open your file in a browser, right click on the file and select "open with", then select your browser (see image below.)

Open with browser
Open with browser

Your browser should open up to a page similar to the image below.

Hello world
Hello world

Congratulations, you have created a simple website! It may not look like much now, but all websites start off small, and with a little more time and effort we can make it into something much prettier.

Explaining the Code

Now, I wouldn't be a very good teacher if I didn't explain the code we just used, so let's go ahead and jump right into it. Open you file again, and we'll go over the code line by line. If your file opens in a browser when you try clicking it, right-click the file and select "open with" again, but this time select your editor instead of a browser.

This first line simply tells the browser what programming language the file is in.

<!DOCTYPE html>

These two lines are called opening and closing tags. An opening tag tells the browser when a specific section of your website will begin, and the closing tags tells where it will end. It is traditional to indent any lines placed between matching tags so that your text is easier to understand. pressing tab on your keyboard will create an indent on the currently selected line. These specific tags are called HTML tags, and they tell the browser that everything between them is HTML. The "lang="en" part is so the browser knows to expect the inside text to be in English.

	 
<html lang="en">
  
		
		
		
		
		
</html>

These are the head tags. Text placed between these tags will not appear on your website. This section is where the code goes that tells the browser what the website's title is, where to get styling tools like special fonts, and where the tab icon for your website is stored. For this project, we will leave this section empty.

		
		
    <head>
    </head>
	
		
		
		
		

Anything that you want to appear on your website you will place between these body tags. This will be the "body" of your website.

		
		
		
		
    <body>
		
		
    </body>
		

This is plain text. any plain text placed inside your body tags will appear on the website. Some special character like "&" will not appear on your website, but they are possible to show using character references. For example, "Tom &amp; Jerry" will look like "Tom & Jerry" on your website.

				
				
				
		
				
        Hello World!!
        WELCOME TO MY WEBSITE!!
		
		

All together, these tools can be used to create a simple website.

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        Hello World!!
        WELCOME TO MY WEBSITE!!
    </body>
</html>

Thank You for Reading

Thank you for reading this article. If you have any questions, please leave a comment below. I am more than happy to help with any issues you may have with this project or with HTML in general. In addition, here are some links to some of the more helpful websites for HTML.

Help Me Get a Better Idea of Where my Readers Stand With HTML

How Much Experience Do You Have with HTML?

See results

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working