Elements of HTML style

From Knowledge Kitchen
Jump to navigation Jump to search


Elements

HTML code is used to represent "elements", such as sections, articles, headings, images, paragraphs, etc. Tags are the code snippets that are written to represent the elements.

Explicit opening and closing tags

Every element is represented by an explicit opening and closing tag, e.g.:

    <section>
    </section>

Any tags or content nested inside this element must be written between those opening and closing tags, e.g.:

    <section>
            Here I am!
    </section>

Exceptions

A few elements will never have any other tags or content nested inside of them. These elements are written using a simpler syntax with a single "self-closing" tag, e.g.:

<br />
<meta charset="utf-8" />
<img src="images/foo.bar" />
<input type="checkbox" />


Nesting

If any given element is nested inside of any other element, the inner element should be indented one tab to the right of the outer element, e.g.:

    <section>
            <article>
            </article>
    </section>

Notice that the inner element must be closed by its closing tag before the outer element is closed by its closing tag. You might call this the "first in, last out" rule, or perhaps the "last in, first out" rule.

This same rule applies to all levels of nesting, e.g.:

    <body>
            <header>
                    <section>
                            <article>
                                    <h1>
                                            Here I am!
                                    </h1>
                            </article>
                    </section>
            </header>
    </body>


HTML attribute syntax

HTML elements may have one or more attributes. An attribute is a name/value pair that goes inside the element's opening tag. For example, an 'img' tag, which represents an image in HTML, always has a 'src' attribute, which indicates the source file of the image to show. For example, the following code shows an 'img' tag that has a 'src' attribute with the value 'moneky.gif':

 <img src="monkey.gif" />

The first thing to remember is that the element name, in this case 'img', is always the first thing inside the tag. Next, notice that the attribute value is surrounded by quotes. Either double or single quotes are acceptable, so long as the starting quote matches the ending quote.

If you surround an attribute value in double quotes, then it's okay to use single quotes inside the value. For example, the following 'a' element has two attributes, a 'title' attribute, and a 'href' attribute. The 'title' attribute has a single quote inside its value. This is okay because the entire attribute value is surrounded by double quotes:

 <a title="Montezuma's Revenge!" href="revenge.html">dare to click me!</a>

The 'img' tag example above also reiterates the point mentioned previously that some HTML elements use a single tag to both open and close the element. The ' />' at the end of the tag indicates the closing of the tag. As a result, nothing can be nested inside of it. Elements with nothing inside of them are called 'empty elements'. Remember to always put at least one space in front of the tag closing for empty elements for browser compatibility.

What values to use for various HTML attributes

One of the confusing things about HTML is that some attributes have special meaning, while other attributes do not. So it's hard to know whether an attribute value can be free-form and arbitrary, of your own choosing, or whether it has to have a specific predetermined value in order to function properly within the browser.

HTML attributes with arbitrary values

Some common attributes that always have arbitrary values of your own choosing are:

  • id
  • class
  • name
  • value
  • for
  • title
  • alt
  • href - must be a URI
  • src - must be a URI
  • action - must be a URI


HTML attributes with prescribed values

Other attributes that always have special meaning and must have a specific value in order to function properly are:

  • selected ' has only one meaningful value, 'selected'
  • checked ' has only one meaningful value, 'checked'
  • type
  • rel

It is important that you become familiar looking up what each of these attributes does for various HTML elements. Use your HTML reference of choice.


What links here