Learn The Basic Html

Let’s Start Our Class How To Edit your First Html Doc.

This article will answer about:

  • What is html
  • Html Tags
  • Html Elements
  • Html Page Structure
  • The <!–DOCTYPE>
  • Definition And Usage
  • Tips and Info
  • Notepad Editor

What is Html?

  • HTML is a language for describing web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML is a markup language
  • A markup language is a set of markup tags
  • The tags describe document content
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

Html Tags

HTML markup tags are usually called HTML tags

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags
  • <tagname>content</tagname>

HTML Elements

“HTML tags” and “HTML elements” are often used to describe the same thing.

  • But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:
  • HTML Element:

<p>This is a paragraph.</p>

HTML Page Structure

Below is a visualization of an HTML page structure:



<h1>This a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>



The <!–DOCTYPE> Declaration

The <!–DOCTYPE> declaration helps the browser to display a web page correctly.

There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.

Common Declarations


<!–DOCTYPE html>

HTML 4.01

<!–DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”



<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”


Example :

<!–DOCTYPE html>



<title>Title of the document</title>



The content of the document……



The <!–DOCTYPE> declaration is supported in all major browsers.

Definition and Usage

  • The <!–DOCTYPE> declaration must be the very first thing in your HTML document, before the tag.
  • The <!–DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
  • In HTML 4.01, the <!–DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
  • HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Tip: Always add the <!–DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

Differences Between HTML 4.01 and HTML5

  • There are three different <!–DOCTYPE> declarations in HTML 4.01. In HTML5 there is only one:

<!DOCTYPE html>

HTML Elements and Doctypes

  • Look at our table of all HTML elements, and what Doctype each element appears in.

Tips and Notes

Note: The <!DOCTYPE> tag does not have an end tag.

Tip: The declaration is NOT case sensitive.

Tip: Use W3C’s Validator to check that you have written a valid HTML / XHTML document!

Common DOCTYPE Declarations


<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

HTML 4.01 Frameset

  • This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”&gt;

XHTML 1.0 Strict

  • This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

XHTML 1.0 Transitional

  • This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

XHTML 1.0 Frameset

  • This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;


  • This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;

“Are You Ready Practice Your Writting For First Page?”

Writing HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:

Adobe Dreamweaver

Microsoft Expression Web

CoffeeCup HTML Editor

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML.

Follow the 4 steps below to create your first web page with Notepad.

Step 1: Start Notepad

To start Notepad go to:


All Programs



Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:



Step 3: Save Your HTML

Select Save as.. in Notepad’s file menu.

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

Save the file in a folder that is easy to remember, “Mywebpage”

Step 4: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.

The result should look much like this:

html document

About Aoqy

Hye guys,i would like to share about me and hired me if you would to do project with me.Overall,i like everything about design.anything as long i could create for you very soon.I just hope that i could help many people about development about thier company.So on my site is all about guide and how to develop more easier way to let your project much easier.so find out more .Many thanks
This entry was posted in Freelancer Course and tagged , , , , , , , . Bookmark the permalink.

117 Responses to Learn The Basic Html

  1. Fantastic website you have here but I was curious
    about if you knew of any discussion boards that cover the
    same topics talked about in this article? I’d really like to be a part of online community where I can get opinions from other knowledgeable individuals that share the same interest. If you have any recommendations, please let me know. Kudos!

    • Aoqy says:

      the best post share for increased your knowledge,i suggest you join any community Google + , Facebook, Linkedin.

      There’s a lot of plenty info and tips.


  2. Great delivery. Solid arguments. Keep up the amazing work.

  3. Good day! This post could not be written any better! Reading
    this post reminds me of my old room mate! He always kept chatting about this.
    I will forward this write-up to him. Pretty sure he will have a good read.
    Thank you for sharing!

    • Aoqy says:

      hey buddy,thanks for share my post with your friend.
      I really hope that this post could helping your friend for featured.

      keep in touch with us

  4. hidden cams says:

    Nice post. I was checking constantly this blog and I am impressed!
    Very useful information particularly the last part 🙂 I
    care for such information much. I was looking for this certain information
    for a very long time. Thank you and good luck.

    • Aoqy says:

      howdy,thanks for free your time here.I’m very happy you liked this post

      keep in touch with us,we’ve a lot article gonna publish very soon.


  5. What’s up, all is going nicely here and ofcourse every one is sharing facts, that’s truly excellent, keep
    up writing.

  6. Good post. I learn something totally new and challenging on blogs I stumbleupon everyday.
    It will always be exciting to read through articles from other
    writers and use a little something from other sites.

  7. What’s up, just wanted to say, I liked this blog post. It was inspiring. Keep on posting!

  8. Shawna says:

    Thanks for your time for composing “Learn The Basic Html |
    1stFreelancing”. I reallymight definitely be coming back for far more
    browsing and commenting here soon enough. Many thanks, Quincy

    • Aoqy says:

      you too.Thanks for free your time here.
      I’m very happy you liked.

      Keep in touch with us.If you had any suggestion,please let me know.

      Thank you.

  9. Kai says:

    I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire
    someone to do it for you? Plz respond as I’m looking to create my own blog and would like to find out where u got this from. thanks a lot

    • Aoqy says:

      this ia only my official blog for fun usage.

      we’re team web designer and developer.You could contact us anytime when you’re ready to develop your business.

      Many Thanks

  10. Ladonna says:

    Hi there! I just wanted to ask if you ever have any problems with hackers?
    My last blog (wordpress) was hacked and I ended up
    losing a few months of hard work due to no data backup.
    Do you have any solutions to protect against hackers?

  11. I have been surfing online more than 3 hours
    today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me. Personally, if all site owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

  12. wonderful publish, very informative. I’m wondering why the opposite experts of this sector do not understand this. You should proceed your writing. I’m sure, you have a great readers’ base already!

  13. Outstanding post however I was wanting to know if you could write a litte more on this subject?

    I’d be very grateful if you could elaborate a little bit more. Appreciate it!

  14. I am really impressed with your writing skills and also
    with the layout on your blog. Is this a paid theme or did you customize it yourself?
    Anyway keep up the excellent quality writing, it is rare to see a nice blog like this one these

  15. It’s going to be end of mine day, except before finish I am reading this impressive piece of writing to improve my experience.

  16. Spot on with this write-up, I actually think this website needs far
    more attention. I’ll probably be back again to read through more, thanks for the advice!

  17. Fantastic goods from you, man. I’ve understand your stuff previous to and you’re just too excellent.
    I actually like what you’ve acquired here, certainly like what you are stating and the way in which you say it. You make it entertaining and you still care for to keep it smart. I can’t wait to read far more
    from you. This is really a terrific site.

  18. It’s going to be ending of mine day, except before ending I am reading this wonderful post to improve my know-how.

  19. wonderful issues altogether, you just gained a brand new reader.
    What could you recommend in regards to your put up that you made some days
    in the past? Any positive?

  20. Very nice post. I just stumbled upon your blog
    and wished to say that I’ve really enjoyed browsing your blog posts.
    In any case I will be subscribing to your feed and I hope
    you write again very soon!

  21. I’d like to thank you for the efforts you’ve put in writing this website.

    I really hope to check out the same high-grade content from you later on as well.
    In fact, your creative writing abilities has encouraged me to get my own, personal website now 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s