HTML Document Basics

Tonight's topics

  • HTML Document structure
  • Elements and Attributes
  • Anchors and Links

Document Stucture

  • The HTML document structure is a logical series of containers
  • The major tags - HTML, HEAD and BODY, are the primary containers
  • These tags allow us to control the structure of our documents as well as the format

Elements and Attributes

HTML Elements

  • Consist of opening tag, content and closing tag
  • The content is usually consider the actual element; the tags are considered the enclosure of the elements
  • Elements are semantic components - relating to the language and logic of you website, as opposed to the format and layout

HTML Attributes

  • Attributes define a property or characteristic of an element
  • Attributes consist of key/value pairs - i.e.: border="2". In this example, border is the key, and 2 is the value
  • Elements can contain multiple attributes
  • Attributes are contain inside the elements opening tag

Anchors and Links

  • The tag, <A>, indicates either an  anchor or a hyperlink
  • "Anchors" are internal - links to parts of the same HTML document
  • "Hyperlinks" are external - links other HTML documents, either on the same website or other websites
  • You can create a hyperlink to an anchor in an external document

<A> element

  • The main <A> element attribute is href, the key of which is the address of the website
  • The content of the anchor element is the link text that will be underlined and "clickable"

<A> element, cont'd

  • The name key is used to create an "anchor" to a location within the same document <a name=AWord">
  • The href attribute links to the anchor like this: <a href="#AWord>

<A> element - other attributes

  • "title=" - this is the key for the text that appears when you hold your mouse cursor over the link text; the value is the actual text
  • "target=" - this is the key that tells the browser how to open the hyperlink. The most common values are:
    • "_blank" = open hyperlink in new web page (or tab)
    • "_self" = open hyperlink in the same web page or tab
  • The underscore ("_") is part of the target value