1. Technology

HTML Size Tag - Does It Exist?

By

Question: HTML Size Tag - Does It Exist?

The HTML size tag doesn't exist in HTML. But if you need to set the size of your fonts, images or layout, there are lots of ways to do it using CSS.

Answer:

The HTML size tag is a non-existant tag in HTML. Instead, in order to set the size of your fonts, images or layout you should use Cascading Style Sheets.

The closest tag to an HTML size tag is the font tag which has a size attribute. However, this tag has been deprecated in current versions of HTML and may not be supported by browsers in the future. You would be better served to learn CSS to size your HTML elements instead of the font tag as an HTML size tag.

Font Sizes

Fonts are the easiest thing to size with CSS. And with CSS you can be more specific about your font sizes. You can define the font size, the leading, the kerning, and the tracking. With the font tag, you can only define the size, and then only as a number relative to the browser's default font size which differs for every customer.

To set your paragraph to have a font size of 12pt, use the font-size style property:

]<p style="font-size:12pt;">this font is 12pt</p>

If you want to add tracking or kerning to that, use the letter-spacing style property or sometimes the word-spacing style property. And to change the leading, use the line-height style property. For example, the following code would create a paragraph with a 12 point font, tracking reduced to 0.5pt between characters, and 30% more space between the lines in leading:

<p style="font-size:12pt; letter-spacing:-0.5pt; line-height:130%;">Ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, ut enim ad minim veniam. Ut aliquip ex ea commodo consequat. Qui officia deserunt excepteur sint occaecat velit esse cillum dolore. Ut labore et dolore magna aliqua.</p>

Image Sizes

Images can be tricky to define sizes because you can actually use the browser to resize the image. Of course, resizing images with the browser is a bad idea because it causes pages to load more slowly and browsers often do a poor job of resizing, making the images look bad. Instead, you should use graphics software to resize images and then write their actual sizes in your Web page HTML.

Unlike fonts, images can use either HTML or CSS to define the size. You define the width of the image and the height. When you use HTML, you can only define the image size in pixels. If you use CSS, you can use other measurements including inches, centimeters, and percentages.

To define your image size using HTML, use the height and width attributes of the img tag. For example, this image would be 400x400 pixels square:

<img src="image.gif" height="400" width="400" alt="image" />

To define your image size using CSS, use the height and width style properties. Here's the same image, using CSS to define the size:

<img src="image.gif" style="height:400px; width:400px;" alt="image" />

Layout Sizes

The most common size you define in a layout is the width, and the first thing you'll need to decide is whether to use a fixed width layout or a liquid layout. In other words, are you going to define the width as an exact number of pixels, inches, or points. Or are you going to set your layout width to be flexible using ems or percentages. To define the size of your layout, you use width and height CSS properties just like you would in an image.

Fixed width: <div style="width:600px;"></div>

Liquid width: <div style="width:80%;"></div>

But when you're deciding on the widths for your layout, you should keep in mind the different browser widths that your readers might be using. I created a browser widths template that you can use to design your pages for different browser sizes.

©2014 About.com. All rights reserved.