How HTML Works

What is HTML?

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.
How HTML works in really simple terms

HTML is “spoken” by two computers:
1. Client
The client is used by the person surfing the net, such as the computer you are looking at right now.
2. Server
A server stores and distributes websites over the net. I have a server where I store this web site.
The terms are often encountered in the phrases “server-side” and “client-side”; meaning something occurs on the server or the client. “That script runs client-side.” means “That script runs on the client”.

Basic HTML Content

Basic HTML Content

This is a very basic sample of HTML coding.

Media Elements and the Flash Rivalry

 

  • audio — embeds audio in the page and includes attributes for specifying how to play it; supported file formats will vary between Web browsers
  • video — embeds video in the page and includes attributes for specifying how to play it; supported file formats will vary between Web browsers
  • source — used with audio or video elements to identify a source; multiple sources could be specified for a single item
  • embed — embeds and specifies the media type for content that might lack support within other media elements
  • canvas — sets aside part of the page, or the computer screen, where JavaScript can draw images; coming up, we’ll find out more about how this important new feature works
  • svg — embed vector graphics encoded with SVG markup language, allowing them to be scaled dynamically to the area of the page in which they’re loaded without losing any graphic quality

The tags: (click on tags to more information about tags)

HTML-5-tutorial

    W3C

    W3schools

HTML-5-tutorial

  • <kbd>
  • <keygen>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <map>
  • <mark>
  • <menu>
  • <meta>
  • <meter>
  • <nav>
  • <noframes>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <pre>
  • <progress>
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <source>
  • <span>
  • <strike> 4
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <tt>
  • <u>
  • <ul>
  • <var>
  • <video> 5
  • <wbr>
    W3C

    W3schools

 

Source : html-5-tutorial

Every opening tag has closing tag. Example- <html> and<div> is opening tag and their closing tags are </html> and </div> respectively. The difference being the “/” in the closing tag. Number of opening must be equal to number closing tag. If you forget to type closing tag you will get error in code like closing tag is missing.

Example of Correct code:

<div class=”outer-div”>
This div tag
<div class=”inner-div”>
contains this div tag.
</div>
</div>

Output of Code:

This div tag

contains this div tag.
To view html source code of any webpage, right click of empty area of webpage then click on “View Page Source” or press “Ctrl+U” shortcut keys.
<!DOCTYPE html> goes at the top of every HTML5 page.
If you want to see how html code works, make a free blog on Blogger, create a post then click on HTML, Write your html code then click on  COMPOSE, to see output of your written code. As long you play with html code you will understand how html works. You can add Images, Videos, Tables, Links, different heading tags, anything you want with help of HTML Code.
Sources :
  1. [Wikepedia]
  2. [html-5-tutorial]

Ravindra Paradhi

Engineer & Blogger.

Leave a Reply