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

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, turbofuture.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://turbofuture.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)