This chapter is from the book
This chapter is from the book
This chapter is from the book
HTML defaults
Since the very beginning, HTML tags came right out of the box with one or more default formats, characteristics, or behaviors. So even if you did nothing, much of your text would already be formatted in a certain way in most browsers. One of the essential tasks in mastering CSS is learning and understanding these defaults and how they may affect your content. Let’s take a look.
Open html-defaults.html from the lesson04 folder. If necessary, select Live view to preview the contents of the file.
The file contains a range of HTML headings and text elements. Each element visually exhibits basic styling for traits such as size, font, and spacing, among others.
Switch to Split view.
In the Code view window, locate the <head> section, and try to identify any code that may be formatting the HTML elements.
A quick look will tell you that there is no overt styling information in the file, yet the text still displays different kinds of formatting. So where does the formatting come from? And more importantly, what are the settings being used?
The answer is: It depends. In the past, HTML 4 elements drew characteristics from multiple sources. The first place to look is the W3C. For HTML 4 it created a default style sheet, which you can find at www.w3.org/TR/CSS21/sample.html. The style sheet defines the standard formatting and behaviors of all HTML elements. The browser vendors used this style sheet to base their default rendering of HTML elements. But that was before HTML5.
Close htm-defaults.html and do not save any changes.
)
HTML5 defaults?
The last decade has seen a consistent movement on the web to separate content from its styling. At the time of this writing, the concept of default formatting in HTML seems to be dead. According to specifications adopted by the W3C in 2014, there are no default styling standards for HTML5 elements. If you look for a default style sheet for HTML5 on w3.org—like the one identified earlier for HTML 4—you won’t find one. As of this writing, there are no public moves to change this relationship, and browser manufacturers are still honoring and applying HTML 4 default styling to HTML5-based webpages. Confused? Join the club.
The ramifications of this trend could be dramatic and wide reaching. Someday, in the not-too-distant future, HTML elements may not display any formatting at all by default. That means that understanding how elements are currently formatted is more important than ever so that you will be ready to develop your own standards if or when the need arises.
To save time and give you a bit of a head start, I pulled together Table 4.1, with some of the most common defaults.
Table 4.1 Common HTML defaults
ITEM |
DESCRIPTION |
Background |
In most browsers, the page background color is white. The background of the elements <div>, <table>, <td>, <th>, and most other tags is transparent. |
Headings |
Headings <h1> through <h6> are bold and align to the left. The six heading tags also apply differing font size attributes, with <h1> the largest and <h6> the smallest. Apparent sizes may vary between browsers. Headings and other text elements may also display additional spacing (margins) above or below. |
Body text |
Outside of a table cell, paragraphs—<p>, <li>, <dd>, <dt>—align to the left and start at the top of the page. |
Table cell text |
Text within table cells, <td>, aligns horizontally to the left and vertically to the center. |
Table header |
Text within header cells, <th>, aligns horizontally and vertically to the center (this is not standard across all browsers). |
Fonts |
Text color is black. Default typeface and font are specified and supplied by the browser, which in turn can be overridden by the user using the preference settings in the browser itself. |
Margins |
Spacing external to the element border/boundary is handled by margins. Many HTML elements feature some form of margin spacing. Margins are often used to insert additional space between paragraphs and to indent text, as in lists and blockquotes. |
Padding |
Spacing within the box border is handled by padding. According to the default HTML 4 style sheet, no elements feature default padding. |
Browser antics
The next task in developing your own styling standards is to identify the browser (and its version) that is displaying the HTML. That’s because browsers frequently differ (sometimes dramatically) in the way they interpret, or render, HTML elements and CSS formatting. Unfortunately, even different versions of the same browser can produce wide variations from identical code.
Web design best practices dictate that you build and test your webpages to make sure they work properly in the browsers employed by the majority of web users in general—but especially the browsers preferred by your own visitors. The breakdown of browsers used by your own visitors can differ quite a bit from the norm. They also change over time—especially now, as more and more people abandon desktop computers in favor of tablets and smartphones. In July 2019, the W3C published the following statistics identifying the most popular browsers from the 50 million visitors they receive each year on their website:
)
Although this chart shows the basic breakdown in the browser world, it obscures the fact that multiple versions of each browser are still being used and browsers are updated constantly. This is important to know because older browser versions are less likely to support the latest HTML and CSS features and effects. To make matters more complicated, these statistics show trends for the Internet overall, but the statistics for your own site may vary wildly.
As HTML5 becomes more widely supported, the inconsistencies will fade, although they may never go away. Some aspects of HTML 4 and CSS 1 and 2 are still not universally agreed upon to this day. It’s vital that any text styling or page structure be tested carefully. Occasionally, you will find that you must create custom CSS styling to contend with issues in one or more browsers.