HTML.co.uk

Elements are the building blocks of any HTML page. Without elements no HTML page can be designed. Paragraphs, hyperlinks, sounds, images, embedded media, lists, font, headings and many others are the elements of HTML which help us to define the structure and appearance of the actual content to be displayed on the web page. All the elements can be classified either as Block level elements or as Inline elements/Text level elements/Phrase elements. In this article we will turn our heads towards the nitty-gritty of Inline Elements.

Inline elements are of two types: Presentational elements and Structural elements. The presentational tags define the actual appearance and design of the text. These tags describe how the text will look in the browser. On the other hand, structural tags are meant to define the structural markup of the text. Below are the some examples of both the Presentational as well as structural elements.

Presentational Elements:

1) <i>…</i> It displays the text in italics.

2) <b>…</b> It displays the text in bold

3) <u>…</u> It underlines the text

Structural Elements:

1) <em>…</em> Tells the browser to emphasize the selected text

2) <strong>…</strong> Tells the browser to strongly emphasize the selected text

3) <code>…</code> Tells the browser that the selected text is a computer code

Structural elements basically define the text functions on the web page rather than representing the appearance of the text. The way in which text will be displayed is up to the web browser. Thus, the structural elements are platform independent. This is in contrast to the Presentational elements as they actually influence the appearance and visual style of the text.

Inline elements are meant to format small chunks of data/text. All the inline elements are nested within the block elements. Below is a list of some of the frequently used inline elements:

1. a – Anchor, used to create a link to another page in HTML.
2. abbr – Represents an abbreviation.
3. acronym – Denotes an acronym.
4. b – Makes the text bold
5. br – Break, it is similar to a carriage return
6. code – Denotes computer program code.
7. dfn – Denotes a definition.
8. font – Used with various attributes to change font color, size, face etc.
9. i – Change the text into italics
10. img – Allows placement of a graphical image in the page.
11. input – Form input
12. kbd – Denotes information typed from the keyboard.
13. param – Used to add additional parameters to the object.
14. q – Used for short quotations
15. s – Strike through text
16. samp – Denotes a sample.
17. span – Used to set special style to specific areas of the page.
18. strike – Sets text to have a line struck through it.
19. strong – Denotes strong emphasis which is basically bold
20. sub – Subscript
21. sup – Superscript
22. textarea – A form for multi line text input.
23. tt – Sets text style to monospaced teletype
24. u – Underlines the text
25. var – Denotes a variable in a program.

Elements are those building blocks, which define the structure of an HTML page. Whatever we see on a web page is defined by the different elements of HTML. Elements decide the layout of a web page, its contents, the properties of the content and the position and behavior of every character that may or may not be displayed on the web page. Elements contain everything such as Headings, Paragraphs, Embedded Media, Sound, Images, Hyperlinks, Lists, Fonts and a variety of other structures that are used to build a web page. Each element in HTML can be defined using the Tags. Tags define the properties of the elements. To construct an element in a particular style we generally require four things:

A start tag
Any attributes and associated values of the start tag
The actual content which has to be displayed on the web page
End Tag

Most of the elements require all the four things mentioned above, but some of the elements require only a part of them. The use of attributes and associated values of the start tag is completely optional and it is used only when we want to add some extra effects for the characters. Some of the elements do not even require an End Tag. As you gain experience and in depth knowledge and expertise in designing HTML pages, you will get to know a large number of Elements some of which require all the tags and some, which do not.

HTML Elements are classified into two broad categories:

Block level Elements
Text level Elements or Inline Elements

Block level Elements are responsible for the construction of an HTML page as a whole such as Headings, Paragraphs etc. These elements contain several Text Level/ Inline elements and other Block level elements. Inline elements are contained under the block level elements and are used to format small chunks of data. For e.g. Images and Hyperlinks.

Various Block level and Text level elements can be used together to format the data/text to be displayed on the web page. Although you can use more than one inline elements in any order but it is not recommended. As per the standards the elements must be closed in the reverse order. For eg.

<B><U><I> Introduction to Elements</I></U></B>

The above order is correct. The elements B, U and I are closed in the reverse order i.e. last In first Out. Below is an example of incorrect style of defining the elements.

