How to Write Basic HTML - Flight Media Blog
How to Write Basic HTML

How to Write Basic HTML

Once you understand exactly what HTML is, it’s time to begin learning the basics.

Don’t worry, at first, HTML sounds and looks like a bunch of jumbled letters, numbers, and symbols, but once you understand these basics, you can apply them to almost anything.

Lets get started.

Tags

HTML is created with tags. Tags (often called commands) use the same format throughout an HTML document by having an opening (<tag>) and closing (</tag>) tag. Learning HTML really comes down to knowing different tags.

For example, if you wanted to write your name in a regular paragraph format, you would use a ‘p’ tag. (‘p’ stands for paragraph. Who would have guessed..)

Below are two tabs. One shows what the HTML is and the other shows what the HTML looks like on a web page.

  • HTML
  • Preview

<!– This is called a comment tag. Anything written between these tags will not be shown on a web browse. –>
<!–Below, I used paragraph (p) tags to write my name in a regular paragraph font.–>

<p>Josh</p>

Josh

If you wanted to write your name in a larger form, you would use header (h1,h2,h3,h4,h5,h6) tags.

  • HTML
  • Preview
<!–let’s write our name in headers 1-6, seeing as those are the only header sizes available in HTML!–>
<h1>Josh</h1>
<h2>Josh</h2>
<h3>Josh</h3>
<h4>Josh</h4>
<h5>Josh</h5>
<h6>Josh</h6>

Josh

Josh

Josh

Josh

Josh
Josh

 

As you begin to learn more tags, remember to write them down or archive them in the back of your mind. Basic HTML terms may be easy to remember, but having an organized list of tags is always good to have!

Let’s do a bit more.

Let’s say we wrote an article and we want to add a bold, large text title, an italicized, medium text sub-title, and then have a regular size text for the paragraph. We would do something like this:

  • HTML
  • Preview
<!–Don’t forget about these comment tags! They come in handy when writing an HTML document. They are great for posting notes within the document to organize different sections, which makes it easier to navigate in the future.–>
<h3><strong>My Awesome Title<strong></h3>
<h4><em>Cool Sub-title</em></h4>
<p>A long paragraph of great information that you learned on the internet and wanted to show the world, so you used some html to create a sexy article on it.</p>

My Awesome Title

Cool Sub-Title

A long paragraph of great information that you learned on the internet and wanted to show the world, so you used some html to create a sexy article on it.

As you can notice, every one of the tags had an opening and a closing tag. It is absolutely essential that you have both. If you accidentally leave a tag open (without having a closing tag,) it will apply to everything after that tag. Closing tags are also very important for Wordpress because unclosed tags can alter an entire site layout.

*Side-note: Tags will not show up on your page. They are simply used to generate the format of the page, but do not show up (given that everything is done properly!)

HTML Writing Platforms

Writing HTML in Textedit (Mac)

Writing HTML in Text-edit for Mac.

HTML can be written on many different platforms. If you’re on a working computer (which I assume you are if you’re reading this,) then you will be able to write in a regular Textedit (Mac,) Notepad (PC), or Quackit (online.)

If you are really serious about coding, then we highly recommend using a platform such as Dreamweaver.

Creating Your First HTML Page

Now, it’s time to get to the good stuff. You’re going to create your very first HTML page (unless you’ve already done it.) 😉

To begin, you are going to need to tell the browser (i.e. Chrome, Firefox, Safari, etc.) exactly what kind of document it is going to be reading, which in our case, will be HTML. To begin the document, you will have to declare the doctype (document type) as HTML. It will look like this:

<!DOCTYPE html>

After the browser knows what it’s reading, insert your <html> tags. Everything on the entire HTML document will go between these.

<!DOCTYPE html>
<html>
</html>

Next, you must create a <head> of the document. (This is what displays on the website tab, next to the favicon. Right now, this page should read “How to Write Basic HTML | Flight Media Blog.”)

In order to have a text display in the head, we must write a <title> tag within it!

<!DOCTYPE html>
<html>
   <head><title>Your Awesome Title</title></head>
</html>

What comes after the <head>?

The <body> of course! Just like a regular English paper, HTML reads top to bottom and left to right, therefore, after the <head>, comes the <body>.

The body goes inside the HTML tags, but not inside the head. Everything that is coded within the body is what shows up on a webpage. So, let’s give it a try.

<!DOCTYPE html>
<html>
   <head><title>Your Awesome Title</title></head>
      <body>
         <h3>I love to code!</h3>
            <p>Mainly on Wednesdays.. :)</p>
      </body>
</html>

View the HTML page we just created! :)

As you may start to notice, everything has a similar structure in HTML. What you just learned about tags is used on every webpage. As I said at the beginning of this article, HTML may look intimidating at first, but once you understand the basic structure of it, it’s pretty simple.

It’s like any language, it has a structure (whether that be syntax, tags, etc.,) but once you learn the basics, it’s a matter of copy and paste!

Hit the one of the share buttons below if this article helped! 😎

 

About Josh Coffy

Entrepreneur. Marketing Nerd. Life enthusiast. I am absolutely passionate about what I do. My goal is to inspire others to reach their true potential.
Scroll To Top