Web Development & Design 1
HTML Basics: Tags and Elements

  • <!DOCTYPE>
    • It is a Document Type Definition (DTD) and it is not an HTML tag.
    • It must always be placed on the first line of the HTML code
      • <!DOCYTPE html>
    • The <!DOCTYPE> tells the web browser about what version of HTML the page is written in.
      • There are multiple version of HTML (HTML, XHTML, HTML4, HTML5)
    • The following are the different declarations of fo DTD for each version of HTML
      • HTML5(lastest version): <!doctype html>

      • HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

      • HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • <html></html>
    • All of the HTML elements goes inside the <html> container, except for <!DOCTYPE>

  • <head></head>
    • This is the head element. This element cotains other tags that is title of the document, scripts, styles, and meta information.
      Below is the list of elements that goes inside the <head> tag
      • <title> (this element is required in an HTML document)
      • <style>
      • <link>
      • <meta>
      • <script>

  • <title></title>
    • It displays the title of the web page on the tab of the browser.
    • It is required for all HTML files
    • It shows the title of the page in the favorites
    • The title is also shown in the search-engine results.
  • <meta>
    • Metadata contains information or data for the web page. Metadata will not be displayed on the page.
    • Metadata can contain the web page description, keywords, author of the document, and other meta data. This information is used to increase the chances of the search engine finding your site.
    • The <meta> tag is also used to tell the browser to adjust its width when it loads on a mobile device
      • For example
        <meta name="viewport" content="width=device-width, initial-scale=1">
        • This tells mobile devices to keep web pages in it’s original size.
      • <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        • This prevents the user from rescaling the website on their mobile device.
  • <body></body>
    • The body element contains all of the content of an HTML document that will be displayed on the browser window. This content includes text, hyperlinks, images, video, forms, tables, lists, etc.
    • NOTE: HTML5 no longer supports layout attributes for <body>.

  • <h1></h1>, <h2></h2>, <h3></h3>,<h4></h4>, <h5></h5>, <h6></h6>
    • These tags define the heading elements, which has 6 levels; <h1> to <h6>
    • <h1> displays the heading text in the largest font.
    • <h6> displays the heading text in the smallest font.
    • Example:

    • Heading 1

    • Heading 2

    • Heading 3

    • Heading 4

    • Heading 5
    • Heading 6


  • <p></p>
    • This is a paragraph element, which groups sentences and sections of text together.
    • The margin and spacing are automatically added to the <p> tag.
    • This element displays as a "block".

  • <br>
    • This line break element, tells the HTML file to create a new line
    • It is not coded as a pair of opening and closing tags.
      • It is a stand-alone, or void element.
  • <ul></ul>
    • It defines an unordered list (bulleted)
      • you will need to use it together with a list item,<li></li>,  to create unordered list
      • A disc or circle is generated in front of a list element.
      • <ul>
        <li> List Item 1</li>
        <li> List Item 2 </li>
        </ul>
  • <ol></ol>
    • This tag defines an ordered list. An ordered list can be numerical or alphabetical.
      • you will need to use it together with a list item,<li></li>, to create unordered list
      • <ol>
        <li> List Item 1</li>
        <li> List Item 2 </li>
        </ol>
  • <blockquote></blockquote>
    • It is used to display a block of quoted text in a special way.
      Below is an example:
      <blockquote cite="http://www.worldwildlife.org/who/index.html">
      World Wild Life Fund
      </blockquote>
  • <img>
    • It defines an image in an HTML page
    • It is not coded as a pair of opening and closing tags.
    • The <img> tag requires two attributes: src and alt
    • Images are NOT inserted into the HTML page. The <img> tag creates a place holder for the referenced image.
    <img src="project2.5/cake.jpg" width="131" height="73" alt="cake">
    cake
  • <a>
    • Anchor Tag: This defines a hyperlink, which allows you to link to another web page or a file
    • By default, in all browsers the hyperlink is underline.
    • The hyperlink has three default colors depending on the users actions
      • an unvisted link is shown blue
      • A visited link is purple
      • An active link is red
      • <a href="http://newutrechthighschoolnyc.com">New Utrecht High School</a>