<B><U><I> HTML is good. </U></B></I>

The elements can be used more complexly according to ones need. Several different elements can be nested within each other if required because there is no maximum limit for using the elements. Below is a comprehensive example of nested elements. Just note their starting and ending order. The first one has been closed in the last.

<Body bgcolor=red><P><B>Welcome to HTML.</B> <I> For more info</I><a href=”html.com”>click here </a></P></body>

In this way the elements can take a form of different hierarchies and sub-hierarchies depending upon the structure of your web page.

Links and images make the page come alive. For this you need to know about the common tags and the character tags along with their key features such as formatting tags. Before doing the tags one has to know about links and images. A basic knowledge of these is needed in order to make your page reveal your persona with the links and images on it .Let us first go through what are tags related to links and images

Links are the basic hypertext constructs, which help you to navigate from one resource to another either on the same page or between two pages. Images on the other hand are basically used in the background of the document or in the web page and maybe sometimes even in the logo. So the need arises to format this image or even add a new image. For all these purposes we need some tags related to images and links. When you use the tag <BODY> and </BODY> as tag then you are referring to the body of the text document. To change or edit the visited colour code you use the tag

VLINK=”#Colour Code” and

For unvisited colour code, you can use the tag

LINK=”#Colour Code”.

<A Name = “Label”> moves to the other portion of the web page. This link tag helps in navigating between web pages. <A HREF=”Item Location> helps you go to the destination marked by this link. So links are basically used to get two items or pages linked. This way documents are shared on the web.

You can use similar tags for the images too. Let us study each tag one by one. This is indeed a fun way of learning the HTML tags. You don’t need to be a master to understand this. Even basic computer knowledge is helpful to understand the tags. When you wish to import an image from its location, you need to use the tag
<IMG SRC =”Image Location”>. You can either align the text at top middle position and bottom middle or align it left, right and center. For this you use the tag

ALIGN=”Left, Right” and ALIGN=”Top, Middle, Bottom”

For alternative text you use the tag ALT while for bordering the image use the tag border. You can even change the width of the image in pixels by using HTML by using the tag WIDTH. Similarly, the height can also be changed by using HEIGHT. You may also decide the amount of horizontal and vertical space you require around your image by using the tags VSPACE and HSPACE. Now this is easy and you don’t need to be afraid of HTML programming anymore. Not that tags form HTML programming but they are definitely the basis for this programming and without understanding this you cannot move ahead.

Let us see how to add an image to your web page. You need to use the following command to add the image:

<img src=” . . . “>.

In the area marked by dot, as shown above, you need to place the name of the file containing the image you are planning to use to add the image.

You can write the internet wide and unique URI inside an HTML file loaded onto an internet server. A web browser that processes this information can then better access referenced or linked files. The base defined here functions as a suitable model for links to other HTML files or references to graphics and multimedia.

An Example:

<head>
<base href= “http://www.html.co.uk/”>
</head>

Explanation:

The file base element consists of <base href= …> and the exact file URI.

If graphics such as the following exist in the file:
<img src= “/src/logo.gif”>
The web browser then determines an absolute URI for this graphic:
<img src= “http://www.html.co.uk/src/logo.gif”>.

Take Note:

If it is important for you that your project remains easily transferable to other server computers in different directory structures, then you should refrain from defining an address base. Because with an element linking to a unique internet address, the web browser will continually attempt to load graphics and link destinations for the entered address. This makes testing a file on your local PC impossible!

On the other hand, the address base element provides a certain level of protection for the HTML illiterate who wish to save a HTML file locally or search the cache directory of their web browser. While locally accessing a HTML file, the web browser will always demand an online connection and then load the file from the address entered.

If you work in XHTML standard conform, then you must describe the base element as content less. Use the standalone tag in this form to do so: <base … />.

Window Destination Base

This element is useful in conjunction with frames, for example. It can determine for an HTML file, that is shown inside a frameset in a frame window, that all of the links within the file should be shown in a different frame window, as long as the link does not demand any other type of frame window. Because many link destinations in a file, which is shown in a frame window, actually should be displayed in a different window type, this one time element in the file header saves a lot of typing work and makes the file more manageable.

