banner
Welcome to HTML.co.uk, the number one resource for all news, information, and happenings regarding HTML.

Updates: HTML.co.uk has just been relaunched. Subscribe to our RSS Feed to stay on top of HTML news and techniques.
Jun
17th

Bad HTML Habits to Avoid

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , , ,

As the structure of HTML is simple and it can be used easily but even the best HTML programmers’ commit mistakes in coding if at all they tend to develop some of the bad HTML habits. Here let’s discuss the bad habits that are related to HTML which will keep even the best HTML jockeys from obtaining the proper accessibility. So try to understand some of the HTML bad habits that are developed by most of us.

Sometimes, most of us might not have been using the style sheet to that extent to ease the confidence on the formatting of Font tags but as you get into the world of HTML, you will surely find out that this is a type of code that might work but to exact specifications.

#1 Bad Habit

The number one bad habit in the HTML is the improper usage of headings. The agents of the users can build a table of the contents just by reading the headings on the webpage. So, making use of the H1 trough the H6 in order to structure the information and it is important and using all these tags to increase the text can cause the problems.

#2 Bad Habits

Nowadays the transparent image has become the de facto work around by which the most of the web builders avoid HTML’s layout limitations. These types of images will however make difficult for the user agents in order to distinguish between ancillary images such as spacers and real content. Instead of using all these, just use the style sheets in order control the spacing, margins and many other page elements.

#3 Bad Habits

Another thing that should not be used is block quotes or the list containers in order to control the indention. These both are the workarounds that are commonly used by the web builders in order to indent whole pages or paragraphs. The main problem in this is that the software might interpret and also deliver the information in a certain way just because of the tag. So the text to voice reader may interpret the block quote information as the quote them accordingly when in fact you were trying to indent the paragraph. Again the style sheets will offer the best solution as they will allow you in order to separate the visual appearance and formatting of the material from structure of a particular page.

#4 Bad Habits

The other concern is the use of the absolute text formatting of the tags instead of using the relative ones. For example: the tags might render the same in any kind of browser and that does not mean exactly the same thing. The tag was designed in order to indicate the structural emphasis that will be able to take the form of visual change or audible change. So if at all you want to improve the tags, then do not ignore them. So you need to provide the alternative contents if you are creating the pages with some of the elements.


May
13th

Defining Headings

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

HTML differentiates between 6 levels of headings, in order to create hierarchical relationships in the document.

An Example

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Defining Headlines</title>
</head>
<body>
<h1> 1. order heading</h1>
<h2> 2. order heading</h2>
<h3> 3. order heading</h3>
<h4> 4. order heading</h4>
<h5> 5. order heading</h5>
<h6> 6. order heading</h6>
</body>
</html>

Explanation:

<h(1-6)> introduces a heading. The number stands for the heading level. 1 is the highest level, 6 is the lowest. Afterwards the text in the heading follows.
</h(1-6> ends the heading and should be at the end of the heading text.

Take Note:

The numbers for the beginning and closing tags must be the same.

Every heading is its own paragraph, which means no paragraph spacing is necessary before and after headings. The rules regarding the character set, special characters, and HTML specific characters all apply for the heading text.

Aligning Headings

Headings are aligned on the left, if not instructed to do otherwise. You can also align a heading centrally or on the right. Justifying is possible too.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Aligning Headings</title>
</head>
<body>
<h1 align=”center”>centred 1. order heading </h1>
<h2 align=”center”>centred 2. order heading </h2>
<h3 align=”center”>centred 3. order heading </h3>
<h1 align=”right”>right aligned 1. order heading</h1>
<h2 align=”right”>right aligned 2. order heading</h2>
<h3 align=”left”>left aligned 3. order heading</h3>
<h1 align=”justify”>Very long justified 1. order heading, which is only visible after there are multiple lines of text <h1>
</body>
</html>

Explanation:

Through the align=“center” element in the introductory heading tag, you make it so that the heading is centrally aligned. The align=“right” element aligns the heading on the right. While the align=“justify” justifies the heading, and the align= “left” element aligns the heading in its normal place on the left.

Take Note:

Not all browsers can interpret justified text. Justifying together with headings is not always practical, because justified text is only noticeable with multiple lines of text.

align has been classified as deprecated in the HTML 4 standard. Instead we recommend using style sheets, for example: <h1 style= “text-align:center”>…</h1>.

Formatting Headings with CSS

HTML has no influence on how a heading will be presented by a browser. The browsers use default formatting in order to display headings. However, you can format headings in any way you please with style sheets. When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Formatting Headings with CSS</title>
</head>
<body>
<h1 style= “font-size:300%; color:red”> 1. order heading</h1>
</body>
</html>

Explanation:

The 1. order heading is defined with a 300% font size and red colour in the above example.