Pin Me

How HTML Works

written by: S. R. Obbayi•edited by: Amy Carson•updated: 1/7/2011

Knowing how HTML works is key for the advancement of any serious web designer as this the key to why your website works as it does. So how does HTML work? Keep reading for the explanation

  • slide 1 of 3

    As I deal with the question, how does HTML work? I would first like to go ahead and explain what HTML is and how it relates to web browsers and the Internet and in doing so you I will also be giving you insights on how HTML works since all these individual elements are key when it comes to HTML working as it is supposed to.

    This web page that you are reading can be saved onto your computer by going to the file menu of your web browser or on Google Chrome you can right click on any page and follow the save menu item. If you try and open the page you just saved with a text editor you will find that it does not quite look like this web page. This is because you are viewing the HTML source code and your text editor does not know how to process the HTML code.

  • slide 2 of 3

    What Is HTML?

    HTML, which stands for HyperText Markup Language, is a computer language that wraps portions of text in angled bracketed tags that have defined meanings. HTML is also a language that has tags or instructions for pulling in additional text based documents and rich media, and going on to give instructions on how these should be formatted and laid out in the document.

  • slide 3 of 3

    How is HTML Processed?

    how html works Web browsers are the most commonly available software for processing or parsing HTML. Here is how that happens.

    For HTML to work it must be processed by a web browser. A HTML document starts off by defining the standards to use to process the markup contained within it using a DOCTYPE declaration. This article on DOCTYPEs gives more details on what DOCTYPEs are.

    The information in the DOCTYPE tells the browser what Document Type Declaration (DTD) to use to parse the rest of the HTML Document. This DTD contains rules that describe how elements should be placed, and how they relate with each other.

    The web browser starts off by parsing everything contained within <head> tags. The information within the head tags is of meta data nature. This data is normally not visually displayed but gives the web browser and other applications such as search engines instructions and additional information on what the web page is about, any further layout instructions, and scripting access.

    Next the section of the HTML document wrapped within <body> tags is parsed. This content is expected to appear on the screen of the web browsers. The tags and their attributes here onwards, simply tells the web browser what to do with the content within the tags. Looking at the following text for example.

    <p>This is normal text with <span style="color:red">this portion being red</span> and <span style="color:blue">this section being blue</span> all of which is one paragraph.</p>

    <p>This is another paragraph with no further styling</p>

    The image above shows the output of this markup text. Here the web browser parses this enter text and comes across two occurrences of <p>. According to the DTD this means that portion of text must be a paragraph. In this case we have two of them.

    The next thing the web browser finds is a <span> and knows how to handle it based on the DTD. In this case the <span> has other attributes describing the style of that block of text. The style described here is the color. The web browser takes all the text within those tags and renders them as red text and does the same for the other <span> but this time making the text blue.

    By examining the example text above we can safely say that HTML works by wrapping bits of content in various tags, the meaning of which is described in another document called the DTD which the web browser software uses as a layout and rendering guide.

    There you have it, your answer to the question, How does HTML work? You can read more and learn how to choose the best DOCTYPES for your web pages.