HTML TAGS-2

Sometime it doesn’t make sense

Images ( ) feel like block-level elements — they are rectangular, have definite dimensions, and are usually displayed outside of the flow of text.

However they are actually inline elements. The reason for this is mostly a hold-over from a less-sophisticated period of web design, but we’re stuck with it now. The weird implications of this can be avoided easily, but its good to know. (See the chapter on images and also the one on CSS.)

There are other weird issues like this, and they will be covered later in this guide when they come up.

More about attributes

Almost every element tag can include attributes. Many elements have a specific set of attributes they support (like and the src= attribute), but there are several elements which are globally supported by all element types.

Two important attribute types are class and id.

<a href="http://example.com" class="example-link" id="link27">This anchor tag has three attributes.

Class attributes

Class attributes are used to mark one or more elements as belonging to a specific “class” or group — this can be used for displaying them all the same way.

For example, it is common to use an unordered list ( ) as a menu, and to make the list item (

) which points to the current page look different than all the other links in the same list.

 

<ul class="menu">
 <li class="menu-item">
   <a href="/home">Home
 

 


 <li class="current-item">
   <a href="/about">About
 

 


 <li class="menu-item">
   <a href="/contact">Contact
 

 

An element can have more than one class. Multiple classes are separated by spaces inside the class element.

<p class="first drop-cap">
  This is the first paragraph, and it is also part of the drop-cap class.

 

Because classes are separated by a space, classes may not include spaces in their names.

In CSS, JavaScript, and other languages, the class of an element is notated with a dot before the name.

/*CSS*/

.first {
    color: green;
}

The above CSS code means that within any element that has a class of first, the text color should display as green.

ID attribute

The ID attribute works similarly to the Class attribute, but is conceptually different. Rather than signifying the element’s membership in a group, it uniquely identifies that element. For this reason, there can be only one element with any specific ID on any given page.

<h1 id="page-title">This is the title of the page

 

IDs are less often used for affecting display, and more often used for functional purposes.

IDs can be used for internal linking of a document, such as the Table of Contents on a wikipedia article.


  <a href="#intro">Intro
 

 


  <a href="#history_of_topic">History of Topic
 

 

 



<h2 id="intro" class="section-header">Introduction

 

 


Text of introductory section.

 



<h2 id="history_of_topic" class="section-header">

 


Some history on this topic.

 

Notice that the links to the sections include the name of the tag, prefixed with the hash or pound sign ( # ). This is the standard way to reference the id of an element:

/*CSS*/

#intro {
    font-size: 14px;
}
// Jquery

$("#intro").click(
  // do something when the intro area is clicked
);

Other attributes

Each HTML tag has its own set of available attributes relating to their specific purpose. For example, the tag, which defines a hyperlink, includes the href (hyper-reference) attribute, which specifies a URL being linked to.

These attributes will be covered in more detail as we look at each tag individually in later chapters.

There are also a number of “global” attributes — attributes any element can have. These will also be covered in more detail later on, as their uses become more relevant.

Comment Tags

The last point to cover in basic HTML tags is the comment. Comments begin with an angle bracket, followed by an exclamation point and two dashes. They end with two dashes and a closing angle-bracket.

Comments may be multi-line.

<!--
This is a comment.
It has two lines.
-->

Comments may not be nested:

<!-- 
If I try to nest a comment inside another comment.
  <!-- Like this -->
Then this the part after the first closing tag will fall outside the comment.
-->

You need to watch our for nesting of comments if you ever try to comment-out a large section of existing HTML — inline comments in the original section will mess up your commenting.

Anything inside the comments will not be displayed to the user inside the browser. However, HTML comments can be viewed by the site visitors if they choose to view the page source. Therefore, do not use comments for anything you wish to hide from the public.

Summary

HTML is essentially text content with tags that are used to specify the meaning of that content within the document and the relationship of each piece of content to the others.

Tags are short snippets of letters inside angle-brackets. They typically consist of a matching pair — an opening and a closing tag. The opening tag is just the tag name, while the closing tag is prefixed with a slash.

Attributes may be added to any element. Attributes are specified inside the opening tag, as name–value pairs joined by an equal sign. The value must be inside single or double quotes (double quptes is standard).

The two most common attributes are the class and id attribute, which are used both for styling and functional purposes.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s