HTML5 Tutorial
Posted inHTML

HTML5 Tutorial

7Posted inHTML
HTML

HTML – The full form of HTML is: Hypertext Markup Language.

Nowadays, even the most ordinary person has their own website.

You can design and create your own website using HTML.

We have presented this HTML tutorial in a very simple way so that you can easily learn the entire HTML and design your own website without hiring a developer.

Learning HTML is very easy and we hope you enjoy this tutorial.

Each chapter of the HTML tutorial has numerous example sections. If you hover your mouse over the example section, copyyou will see a code option in the top corner. copyClicking the option will copy the code to the clipboard.

You can open your editor and paste the copied code. The example results are also shown below in the Examples section.

Example
				
					<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
</head>
<body>

<div id="ez-toc-container" class="ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title" style="cursor:inherit">Table of Contents</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-1" href="#This_is_a_heading" >This is a heading</a></li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-2" href="#This_is_a_heading-2" >This is a heading</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#QUICK_LEARN" >QUICK LEARN</a></li></ul></li></ul></li></ul></nav></div>
<h1><span class="ez-toc-section" id="This_is_a_heading"></span>This is a heading<span class="ez-toc-section-end"></span></h1>
<p>This is a paragraph.</p>

</body>
</html>
Output
HTML Example

This is a heading

This is a paragraph.

HTML versions at a glance
Version Year
HTML 1991
HTML(2.0) 1995
HTML(3.2) 1997
HTML(4.01) 1999
XHTML 2000
HTML(5) 2014
What is HTML?
HTML is a markup language for describing web documents.

  1. The full form of HTML is Hyper Text Markup Language .

  2. A markup language refers to a set of markup tags.

  3. HTML documents are created using HTML tags .
Structure of HTML page

The structure of an HTML page is shown below:

HTML5 Tutorial

Only <body>the section content is displayed in the browser.

A very simple HTML document
Example 
				
					<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h3><span class="ez-toc-section" id="QUICK_LEARN"></span>QUICK LEARN<span class="ez-toc-section-end"></span></h3>
<img loading="lazy" decoding="async" src="../images/quicklearn.png" alt="quicklearn" height="142" width="142">

</body>
</html>
Output
HTML5 Tutorial

HTML5 Tutorial

Detailed explanation of the above example:

  1. <!DOCTYPE html> Declared to set the document type . It refers to HTML5, the latest version of HTML.

  2. <html> And </html> the contents between the tags describe the HTML document.

  3. <head> And </head> the content between the tags provides additional information for the HTML document.

  4. <title> And </title> the text between the tags sets the title/name of the document.

  5. <body> And </body> the contents between the tags are displayed on the web page.

  6. <h3> And </h3> the tag creates a heading/title for the document. The heading tag emphasizes the importance of the content.

  7. <img> Different types of images/pictures are displayed in the browser through tags.
HTML tags
  • HTML tags are usually found in pairs, such as <p>and </p>.

  • The first tag in the pair is called the opening tag and the second tag is called the closing tag .

  • Closing tags are written in the same way as opening tags, except that a forward slash (/) is placed before the tag name.
< !DOCTYPE> declaration
    • <!DOCTYPE>The declaration sets the document type and helps a web page display correctly in the browser.

    • This is the first tag of any web document, meaning that this tag only needs to be written once, before all HTML tags.

    • There are different document types and versions, so the browser needs to know both the type and version to display the web page correctly.

    • The DOCTYPE declaration is not case-sensitive. It accepts both lowercase and uppercase letters.
				
					<!DOCTYPE html>
<!doctype HTML>
  • <!DOCTYPE>Declarations in different versions of HTML:
HTML(5) 
				
					<!DOCTYPE html>
HTML(4.01) 
				
					<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML(1.0) 
				
					<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Chapter summary
  1. I learned about all versions of HTML.

  2. I learned about the structure of HTML pages.

  3. <!DOCTYPE>I learned about the differences in declarations in different versions of HTML.
HTML reference

In SAT Academy’s HTML reference, you will find a complete reference for tags, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, etc.

Tags:

7 Comments

  1. seo backlink services
    Reply
    January 16, 2025,

    Howdy! This post couldn’tbe written any better!
    Reading through this post reminds me of my previous room mate!

    He always kept talking about this. I will forward this article
    to him. Fairly certain he will have a good read. Many thanks
    for sharing!

  2. batas de boda
    Reply
    January 16, 2025,

    Además dе “batas damas de honor”, deƅes consіderar el uso de palabras clave de cola larga relacionaɗas, como “batas de seda para damas de honor” ᧐ “batas personalizadas para damas de honor”.

  3. Best SEO Backlink Services
    Reply
    January 17, 2025,

    whoah this blog is excellent i like reading your articles.

    Stay up the great work! You realize, lots of individuals are searching round for this info,
    you can help them greatly.

  4. WordPress Backlinks
    Reply
    January 17, 2025,

    My spouse and I absolutely love your blog and find almost all of your post’s to be
    just what I’m looking for. Does one offer guest writers to write content to
    suit your needs? I wouldn’t mind writing a post or elaborating on most
    of the subjects you write with regards to here.
    Again, awesome blog!

  5. Alergare
    Reply
    January 19, 2025,

    Echipamentul corect ewte vial în alergarea montană. Un antrenor alergare montană te poate ghida în selectarea echipamentului potrivit pentru tipul
    de teren pe care alergi.

  6. blocked drains kingston
    Reply
    January 25, 2025,

    Wow! Afer aⅼl I got a website fгom ᴡһere Ι bе capable of genuinely obttain helpful data гegarding mｙ study
    and knowledge.

  7. Private Proxies Cheap
    Reply
    February 13, 2025,

    Excellent way of explaining, and pleasant piece of writing to obtain facts on the topic
    of my presentation subject matter, which i am going to deliver in university.

Leave a Reply

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