Introduction to HTML

What is HTML?

HTML is the standard markup language for creating Web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

A Simple HTML Document

Example

Page Title

My First Heading

My first paragraph.

Try it Yourself »

Example Explained

  • The declaration defines this document to be HTML5
  • The element is the root element of an HTML
    page
  • The element contains meta information about the document
  • The element specifies a title for the document</li> <li>The <body> element contains the visible page content</li> <li>The<br /> <h1> element defines a large heading</li> <li>The <p> element defines a paragraph</li> </ul> <h2>HTML Tags</h2> <p>HTML tags are element names surrounded by angle brackets:</p> <p><tagname>content goes here…</tagname></p> <ul> <li>HTML tags normally come <b>in pairs</b> like <p> and </p> <!-- WP QUADS Content Ad Plugin v. 1.8.8 --> <div class="quads-location quads-ad4" id="quads-ad4" style="float:none;margin:0px;"> <!-- WP QUADS - Quick AdSense Reloaded v.1.8.8 Content AdSense async --> <script async data-cfasync="false" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script type="text/javascript" data-cfasync="false"> var quads_screen_width = document.body.clientWidth; if ( quads_screen_width >= 1140 ) { /* desktop monitors */ document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px;" data-ad-client="pub-2723567151304887" data-ad-slot="7285033589" ></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); }if ( quads_screen_width >= 1024 && quads_screen_width < 1140 ) { /* tablet landscape */ document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px;" data-ad-client="pub-2723567151304887" data-ad-slot="7285033589" ></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); }if ( quads_screen_width >= 768 && quads_screen_width < 1024 ) { /* tablet portrait */ document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px;" data-ad-client="pub-2723567151304887" data-ad-slot="7285033589" ></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); }if ( quads_screen_width < 768 ) { /* phone */ document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px;" data-ad-client="pub-2723567151304887" data-ad-slot="7285033589" ></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); }</script> <!-- end WP QUADS --> </div> </li> <li>The first tag in a pair is the <b> start tag,</b> the second tag is the <b> end tag</b></li> <li>The end tag is written like the start tag, but with a forward slash<br /> inserted before the tag name </li> </ul> <p>Tip: The start tag is also called the <b>opening tag</b>, and the end tag the <b>closing tag</b>.</p> <h2>Web Browsers</h2> <p>The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them.</p> <p>The browser does not display the HTML tags, but uses them to determine how to display the document:</p> <p><img alt="View in Browser" src="http://www.w3schools.com/img_chrome.png" /></p> <h2>HTML Page Structure</h2> <p>Below is a visualization of an HTML page structure:</p> <p><html> </p> <p><head> </p> <p><title>Page title

    This is a heading

    This is a paragraph.

    This is another paragraph.

    Note: Only the content inside the section (the white area above) is displayed in a browser.

    The Declaration

    The declaration represents the document type, and helps browsers to display web pages correctly.

    It must only appear once, at the top of the page (before any HTML tags).

    The declaration is not case sensitive.

    The declaration for HTML5 is:

    HTML Versions

    Since the early days of the web, there have been many versions of HTML:

    Version Year
    HTML 1991
    HTML 2.0 1995
    HTML 3.2 1997
    HTML 4.01 1999
    XHTML 2000
    HTML5 2014

    Source

Leave a Reply

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