Markup Language - Title
|
Click here to return to the 123WORDPRESS.COM HTML Tutorial section. Previous: Chapter 1 List <br />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? <span class="heading">Super Cool Page Title</span> Although the <span> 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 <span> 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 <span> 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 <span> tag is an inline element, we usually need to put the content of method A into another block-level container, such as <p> 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
Recommend
Detailed tutorial for installing influxdb in docker (performance test)
1. Prerequisites 1. The project has been deployed...
Detailed explanation of adding click event in echarts tooltip in Vue
Table of contents need Workaround 1. Set tooltip ...
Detailed process of installing Docker, creating images, loading and running NodeJS programs
System environment: Windows 7 1. Install Docker D...
Mybatis statistics of the execution time of each SQL statement
background I am often asked about database transa...
Vue+Websocket simply implements the chat function
This article shares the specific code of Vue+Webs...
Detailed instructions for installing mysql5.7 database under centos7.2
The mysql on the server is installed with version...
How to install and configure the supervisor daemon under centos7
Newbie, record it yourself 1. Install supervisor....
25 CSS frameworks, tools, software and templates shared
Sprite Cow download CSS Lint download Prefixr dow...
Detailed explanation of the use of stat function and stat command in Linux
stat function and stat command Explanation of [in...
mysql trigger creation and usage examples
Table of contents What is a trigger Create a trig...
Mysql inner join on usage examples (must read)
Grammatical rules SELECT column_name(s) FROM tabl...
Detailed explanation of why v-if and v-for in Vue are not recommended to be used together
This article mainly introduces why v-if and v-for...
How to use html2canvas to convert HTML code into images
Convert code to image using html2canvas is a very...
Solution to data duplication when using limit+order by in MySql paging
Table of contents summary Problem Description Ana...
Solution to css3 transform transition jitter problem
transform: scale(); Scaling will cause jitter in ...