Markup Language - Title

Click here to return to the 123WORDPRESS.COM HTML Tutorial section.
Previous: Chapter 1 List Original source
Standardized design solutions - markup languages and style manuals
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup
Chapter 2 Title
Overview:
Not only do all web pages need titles, but if marked up correctly, they can add a lot to the design and usability of a web page.
In terms of appearance, the title of a web page is usually in a larger font size, and may be in a different color or font than the main body of the text. The purpose of the title is to "briefly describe the topic discussed in the following section", as described by the W3C - to provide an overview of the various paragraphs within the web page.
How do you create a page title that makes the most effective use of the information you want to present? In this section, we'll look at several common approaches to title creation, try to find the one that's most helpful to you, and then we'll use some CSS tips and tricks to spruce up the best approach.
What's the best way to create a document title?
Before answering this question, let's assume that we want to place the title at the top of the document. Let's look at three ways to achieve a similar effect.
Method A: Does it make sense?
Super Cool Page Title
Although the tag is a convenient tag in some situations, it is not very meaningful for page titles. The only benefit of using this method is that we can specify a CSS style for the heading class to make the text look like a title.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
Now, all headings marked with the heading class will become larger, bolder, and bluer. Great, right? But what happens if someone visits this page using a browser that doesn’t support CSS?
For example, what if we put the CSS styles in an external style sheet file that is not supported by older browsers — or what happens when a screen reader reads the page to a user with disabilities? Users accessing the page through these means will not see (or hear) the difference between the headings and body text.
The annotation method class="heading" slightly describes the meaning of the tag content, but is just a general-purpose container that only changes the default display style of most browsers.
When search engines crawl this page, they will skip the tag as if it was not there, and will not increase the weight of the keywords that may be contained in it. More information about the relationship between search engines and page titles will be mentioned later in this section.
Finally, since the tag is an inline element, we usually need to put the content of method A into another block-level container, such as or <div>, so that it occupies a line alone. This will generate a lot of unnecessary code. Even if you add the necessary container, browsers that do not support CSS will still display the text in its original way, so that users cannot see any difference between the title and the body.

Previous Page 1 2 3 4 5 Next Page Read More

<<: TypeScript enumeration basics and examples

>>: Automatically load kernel module overlayfs operation at CentOS startup