• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Nile Flores Media

Helping You Rock Out Your Website Like A Rockstar

  • Home
  • About
  • Blog
  • Portfolio
  • Hire Me
  • Resources
  • Contact
  • Blogging
  • WordPress
  • Social Media
  • SEO
  • Web Design
  • News
  • Podcast
You are here: Home » Web Design » Basic HTML Tutorial – What is HTML?

Basic HTML Tutorial – What is HTML?

By Nile Flores 12 Comments


HTML is a short acronym for HyperText Markup Language. The language consists of tags surrounded by angle brackets and can effect the way a person sees a website. It can be used in scripting languages like cgi, php, and javascript to person any number of actions.

Example of a tag:
<head>.

A basic page consists of several key points that should be placed in the layout. There will be another tutorial illustrating how to build a basic page, but below is very general example of how a web page is composed. In a way, the HTML to a browser is somewhat like Writing is to a Book. It tells a story all in itself on how the page should look.

Here is the basic bare bones structure of a page:

<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>
<p>Your Site Content Goes Here.</p>
</body>
</html>

The Document Type, HTML Head, Title, Body, tags are extremely important and should always exist when coding a website layout or the page may not show up properly or not at all. If you notice, the tags seem to be repeated, but the second time it is repeated with a forward slash (‘/’) in front of the tag name. For every open tag, there must be a closed tag. Some tags like linebreak (br), and image source (img) tags are singular tags and the forward slash is within the url.

Just a few example of tags that do not have a paired tag:

<br />
<img src="YOURIMAGEFILEHERE" alt="IMAGENAMEHERE" />

If you put a web page together, you can label the page with the extension of .html or .htm and view it offline (without accessing the Internet) or you can load it to a server, whether you pay for a webhost or for a free account.

When breaking down the code above for the basic HTML page, you will note that there are really 3 main sections: the header, the content, and the footer.

The Header

<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>

The Content

<p>Your Site Content Goes Here.</p>

The Footer

</body>
</html>

In between the body tags goes the code for all of your layout and content. In the header, that is normally where you will put in your style sheet code and any elements like javascript or other script to help allow your layout to dynamically function.


Filed Under: Web Design Tagged With: html, tutorial, web design

About Nile Flores

Nile is a 43-year old female from the greater St. Louis (Southern Illinois side) area. Nile is a mother of 1 son. She is also a web designer and developer, a graphic designer, and a public speaker, who exclusively designs and develops using WordPress. She also blogs at GoDaddy's Blog, Verpex Hosting's blog and her very personal sites, Pixelled and Nail Polish Happy.




Related posts:

Basic HTML: Explaining the PRE tag Basic HTML: Using The Anchor Tag For A Page Jump Tutorial: CSS Rounded Corners Adding A Favicon To Your Website Understanding How to Use The W3C Markup Validation Service

Reader Interactions

Comments

  1. Rakesh Kumar says

    March 27, 2011 at 6:31 am

    Thanks remind my old college days. Those days i was little confuse in the usage of blackquote and pre tags.
    My recent post Samsung RF511-S02 Price – 156-inch Entertainment Laptop

    Reply
  2. Bjorn says

    May 13, 2011 at 3:01 pm

    I like xhtml better than regular HTML. xhtml is more strict and you must close all tags. I think xhtml is a more modern coding, and is easyer to make work in different web browsers.. But the main structure you describe here is the same for both languages.
    My recent post How to maximize the link building value

    Reply
    • Nile says

      May 13, 2011 at 3:25 pm

      Eventually, I would like to cover more advanced tutorials. I had to update some of my old ones, so as I re-write my old ones, I will be posting those too. 😀

      Reply
      • Frank Thomas says

        November 15, 2012 at 3:13 am

        that’s my 10 standard notebook last chapter the basic html tricks.

        Reply
  3. Clommo says

    September 27, 2011 at 12:05 pm

    I`am just analyzed my template for HTML error and got 100 line mentioned error, can you suggest something to get rid of them? I`am blogspot user. thank you.
    My recent post You’re Luckier Than You Think And Yes It`s True!

    Reply
    • Nile Flores says

      September 27, 2011 at 11:54 pm

      Try using the W3 HTML Validator – http://validator.w3.org/ It should help you with your coding and it pinpoints where your code is incorrect.

      Reply
  4. Anonymous says

    December 26, 2011 at 4:39 am

    This tutorial is very enlightening .. I found it helpful.. thanks a lot.

    Reply
  5. ajmal says

    March 17, 2012 at 3:30 am

    Actually i;m not a designer or coder but i know that html is one of the essential code. Thanks for this basic tips.

    Reply
  6. Lynn Jones says

    June 18, 2012 at 9:54 pm

    Hi Nile, This is great information! Html is a mystery to me, but you have given me some understanding. Am I ready to tackle it……um, I’ll have to say no on that. lol
    Thanks so much! You are a great help!
    Lynn

    Reply
  7. Anastasia says

    August 18, 2012 at 3:48 pm

    Nice tutorial. It gives conceptual understanding of what html is.

    Reply
  8. Matt says

    October 16, 2012 at 11:28 pm

    Thanks. This is something I want to know. In fact I want to study web development if I have the chance.

    Reply
  9. Howard Walter says

    November 8, 2012 at 3:10 am

    This is an auto development mode, studies are too tough for web development.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Follow Me On:

  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube

Get The Latest WordPress & Blogging Tips

Sign up for my newsletter, and also get my free ebook on 10 Reasons Why Your Website Isn't Converting, and How to Fix it!




Try to be More Positive on Social Media

Note: You can click on image and view the video in a larger lightbox window.

Footer

The Blog

Lots of free information, tutorials, and more to help you bring your best foot forward with your website.

  • Blogging
  • WordPress
  • Social Media
  • SEO
  • Web Design

Get The Latest WordPress & Blogging Tips

Sign up for my newsletter, and also get my free ebook on 10 Reasons Why Your Website Isn't Converting, and How to Fix it!

Copyright © 2025 · · WordPress