Does an HTML Size Tag Exist?

Photo of building cropped for different screen sizes
Photo of building cropped for different screen sizes.

As soon as you begin building webpages with HTML, you will start working with sizing. To make your site look the way you want it to look, likely matching a design you or another designer have created, you will want to change the size of the text on that site, as well as other elements on the page. To do this you may begin to look for an HTML "size" tag, but you will quickly find it missing.

The HTML size tag does not exist in HTML.

Instead, in order to set the size of your fonts, images or layout you should use Cascading Style Sheets. In fact, any visual change you need to make to a site's text or another element should be handled by CSS! HTML is for structure only.

The closest tag to an HTML size tag is the old font tag,which did indeed include a size attribute. Be warned that this tag has been deprecated in current versions of HTML and may not be supported by browsers in the future! You do not want to use the font tag in your HTML! Instead, you should learn CSS to size your HTML elements and style your webpage accordingly.

Font Sizes

Fonts are arguably the easiest thing to size with CSS. Moreso than just sizing that text, with CSS you can be more specific about your website typography. You can define the font size, the color, the casing, the weight, the leading, and more. 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:

h3 {

font-size=24px;
}

This style would set the font size of headiing3 elements 24 pixels.  You could add this to an external style sheet and all your site's H3s would use this style.

If you want to add additional typographic styles to your text, you could add them onto this CSS rule: 

h3 {
font-size:24px;
color: #000;
font-weight:normal;
}

This would not only set that font size for H3s, it would also set the color to black (which is what the hex code of #000 means) and it would set the weight to "normal". By default, browsers render headings 1-6 as bold text, so this style would override that default and essentially "un-bold" the text.

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.  This last value, percentages, is very useful when your images need to be fluid, as in a responsive website.

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:

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:

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 responsive website. 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:

style="width:600px;">

 

Liquid width:

style="width:80%;">

 

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 and the different devices they will also be using. This is why responsive websites, which can change their layout and sizing based on different devices and screen sizes, is the best practice standard today.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 7/10/17.