Difference between HTML, DHTML and XHTML | web stand

Difference between HTML, DHTML and XHTML

0

Back in the day, there was only HTML and you had to write your web code by hand. Now higher-level languages can do most of the hard stuff for you and make life easier. Object oriented programming and Frameworks can even make it so you do not even have to code a single line. However, and the heart of it all HTML still runs the show and you need to understand the difference between the various forms of HTML you will run into. Today you are going to learn about the differences between HTML, HTML5, DHTML, and XTML. All of these languages are part of the HTML family; their file extension is “.HTM” or “.HTML”. They’re very similar to each other and widely used over the web. For a web developer, knowing them and their differences is a necessity.

HTML

HTML (Hypertext Markup Language) is not a programming language. Its purpose is to declare the elements that a page is made of. So, the web browser can understand what each part of it is. It also describes the structure of the websites semantically. Together along with JavaScript, CSS, and HTML make up the most common technology used in creating web pages. HTML is mainly used for web pages, applications, and user interfaces.

HTML defines each element by declaring it as: headline, paragraph, image, video, quote, list, form and In fact, it can be used to describe the above and any other element that exists on the web. The web browser interpreting the HTML code is the interface to present the completed web page to the user.

HTML versions

Nov 1995 HTML 2.0‏
Jan 14 1997 HTML 3.2‏
Dec 18 1997 HTML 4.0‏
Dec 24 1999 HTML 4.01
Oct 28 2014 HTML5‏

 

HTML syntax

The language syntax is very simple; there is an opening tag and a closing tag defining what each element is. (Some tags do not use a close tag such as <link> ) Between the tags, we find the element’s content. For example  <h1> website review</h1>.

When the browser “see” this code it understands that the content inside those tags is a first level tag or headline (h1 = first level headline). The number 1 signifies that this is a main headline. There are various other headline tags that represent a hierarchy of lower-level headlines (<h2>, <h3>…) and continues downward for however many levels you require.

HTML structure

The code structure is also very simple, it opens with a tag that declares that this is an HTML document (<!DOCTYPE html>), next, another <html>  tag and then two more basic tags: the <head> tag where all the general information about a page is inside a <body>  tag that contains all the elements that the user sees like headlines, paragraphs, and images.

<!DOCTYPE html>
<html lang="en">
<head>
     <title>webstand</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">   
     <link rel="stylesheet" href="css/main.css">
    <script src="js/modernizr.custom.js"></script>
</head>
<body>
     <article>
       <h1>learn how to build a website</h1>
       <button class="dl-trigger" id="button2" onclick="chgparagraphsize()"></button>
       <p class="date"> 5/20/2016</p>
       <p id="content">
       if you are interested to learn how to build websites you have reached the right place. we have the best teachers in the world who will make you an expert. try our courses for free and subscribe to our monthly mailing.
       </p>
     </article>
 </body>
 </html>

Code explained– there is a button and when you click on it calls a function called “ChgParagraphSize()” that executes. The function is in a separate file called “modernize.custom.js”. There is also a file named main.css , You can see that in the <head>  tag that these JAVASCRIPT and CSS files relate to the HTML page. This is the basics how JavaScript and CSS code relate to HTML.

HTML5

HTML5 is the web’s newest standard that was introduced in 2014. New developers today learn this one as their first language. It added more structured tags to HTML such as <article>, <section>, <header> and <footer>. It also replaced specific tags in multimedia tags such as <video>, <audio> and <canvas>.

DHTML

DHTML (Dynamic Hyper Text Markup Language), which in reality is in HTML framework that turns a web page from static to dynamic. Usually, HTML code just describes the structure while CSS code determines the design of the page. In most cases, CSS code is stored in a separate file. The HTML code that “calls” the CSS file is inside the <head>  tag and it looks like this: <link rel=”stylesheet” href=”Main-CSS”>.

The styles that are in C it a CSS file can also be found inside the HTML file. In the <head> tag, you can put a <style> tag that is called and put the CSS code inside it. The same thing is true with JavaScript code. That is also held in a separate file. However, you can also add it inside a <script>  tag as well. When an HTML file has CSS and JavaScript code inside it the page will be a DHTML web page like this one:

<!DOCTYPE html>
<html lang="en">
<head>
     <title>webstand</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
        h1 {
        font-size: 12px;
        background-color: blue;
        }
        .date {
        padding: 3px;
        border-bottom: 2px solid yellow;
        }
</head>
<body>
     <article>
       <h1>learn how to build a website</h1>
       <button class="dl-trigger" id="button2" onclick="chgparagraphsize()"></button>
       <p class="date"> 5/20/2016</p>
       <p id="content">
       if you are interested to learn how to build websites you have reached the right place. we have the best teachers in the world who will make you an expert. try our courses for free and subscribe to our monthly mailing.
       </p>
     </article>
 <footer>
    <script>
        function chgparagraphsize() { 
           var x =  document.getElementById("nav").style.height;
           if (x == '236px') {document.getElementById("nav").style.height= '96px';}
           else  {document.getElementById("nav").style.height= '236px';}
         }
    </script>
 </footer>
</body>
</html>

Code explained-  The Code explained – in this example, the JavaScript and CSS code are not in separate files, they are inside <script> and a <style> tags. You can see the JavaScript function in there. In the previous example of code, this function was in a different file. It is better to put the scripts in the footer and this makes a web page load faster.

XHTML

XHTML (Extensible Hypertext Markup Language) is actually very similar to HTML. However, it has a bit more strict syntax. HTML will “forgive” you if you forget to close some tags for use uppercase or lowercase letters. That means that when a web browser gets bad HTML code it understands what you meant and shows the user a well-structured web page. However, this is not the case with XHTML, which requires that you need to be more accurate with your coding. In the year 2000, the W3C set XHTML as the web standard so all HTML code will look the same to all browsers. Since then it has been superseded in 2014 and HTML5 is now the new standard for the web and the creation of web pages.

Final thoughts

There you have it. HTML in its current incarnation and the previous iterations as well. Even as we speak a new standard is being discussed, as the web requires, even more functionality and speed. But, for right now HTML5 is the way to go. But you will find all the rest we’ve talked about today as well. So, learn HTML5 but bone up on the others if you are going to be editing legacy web pages or taking over from a developer who used one of the other variations of HTML. In this way, you will be a better developer and able to handle any piece of code you’ll find on the web.

Featured image credit: “HTML5 cup” by slavik_V, license under CC BY 2.0

Share.

Leave A Reply

eleven + 14 =

Top