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