An Example:

<head>
<base target= “RightWindow”>
</head>

Explanation:

With <base target= … > you determine the default window in which the link destination should be displayed. The requirement for the above example is that the frameset is defined with window frames. You must determine the desired frame window by entering the window name with the name attribute in <base target= … >.

Instead of assigning a window name on your own, you can also use the following predetermined elements which are also useful for more than just framesets.
<base target= “_blank”> opens every link within the file in a different browser window.

<base target= “_top”> opens every link inside the file in the entire browser window and prevents all other framesets from being displayed.

<base target= “_parent”> opens every link inside the file in a upper level frameset and prevents the display of inner framesets. _parent and _top distinguish between each other when a window again contains a complete frameset.

An international group of experts, united under the name Dublin Core Metadata Initiative, has developed a general system for Meta elements. Through which it is not only possible to express information about HTML documents, but also pictures, films, dates, and even physical objects. The system is easy to use and takes into consideration all the important information that can be conferred about an internet document. The Meta elements from Dublin Core have also been greeted warmly by the W3 consortium, who use them heavily with their RDF project.

Dublin Core primarily defines 15 attributes, or so-called elements, which can be assigned values. Additional sub-elements allow for special Meta elements. You will find a full list and description of the elements under the DCMI Meta data terms. The Dublin Core standard proposes some instructions for suitable schemata, including for media types, language abbreviations and information regarding the date.

The specification expressing Dublin Core in HTML/XHTML Meta and link elements describes how you should use certain Meta elements in your HTML file: The element name should be placed in the name attribute of the Meta tag, while the associated value should be placed in the content attribute. You can optionally enter the corresponding data format in the scheme attribute.

An Example:

<head profile=http://dublincore.org/documents/dcq-html/>
<link rel=“scheme.DC” href=http://purl.org/dc/elements/1.1>
<link rel=“scheme.DCTERMS” href=http://purl.org/dc/terms/>
<meta name=“DC.title” content=“SELFHTML: Meta elements”>
<meta name=“DC.creator” content=“Thomas Grady”>
<meta name=“DC.subject” content=“Meta elements”>
<meta name=“DC.description” content=“established Meta elements in HTML today”>
<meta name=“DC.publisher” content=“Thomas Grady”>
<meta name=“DC.contributer” content=“Ryan Howard”>
<meta name=“DC.date” content=“2008-5-8” scheme= “DCTERMS.W3CDTF”>
<meta name=“DC.type” content=“Text” scheme= “DCTERMS.DCMIType”>
<meta name=“DC.format” content=“text/html” scheme= “DCTERMS.IMT”>
<meta name=“DC.identifier”>
content=“http://www.html.co.uk/21/meta-elements-part-2.html”
scheme=“DCTERMS.URI”>
<meta name=“DC.source”
content=”http://www.w3.org/”
scheme=“DCTERMS.URI”>
<meta name=“DC.language” content=“en” scheme=“DCTERMS.RFC3066”>
<meta name=“DC.relation” content=http://dublincore.org/ scheme=“DCTERMS.URI”>
<meta name=“DC.coverage” content=“London” scheme=“DCTERMS.TGN”>
<meta name=“DC.rights” content=“All rights lie with the author”>
</head>

Explanation:

For programmes like search engines you can specifically define that your document is using the Dublin Core specification for embedding Meta elements in HTML.

With Meta elements, that belong to a certain public system, the name of the Meta element will be presented to the system as a short description. This prefix is DC for the 15 most commonly used elements with Dublin Core, and you must note DCTERMS for the sub-elements and schemata. The element name, or data format description, follows separated by a period. To clearly verify that all Meta elements with this prefix belong to the Dublin Core system, links are provided to the so-called naming space for Dublin Core. That way the uniqueness is ensured, even if other Meta data systems also operate with the same abbreviations.

