HTML BASICS

WHAT IS HTML AND XML?

HTML is the standard markup language for creating Web pages.

HTML and XML use a series of symbols (called tags) that are instructions that tells a browser how to display a page (HTML) or how to structure data (XML).

A set of tags (e.g., <p> ... </p> is called an element which usually consists of a start or opening tag and an end or closing tag with content inserted in between them:

<tagname>Content goes here...</tagname>

 

NOTE: HTML elements with no content are called empty elements. Empty elements do not have an end tag. Examples of empty tags include:

NOTE: HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

HTML and XML

HTML stands for HyperText Markup Language.

XML stands for EXtensible Markup Language.

Let's define what each of these words refer to:

NOTE: There are other MARKUP languages:

XHTML vs HTML5

XHTML (Extensible Hyper Text Markup Language) was developed in 2000 and is hybrid of HTML 4 with a set of strict XML 1.0 standards allowing a document to be parsed easily by web browsers. All XML syntax requirements are included in a well formed XHTML document. XHTML is a stricter language:
Must have mandatory document structure:

Attributes must be:

Examples:

Wrong: <input type="checkbox" name="vehicle" value="car" checked/>
Correct: <input type="checkbox" name="vehicle" value="car" checked="checked" />

Elements must be:

HTML5 has replaced XHTML as a newer standard. It is basically HTML made easy for most developers because it relaxes some of the rules that was imposed by XHTML. Advantages of HMTL5 include:

New features include:

Character Entities or Special Characters

Some characters (e.g., angle brackets:<>) are reserved in HTML because the browser might confuse them with HTML tags. So, character entities are used to display reserved characters in HTML.

HTML uses a set of special characters that are needed in a page that cannot be TYPED themselves. Below are several examples when this is needed:

NOTE: A non-breaking space is a space that will not break into a new line. This is useful when breaking two words might be disruptive

Examples:

Another use is to prevent browsers from removing spaces in HTML pages. To add real spaces the &nbsp; character entity is used.

TIP: The non-breaking hyphen (&#8209;) lets you use a hyphen character that won't break.

NOTE: All entities start with "&" and ends with a semicolon (;).  Because HTML recognize the "&" sign as the start of an entity; if an "&" is intended to be used in the tag, it has to be created as an entity itself (i.e., &amp;). You can also use number as entities (e.g., &#100). Since all entities do not have names, numbers may be  your only option. You can go to this web sites for a list of entities: http://www.unicode.org/charts/

NOTE: Because a browser will not recognize REturns, most Spaces and Tabs (think REST), you need to used non-breaking spaces to add spaces. The reason you may want to add these items (Returns, Spaces or Tabs) in the authoring environment is to make the code easily for YOU to read. Dreamweaver will add these automatically when you press the spacebar. HTML only recognize single space (except for preformatting tag <pre>). In order to add additional spaces, you need to an &nbsp; entity.

HTML FRAMEWORK

Let's look at the three major tags that make up the HTML framework and what can be included in them.



EXCEPTION: The <html> element contains all content and code except for dynamic code (e.g., ASP, PHP, and CF) that must be loaded before the page content.

The root element contains all the code and content, with the exception of any dynamic code that must load before the page content itself. This dynamic code is usually written in web programming languages such as ASP, Cold Fusion, or PHP.

NOTE: The <head> tag specifies INFORMATION about the page not its CONTENT. The <body> tag specifies CONTENT and not information about the page.

It's helpful to think of the HTML framework and compare it to the human body:

NOTE: The head elements are ABOUT the page; whereas, body elements are what you can SEE on the page.

The <!DOCTYPE> Declaration

The DOCTYPE is not actually a regular HTML tag but a HTML comment that is recognized by a browser. The <!DOCTYPE> declaration represents as the name implies, the document type and helps a browser to display the web page correctly. It only appear once at the top of the page (before any HTML tags). The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

CONTAINERS, CONTAINERS, CONTAINERS EVERYWHERE

It is important to understand some key concepts before starting to work with HTML tags. HTML tags are represented mostly by a set of angle brackets ("<" and  "/>") with pre-defined names between them (e.g., <p>This is a paragraph.</p>).  The tag pair AND its content is normally called an ELEMENT.

XHTML uses PRE-DEFINED elements to describe how the content will be FORMATTED or LAYOUT. For example,

XML uses USER-DEFINED elements that do not describe the format but the DATA CONTENT in them.  For example, a tag named <firstname> usually specify that the first name of a person is the DATA content for that element.

MEMORY TIP: Because XML can be created with a simply text editor and the tag are self-describing and can be use as a database. It is helpful to think of XML as a WELL-FORMED POOR-MAN SELF-DESCRIBING VERTICAL UNIVERSAL DATABASE. The term vertical refer to the fact that the elements (or nodes) are arranged vertically from top-to-bottom.  In a normal database (flat (e.g., Excel) or relational (e.g., Access, MySQL, etc.)) the data is arranged horizontally in what is referred to as fields in a database with each row as a record as opposed to a node in XML.

HTML ATTRIBUTES

Before we talk about HTML tags, we need to understand another concept: - attributes.

All HTML elements have one or more attributes that is used to provide additional information about a specific HTML element.

Some attributes are required while others are optional or highly recommended. For example, to create a image you need to use the required "src"attribute as well as the height, width and alt attribute for non-decorative image:

For example.

<img src="myimage.jpg" height="100" width="100" alt="This is a description of my image"/>

COMMON TAGS

Apart from the HTML framework tags (html, head, body, title, etc.) that are created for you automatically in Dreamweaver when you create a page, below is a series of common tags that are used on most pages:

It is helpful to think of most elements as discrete CONTAINERS on a page.  Let's examine some common containers:

Heading Tags: <h1> to <h6>

<h1> to <h6> tags - are used to define various heading levels. They should be nested correctly.

Example in CODE View:

<h1>This is a heading level 1</h1>
<h2>This is heading level 2</h2>

 

Result in DESIGN View:

This is a heading level 1

This is heading level 2

Paragraph Tag: <p>

<p> element – is a container that has a paragraph break.  This simply means that it will add white space before and after its container element.

Example in CODE View:

<p>This is a paragraph.</p>
<p>This is another paragraph. Notice the space before and after each paragraph.</p>

Result in DESIGN View:

This is a paragraph.

This is another paragraph. Notice the space before and after each paragraph.


NOTE: To prevent adding spaces between paragraphs, you can add a line break <br /> tag.

Example in CODE view:

<p>This is a paragraph <br /> This is another paragraph. Notice there is only a small amount of space between the two paragraphs.</p>

NOTE: In Code View, the break tag is in between the two paragraph tags.  Another way of explaining this is that the line break tag "breaks" the line but NOT the paragraph or the line break tag breaks the paragraph across multiple lines.  To add a line break in Design view press the SHIFT+ ENTER keys together.  The <br /> tag is usually enclosed inside a set of <p> tags; however, it can be used with other block-level tags.

Result in DESIGN view:

This is a paragraph.
This is another paragraph. Notice there is only a small amount of space between the two paragraphs.

NOTE: This <br /> tag is one of a few self-closing tags. The <hr /> and <img /> are also self-closing or empty tags.

Link Tag: <a>

<a> element – is a container that is used to create a variety of links. The <a> tag must have a required "href" attribute

Example in CODE View:

<a href="http://www.google.com">This is a link to Google.</a>

 

NOTE: The href attribute specifies the link destination address (https://www.google.com).

Result in DESIGN View:

This is a link to Google.

NOTE: The link above will replace the current page with the link href. To open the link in a new browser, add target = "new" attribute.

Example in CODE View:

<a href="http://www.google.com" target="new">This is a link to Google that opens in a new window.</a>

Result in DESIGN View:

This is a link to Google that opens in a new window.

Image Tag: <img>

<img> element – is a container that is to used to create an embedded image from an outside source. The <img> tag must have a required "src" attribute.

Example in CODE View:

<img src="images/Bird_Of_Paradise.jpg.jpg" width="300" height="200" alt="Bird of Paradise Flower"/>


NOTE:The image is located in a folder called images. The alt attribute value can be read by screen readers like JAWS or NVDA to read the alt text to a vision impaired user.

Result in DESIGN View:

Button Tag: <button>

<button> element – is a container that is used to create a button.

Example in CODE View:

<button>Open a dialog box</button>


Result in DESIGN View:



NOTE: In order to make the button useful, it has to be give some code.

<button onclick="alert('Hello, World')">Open a dialog box</button>


CAUTION: Pay attention to the single and double quotes.

Result in DESIGN View:



NOTE: The onclick attribute is a simple way to assign code to a button. You will learn more on how to do this later with JavaScript.

HTML Formatting Tags

There are several HTML formatting tags that are designed to display special text types: These tags are self-explanatory:

HTML Quotation & Citation Tags

There are several quotation and citation tags:

SPECIALIZED TAGS

There are two specialized tags that are used often along with CSS.

Division Tag: <div>

<div> element (page divisions) – is a generic empty container with NO paragraph breaks (or spaces before or after its container element) and you can place any other XHTML element in them.

Example in CODE View:

<div>This a my first div element</div>
<div>This is my second div element. Notice how they stack on top of one another in Design view without any space between them</div>

Result in DESIGN View:



This a my first div element
This is my second div element. Notice how they stack on top of one another in Design view without any space between them

 

Another way to think of the <div> elements is to consider them as generic empty containers that are used to DIVide the page into discrete areas (i.e., header, sidebar, main content and footer). 

NOTE: It is a best practice to NOT use a <div> element if there is an existing element that can be used as a container.  For example, if you are using a list for the navbar, there is no need to wrap it with a div element – a ul element can be used instead.

<div id="navBar">
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
    </ul>
</div>

instead use:

<ul id="navBar">
    <li>Home</li>
    <li>Products</li>
    <li>Services</li>
</ul>

NOTE: There is no <div> element used in the second example.

Span Tag: <span>

<span> element – is a neutral container that serve no other purpose than to "contain" a "span" of selected text, as the name implies. So if you make a selection without selecting the complete tag sets, Dreamweaver will "wrap" that selection in a <span> tag so you can apply CSS to it.

Example in CODE View:

<p>This is some text that has been selected and a class attribute (class="spanexample") has been added to the span element that was automatically created when the class style was applied to <span class="spanexample">this portion of the paragraph text that was selected. </span>  Span elements only work with CSS styles (i.e., class/ID) that will be discussed later.</p>

Result in DESIGN View:

This is some text that has been selected and a class attribute (class="spanexample") has been added to the span element that was automatically created when the class style was applied to this portion of the paragraph text that was selected. Span elements only work with CSS styles (e.g., class/ID) that will be discussed later.

CSS class that was used but will be discussed later:
<style>
.spanexample {color:red;}
</style>

NOTE: The <span> tags are  AUTOMATICALLY created when you select a PORTION of text and then apply a format to it.

Comment Tag: <! -- Comments goes here -->

Comment tags are used to:

Note: Comments are not displayed by the browser.

OBJECTS, OBJECTS, OBJECTS EVERYWHERE

Secondly, it is helpful to think of most elements as discrete OBJECTS on a page.  While containers "contain" things. Objects have "properties."   Remember, element's attributes can be thought of as properties of a given element.  For example, height and width can be thought of as properties of the <img> object.

NOTE: It is important to note also that containers can be objects and objects can be containers.

BLOCK-LEVEL vs INLINE ELEMENTS

Thirdly, it is important to understand how elements are arranged in a page by default.

RULE: In the absence of any positioning techniques using CSS that will be explained later, page elements will be arranged one after another in the NATURAL ORDER in which they appear in the HTML code. However, where they position themselves depend if they are block level or inline elements.

Block-level Elements - STAND ALONE elements

BLOCK ELEMENTS (e.g., <p>, <div>, <blockquote>, <table> elements) will:

MEMORY TIP:   It is helpful to think of block elements as paragraph formatting (e.g., line height/leading, paragraph spacing, etc.) in a word processing application.

Below is a list of block level elements:

<address> <canvas> <dt> <footer> <hr> <noscript> <table>
<article> <dd> <fieldset> <form> <li> <ol> <tfoot>
<aside> <div> <figcaption> <h1>-<h6> <main> <p> <pre> <ul>
<blockquote> <dl> <figure> <header> <nav> <section> <video>

 

Example: The following paragraphs have been styled with CSS (See CSS Manual) so that you can "see" these three characteristics more clearly:

This is a paragraph that has been styled with CSS

This is another paragraph that has been styled with CSS

NOTE: Notice the three rules: 100% of its parent container -- the body element, stacked top to bottom and space between them using the following CSS (p { border: solid 1px blue; })

Inline Elements - EXIST WITHIN other elements

INLINE ELEMENTS (e.g., <a> <img>, <q>, <span>, <strong>, <em>) are just the opposite of block-level elements, they will:

NOTE: Most formatting (inline and block-level) is done via CSS. The exceptions to the rule is the <strong> and <em> tags.

Below is a list of inline level elements:

<a> <bdo> <cite> <i> <label> <q> <small> <textarea>
<abbr> <big> <code> <img> <map> <samp> <span> <time>
<acronym> <br> <dfn> <input> <object> <script> <strong> <tt>
<b> <button> <em> <kbd> <output> <select> <sub> <sup> <var>

 

Example: The following paragraphs have been styled with CSS (See CSS Manual) so that you can "see" these three characteristics more clearly:

This is a paragraph that has been styled with CSS

This is another paragraph that has been styled with CSS

NOTE: Notice the three rules: only takes up the space it needs, stacked side-by-side HORIZONTALLY from left to right and NO spaces between other than the space you give them between them: (strong { border: solid 1px blue; } ).

NOTE: Inline elements are usually INSIDE of block-level elements.  Notice in the example below the inline strong tags are nested inside of the larger block-level paragraph tag.

This is another paragraph that has been styled with CSS.  This is another paragraph that has been styled with CSS.  This is another paragraph that has been styled with CSS.  This is another paragraph that has been styled with CSS.  This is another paragraph that has been styled with CSS.

MEMORY TIP: It is helpful to think of inline elements as character formatting (e.g., bold, italic) in a word processing application. 

REVIEW AGAIN: Their horizontal spacing can be adjusted using horizontal paddings, borders or margins.  However, vertical paddings, borders, or margins will have no effect on the height of the inline box.  To change the inline box height, the LINE HEIGHT property can be used.  This is typically used to adjust the height of  links that have been converted to block-level elements:

NOTE: An inline element can be converted to a block-level element by using CSS to override the natural display of an element.  If set, if an inline element is set to display:block it will behave like a block-level element. This is typically used to convert an anchor element (an <a> tag)  to a block box so that the "complete" area of the link is clickable instead of just the area under the text.

NOTE: Inline tags do not implicitly include a line break except for the line break tag (<br />) which is used to break the line but not the paragraph.

It is important to note there are other boxes that can be created:

NOTE:

NOTE: Inline tags cannot contain block-level tags.  Some block-level elements cannot contain other block-level elements.  For example, a heading tag cannot contain a paragraph tag.

SEMANTIC OR MEANINGFUL MARKUP

Finally, it is important to use the correct markup tags when defining some elements.  Semantic (or sometimes called meaningful) markup elements describe the content's meaning which allows CSS to target them for styling or positioning easier as will be seen.  Examples would include:

It is important NOT to "fake" a meaningful markup element with another element.  For example, don't style the <p> element by changing its font size and font weight to match one of the heading elements.  Otherwise, screen readers and search engines will not be able to recognize them correctly because they are looking for <h1>-<h6> elements instead of <p> elements trying to simulate heading elements.

NOTE: The blockquote tag alerts screen readers that the enclosed text is a quote and not just another paragraph.

NESTED TAGS

Some tags require other tags "nested" inside of them in order for them to be rendered.  It is helpful to think of nested tags as parent/children relationship. 

While not necessary, it is best practice to have the parent tags at the top and bottom of the code block and the children tags side-by-side:

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

Instead of this:

<ol><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ol>

or this:

<ol>
<li>
List Item 1
</li>
<li>
List Item 2
</li>
<li>
List Item 3
</li>
</ol>
MEMORY TIP: It is helpful to think of the children tags as being "on the side" of its parents.  Hence, side-by-side on the same line instead of top-to-bottom like its parent.

Here are a few examples of nested tags:

Order / Unordered List Tags: <ul> or <ol>

LIST TAGS – with <ol> or <ul> as the parent tag and <li> as the children tags.

Example in CODE View – ORDERED LIST (NUMBER LIST)

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

Result in DESIGN View:

1. List Item 1
2. List Item 2
3. List Item 3

Example in CODE View – UNORDERED LIST (BULLET LIST)
NOTE: By simply changing both the <ol> tags above to <ul> tags, you can convert it to an unordered list.

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

Result in DESIGN View:

DEFINITION LIST – with definition list <dl> tag as the parent tag and definition term <dt> tag and definition defined <dd> tags as the children tags.

Example in CODE View:

<dl>
    <dt>term1</dt>
    <dd>definition 1 goes here</dd>
</dl>
<dl>
    <dt>term2</dt>
    <dd>definition 2 goes here</dd>
</dl>

Result in DESIGN View:

term1
definition 1 goes here
term2
definition 2 goes here

NOTE: The definition <dd> tag has a built-in indention.

Combo box or List Tag: <select>

Select / List – with <select> tag as the parent tag and the <option> as the children tags.

Example in CODE View:

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

NOTE: The Menu allows a user to only make a SINGLE selection. However, it does save space over a List (discussed next).

Result in DESIGN View (menu):

NOTE: If you simply add a size attribute to the <select> tag, you create a list instead of a menu:

Example in CODE View:

<select size = "3">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Result in DESIGN View (list):


Please hold down the CTRL or COMMAND key and click to choose multiple options

NOTE: The size attribute determines the number of options the list will display in its container even though there may be more options than the size amount.
NOTE: The advantage of the List over the Menu is that the List allows a user to select MULTIPLE options at one time.  To enable this functionality, add the following attribute ( multiple="multiple" ) to the <select> tag.   It is best practice to inform users with a brief instruction to let them know they can make multiple selections (i.e., Please hold down the CTRL or COMMAND key and click to choose multiple options.)

Table Tag: <table>

Table – with <table> as the parent tag of the <th> or <td> and the <td> tags as the children of the <th> or <td> tag.

Example in CODE View: Heading on top - <th> tags are only in the FIRST table row <tr> tag

<table border="1">
    <tr>
      <th>Heading 1 in column 1</th>
      <th>Heading 2 in column 2</th>
  </tr>
  <tr>
      <td>Table data goes here</td>
      <td>Table data goes here</td>
  </tr>
</table>

NOTE: It is helpful to think of the table row <tr> tag as the table row(s)  and the table data <td> as the table column(s) since there is no concept of a table column <tc> tag. The <th> tag can serve as a row or column.  It differs from the <td> tag in that the text is centered and in bold.

Result in DESIGN View:

Heading 1 in column 1 Heading 2 in column 2
Table data goes here Table data goes here

Example in CODE View: Header on side – <th> tags are in EACH table row <tr> tag

<table border="1">
    <tr>
        <th>Header 1</th>
        <td>Table data 1</td>
    </tr>
    <tr>
      <th>Header 2</th>
      <td>Table data 2</td>
   </tr>
</table>

Result in DESIGN View:

Header 1 Table data 1
Header 2 Table data 2

<form> Tags

form – with <form> as the parent tag of the <input> or <select> and the <text> tags as the children tag.

Example in CODE View:

<form id="form1" name="form1" method="post" action="">
<p>
<label for="textfield2">Name</label>
<input name="textfield" type="text" id="textfield2" size="40" />
</p>
<p>
<label for="textfield3">Email</label>
<input name="textfield2" type="text" id="textfield3" size="40" />
</p>
<p>
<label for="textarea">Message<br />
</label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
<p>How can we contact you?</p>
<p>
<label>
<input type="checkbox" name="Contact" value="checkbox" id="Contact_0" />
Email</label>
<br />
<label>
<input type="checkbox" name="Contact" value="checkbox" id="Contact_1" />
Phone</label>
</p>
<p>States you have visited:</p>
<p>
<select name="select" id="select">
<option value="La">Louisiana</option>
<option value="Miss">Mississippi</option>
<option value="Tx">Texas</option>
<option value="Ca">California</option>
<option value="Utah">Utah</option>
</select>
</p>
<p>
<input type="submit" name="button" id="button" value="Submit Feedback" />
<br />
</p>
<p>&nbsp;</p>
</form>

Result in DESIGN View:

How can we contact you?


States you have visited:



 TAGS AND ATTRIBUTES TO AVOID

Do NOT use:

<font> tag – Use CSS font properties instead

<table> tag for Page Layout  – Use CSS div tags instead.  Table tags should only be used for TABULAR data

<b> or <i> tags – Use <strong> and <em> tags instead.  These tags hopefully will used by screen readers to emphasize words better

align="center" attribute – Use margin: 0 auto CSS property instead. For example, to center a table, you could use table { margin: 0 auto; }

     
     

<pre> tag unless you have a compelling reason to do so.  The <pre> tag is used to display text EXACTLY as you type without &nbsp; entity in them.  It is mainly used to::

The <pre> tag can contain most tags except those that create a paragraph break (e.g., <p> element).