Web page text typesetting: Use appropriate labels for the right content

Source: Internet
Author: User
Tags define datetime html tags reference
Web page

In the production of Web pages, text content is essential! So how do we make the correct layout of the page text?

When the paragraph label p should be used in the paragraph there are many abuses of the newline label BR, p used to represent the paragraph is recognized. Based on the same logic, many tags should be used to define certain textual elements, such as references, abbreviations, and computer code.

It should be remembered that although most browsers deal with these tags in different ways, it is important to remember that it is not about what the element looks like, but what it gives it.

Initials and initials combination words

Abbreviated LABEL ABBR and acronym acronym are used to abbreviate words and initials together.

Abbreviation is a shortened form of a habitual phrase. Very common. However, acronyms are a combination of the first letter (or part of a word) of each word that makes up a phrase. So CSS is a correct acronym, but HTML and XHTML are not (if Hypertxet Markup Language is an acronym, it should be HML, and XHTML is Ehml).

To optimize ease of use, both abbreviations and acronyms should be titled with the title attribute.

<p>this Web site is about <abbr title= "hypertext Markup Language" >HTML</abbr>
and <acronym title= "cascading Style Sheets" &GT;CSS&LT;/ACRONYM&GT;.
</p>
Attention

There are some incredible reasons why Internet Explorer, the most commonly used browser, doesn't support abbr tags. Luckily, a young man named Marek Prokop developed clever Javascript workaround for this purpose.
There is a lot of discussion about abbreviations and acronyms, and Lars Holst offers the most specific insight possible.
Reference

Blockquote,q and cite are used on references. The blockquote is blocky, used in large areas of the citation, and Q is inline for smaller phrases. Cite is also inline, preferable to its own semantics than Q, and is likely to replace Q in the future.

Also, Title property title is used to indicate where the reference came from.

Note: Q Generally does not change the appearance of the enclosing text-you need to use CSS if you need to specify a style for it.

<p>so I asked Bob about quotations and he said
<cite>i know as much about quotations as I do about pigeon fancying</cite>
. Luckily, I found HTML Dog and it said ...
</p>
<blockquote title= "from HTML Dog, http://www.htmldog.com/" >
<p>blockquote, q and cite are used for quotations. BLOCKQUOTE is block-line and used for large or citations, whereas Q are in-line and used for smaller. Cite is also in-line and preferable to Q for its semantic nature and possible future of deprecation
</blockquote>
Code

There are a few of the tags, Code and var for computer program code, pre and Samp, in practice, is also mainly used for coding.
Code is used for computer program codes.
var is used to indicate a variable in the code.

<code><var>ronankeatingisbland</var> = true;</code>
Samp is similar to code, but is considered to be a code output sample for a program.
Pre is preformatted text that is not used in HTML tags to prevent large spaces from being generated. It is often used in code blocks.

<pre>
<div id= "Intro" >
</p> </div>
</pre>
Defining Terms

DFN is defined as a term used to highlight a term used for the first time. Like ABBR and acronym, Title attribute title can be used to describe terminology.

<p>bob ' s &LT;DFN title= "Dog" >canine</dfn> mother and <dfn title= "horse" >equine</dfn>
Father sat him down and carefully explained the
&LT;DFN title= "A mutation" combines two or more sets to chromosomes from different species "&GT;ALLOPOLYPLOID&LT;/DFN&G T
Organism.</p>

Address

Address should be used for addresses.

<address>
HMTL Dog house<br/>
HTML street<br/>
Dogsville<br/>
HT16 3ML </address>

obscure and rare label
There are some worthless tags that have little chance of being used just because of very specific occasions.
BDO can be used to reverse the direction of text, which can be used to display right-to-left text. Required Property Dir can have the value ltr (left to right) and RTL (right to left).

<bdo dir= "RTL" >god lmth</bdo>
KBD is used to indicate the text that should be typed by the user.

<p>now type <kbd>woo hoo</kbd></p>
Ins and Del are used to display edits inserted and deleted text, respectively. It can have time attribute datetime (in YYYYMMDD format) and cite attribute (a URL that explains why the insert or delete reason).

The INS element generally displays an underscore, while the Del element generally displays a strikethrough.

<p>this is some <del datetime= "20030522" >nonsense</del>
<ins cite= "http://www.webjx.com" >very informative stuff</ins>
That I ' ve written.</p>

performance (descriptive) elements

b, I, TT, SUB, SUP, big and small are all performance elements, and therefore, due to their accuracy, should not be reused when we repeatedly emphasize separation of content and performance. For example, B defines bold elements that have no meaning--these tags define purely visual features that should be CSS. Although they are legal labels, there are other things (such as strong and EM, which are phrase elements) that can actually add meaning. If you just need to copy the style of these tags and don't need any relevant meanings, you can apply CSS to the Span tab.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.