With <meta name=“DC.title” content=“Title”> you can enter a title for the file, similar to the title element in HTML.
With <meta name=“DC.creator content=“Name”> you can reference the file’s original
creator.
With <meta name=“DC.subject” content=“Text”> you can specify the file’s topic.
With <meta name=“DC.description” content=“Text”> you can give a short description of the file’s content.
With <meta name=“DC.publisher” content=“Name”> you can enter who is responsible for the file’s publication. This can be the author themselves, or a publishing house, or a relative of a dead author.
With <meta name=“DC.contributor” content=“Name”> you can enter the co-authors or people who, next to the author, are responsible for the file’s content (such as translators, graphic designers, musicians etc).
With <meta name=“DC.date” content=“date”> you can enter when the file has been published. The date should adhere to a prevalent time and date format. You can specifically state, using the attribute= “DCTERMS.W3CDTF”, that the time entry adheres to such a system.

With <meta name=“DC.type” content=“Type”> you state the type of content you are making the Meta tags for. The following types are allowed:
Collection: If the content is a directory with links to sub-domains and the Meta elements are intended to describe the directory’s content.
Dataset: If the information is contained within a data set, such as a table.
Event: If the content is for an occurrence at some point in time, such as an exhibition or wedding.
Image: if the content is a visual representation, such as a photo, film, sketch or animation.
InteractiveResource: If the purpose of the site is based on interaction with the user, such as a registration form, embedded Java applet, or chat site.
PhysicalObject: If the site’s content concerns any physical object. Because this isn’t possible with HTML files, it makes little sense to specify it here. IF it is a visual representation of an object, choose image, choose text if it is a textual description, and sound if it is a sound description or effect.
Service: if the site performs a service, such as an online banking service.
Software: if the content offers software, for example, downloadable software and the Meta elements reference the software.
Sound: if the content is primarily acoustic, for example an embedded MP3 file or a streaming radio station.
Text: if the content is text oriented – regardless if it concerns literature, jokes, news scientific text or any other type of text.
Use the attribute scheme=“DCTERMS.DCMIType” in order to clearly specify that you are using these predefined types.

With <meta name=“DC.format” content=“Type”> you can state the file’s data format or media type. You can enter a MIME-Type for a value. The MIME-Type for HTML is text/html. You can make it clearer that the information concerns a media type in accordance with the official scheme using the scheme= “DCTERMS.IMT” attribute.

With <meta name=“DC.identifier” content=“value”> you can enter a unique number or address for the file. With websites, for example, this is the original URI. With the addition of scheme= “DCTERMS.URI” you make it clear the value is a valid URI.

With <meta name=“DC.source” content=”Source”> you can name the source from which the current file is drawn from or based on. In the example above we use a website as the source. However, you could name an offline publication or title. That would be the case if, for instance, the HTML file came from a book. If the source stems from an URI, then you can accentuate that with the scheme=“DCTERMS.URI” element.

With <meta name=“DC.language” content=“Language” you can enter the language in which the HTML file is written. A language abbreviation according to RFC 3066 is expected as a value for content.

With <meta name=“DC.relation” content=“Source”> you can enter what relation the current file has to any other projects it might belong to. The word in content should describe what type of relation.

With <meta name=“DC.coverage” content=“Text”> you can enter a geographical reference, or reference a point in time, for the file’s content. For geographical entries it can either be the location, longitude and latitude, a region, and the time reference can either be a date, or an age. We use a city name from the Ghetty Thesaurus of Geographical names as an example. The data format is noted as scheme=“DCTERMS.TGN”.

With <meta name=“DC.rights” content=“Text”> you can enter information regarding the file’s copyrights. You may also enter a URI where the exact legal conditions are specified. If you choose to reference a URI, then note the scheme=“DCTERMS.URI” attribute to ensure it is clear the value is a URI.

Take Note:

You do not have to use all of the Dublin Core Meta elements. It’s no problem if you only note the elements that make sense. Even noting the data formats with the scheme attribute is not completely necessary, but it is still recommended as long as the schemas exist.

Although the Dublin Core represents a well known and carefully worked through Meta data system, the practical uses of such Meta elements appear minute at first glance. The leading search engines completely ignore them, as a reaction to their previous misuse. So the use of Dublin Core Meta data is envisioned more where processing programmes can trust the Meta elements. Such Meta elements are well suited for the internal governing of large web sites, dynamically generating content directories, or internal website search functions, for example.