Detailed explanation of the use of title tags and paragraph tags in XHTML

Detailed explanation of the use of title tags and paragraph tags in XHTML

XHTML Headings Overview
 When we write Word documents, we often use titles, such as "Chapter 1", "1.2.1", etc. There is also the concept of headings in XHTML syntax. XHTML defines six levels of headings, <h1> to <h6>:

XML/HTML CodeCopy content to clipboard
  1. < h1 > First level heading </ h1 >   
  2. < h2 > Second level heading </ h2 >   
  3. < h3 > Third level heading </ h3 >   
  4. < h4 > Fourth level heading </ h4 >   
  5. < h5 > Fifth level heading </ h5 >   
  6. < h6 > Sixth level heading </ h6 >   

Use of Titles
 In XHTML documents, titles are very important. Search engines use titles to index the structure and content of your web pages. We should be good at using titles to identify our document hierarchy.
In the headings, the first-level heading is the highest, and then it decreases in order. Generally speaking, in an XHTML document, headings apply to the following places in the document (within the <body> tag):
According to the website level:
<h1> defines the website title
<h2>Define website navigation or columns
<h3>Define article titles according to website content:
<h1> defines the website title
<h2>Define the article title
<h3>Define column title. For titles h4 to h6 that are larger than h3, they can be used in appropriate places, such as copyright statements or disclaimers, which are relatively important places.
Also please note that the levels must be descending. Below h1 should be the h2 level, and then h3...


Some suggestions for using titles
 Since h1 represents the core content of the entire page, generally speaking h1 can only appear once (not absolutely, but it definitely cannot appear multiple times) and is used in the most emphasized part of the article. So if it is a specific content page, h1 is often used in the title of the article to highlight the importance of the article, such as this site:

XML/HTML CodeCopy content to clipboard
  1. <h1> XHTML title​​​​   

Whether the website title (website logo) should use h1 at this time depends on the actual situation.
Title Use Exercise Open our learning document 1.html file with an editor and copy the above <h1> to <h6> tags into the <body> tag:

XML/HTML CodeCopy content to clipboard
  1. < body >   
  2. < h1 > First level heading </ h1 >   
  3. < h2 > Second level heading </ h2 >   
  4. < h3 > Third level heading </ h3 >   
  5. < h4 > Fourth level heading </ h4 >   
  6. < h5 > Fifth level heading </ h5 >   
  7. < h6 > Sixth level heading </ h6 >   
  8. < p > hi~Hello! </ p >   
  9. </ body >   

Save and open the 1.html file with a browser (if it is already open, click the browser refresh button to reload the document, the same below, no further instructions), you can see the effect of the title tag as follows:
201636113918682.gif (396×290)

As can be seen from the example, the browser will automatically form a line break for a title (each title occupies a line of its own).

Paragraph p tag
 In XHTML, paragraphs are defined by the <p></p> tags.
XHTML Paragraphs
 Paragraph tag example:

XML/HTML CodeCopy content to clipboard
  1. < p > This is a paragraph. </ p >   

In actual production work, we use <p></p> paragraph tags extensively.
After adding a paragraph tag to the text, the browser will automatically add a paragraph break to the text. But we should not rely on empty <p></p> to form a blank line, but should use <br /> line break tags.


Line break<br />
 In XHTML documents, the title or paragraph tag only provides a line break marker. If we need a blank line or multiple line breaks, we need a line break tag <br /> . In XHTML, it is invalid to press the Enter key to create a line break in the same way as editing Word. The browser will ignore the line break space generated in this way.
Examples:

XML/HTML CodeCopy content to clipboard
  1. <p> This is some content </p>​   
  2. < br   /> < br   />   
  3. < p > Here is some other content </ p >   

Since the line break tag only tells the browser that a line break is needed at this place and has no substantial content, this tag does not appear in pairs, and one <br /> only breaks the line once. If multiple line breaks are required, please enter multiple <br /> tags.
If you insert a <br /> tag in <p></p>, it will also produce a line break effect.


<br />or<br>?
 Although we can still achieve the line break effect by using <br>, that is the result of the browser being compatible with the HTML4.0 specification.
In the XHTML specification, for tags that are not paired, you only need to add a space after the end of the content and then close the tag with />, such as <br /> and tags such as <img /><input /> to be discussed later.
So it's <br /> instead of <br/> or <br> .

<<:  Solution to "No such file or directory" in locale after installing glibc-2.14 in CentOS6.5

>>:  Essential conditional query statements for MySQL database

Recommend

Detailed explanation of how to create multiple instances of MySQL 5.6 in centos7 environment

This article describes how to create multiple ins...

A brief discussion on the color matching skills of web pages (a must-read for front-end developers)

Generally speaking, the background color of a web ...

MySQL Series 3 Basics

Table of contents Tutorial Series 1. Introduction...

Forty-nine JavaScript tips and tricks

Table of contents 1. Operation of js integer 2. R...

A simple way to achieve scrolling effect with HTML tag marquee (must read)

The automatic scrolling effect of the page can be...

Calling the search engine in the page takes Baidu as an example

Today, it suddenly occurred to me that it would be...

How to Delete Junk Files in Linux Elegantly

I wonder if you are like me, a programmer who arr...

HTML page native VIDEO tag hides the download button function

When writing a web project, I encountered an intr...

Vue project implements file download progress bar function

There are two common ways to download files in da...

Detailed explanation of 2 methods to synchronize network time in Linux/CentOS system

Due to hardware reasons, the machines may not kee...

How to add vim implementation code examples in power shell

1. Go to Vim's official website to download t...

jQuery implements clicking left and right buttons to switch pictures

This article example shares the specific code of ...

Using JS to determine the existence of elements in an array in ten minutes

Preface In front-end development, you often need ...

Summary of experience in using div box model

Calculation of the box model <br />Margin + ...

Image hover toggle button implemented with CSS3

Result:Implementation Code html <ul class=&quo...