Writing Your HTML Code

Writing Your HTML Code is the section 2 of Beginner’s Guide to HTML.


Before to start coding, you need to have a platform to write your codes. Yes, you got it. An editor! As we said HTML consists of hypertexts, it can be written on any text editor. When I said any, it means really ANY! Simple or professional, any editor. If you go for simple, then use Operating System built text editors like Notepad (Windows) or TextEdit (Mac). But the thing is you have to write all the codes by yourself and it matters with great difficulty. But it’s the best way to learn HTML truly. If you use professional editors like Adobe Dreamweaver and CoffeeCup, then things will get much easier. We called them WYSIWYG editors (What You See Is What You Get). It is because using the editor’s graphical user interface (GUI), we can layout everything as it needs to be appear. So you would not need to have an extensive knowledge in HTML syntaxes. Everything is done for you by the editor.

Dreamweaver IDE
Coding with Dreamweaver
    – You can create your webpage by drag and dropping prebuilt components. No need to write anything or keep remembering syntaxes.
    – When you are writing it will suggest you with syntaxes.
    – You can automatically generate your code with just simple clicks.

Not the way of learning, Isn’t it? So what we are suggesting is, go for a simple editor until you are familiar with most of HTML syntaxes.

Notepad Text Editor
Coding with Notepad


HTML Document

After you write your HTML codes you have to save the file with .html or .htm extensions. This file is called as HTML document or web page. So when you see a file with those extensions, it means they are HTML documents with HTML tags and plain text. To display the text you can open the file with a web browser, and to view the tags you can open it with any text editor.

HTML Tags and Elements

Markup tags or syntaxes in a HTML document are usually called HTML tags. And you can easily identify them among the normal text because they are surrounded by angle brackets.

Any simple HTML page has the following structure.

This is the content

Here you see is several most important tags. Tags normally come in pairs, start tag and end tag as it shows. (But there are few who doesn’t have pairs). If we take this body thing, starting tag is written asand ending tag is written with a slash in-front of the same name as. So we call this thing an element. So basically element has a starting tag (opening tag) and ending tag (closing tag). Between them there will be some content. Tags without pairs will have empty content and they are closed in the start tag. For example . These are called empty elements. We later see few examples of those.

HTML elements can be nested. It means elements can have more elements inside of it. Likeelement has theelement inside of it as in the above example. Not only one element but also we can even have something like this too.

[code language=”html”]

This is title

This is the content


If you forget the closing tag, sometimes most browsers might display it correctly. But don’t rely on it. It cannot be always guaranteed. Also in XHTML, it is demanded that all elements must be closed.

The other thing is HTML syntaxes are not case sensitive. You can writeasoror. Even the opening tag and closing tag should not need to be the same case. But we suggest you to use lowercase tags as a standard practice because World Wide Web Consortium (W3C) demands to use lowercase in XHTML and recommends using lowercase in HTML 4.

We mentioned earlier ‘html’ and ‘body’ elements are the most important elements in a HTML document.

html – Defines the content inside the element has HTML tags. So when your browser processes the document, it knows what to do for the content. Without this tag you wouldn’t be able to view anything in the web browser.

body – Defines the content inside the element need to be visible. When you create a webpage with the above code and open it on a web browser, you’ll see what’s inside the body element.

The Declaration

This declares the document type. It helps the browser to display a web page accurately. But this really need not necessary. Without this tag you can anyway open up a webpage on a web browser. But you cannot guarantee because there are so many web browsers in the world now and have several HTML versions. So it’s a good practice to include this tag on your web page.


[code language=”html”] [/code]

HTML 4.01

[code language=”html”] [/code]


[code language=”html”] [/code]

So we get to know the basics of creating an HTML document. Try to create a HTML file and open it on a web browser. In the next section we will look into more tags and also learn something special called attribute.


Learn Using Attributes in HTML.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below