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 this pointing problem in JavaScript function

this keyword Which object calls the function, and...

Use scripts to package and upload Docker images with one click

The author has been working on a micro-frontend p...

Detailed analysis of the chmod command to modify file permissions under Linux

Use the Linux chmod command to control who can ac...

Full HTML of the upload form with image preview

The upload form with image preview function, the ...

3 methods to restore table structure from frm file in mysql [recommended]

When mysql is running normally, it is not difficu...

MySQL latest version 8.0.17 decompression version installation tutorial

Personally, I think the decompressed version is e...

Html+css to achieve pure text and buttons with icons

This article summarizes the implementation method...

Analysis of common usage examples of MySQL process functions

This article uses examples to illustrate the comm...

Graphical explanation of the solutions for front-end processing of small icons

Preface Before starting this article, let’s do a ...

8 Reasons Why You Should Use Xfce Desktop Environment for Linux

For several reasons (including curiosity), I star...

Some useful meta setting methods (must read)

<meta name="viewport" content="...

SQL Server Comment Shortcut Key Operation

Batch comments in SQL Server Batch Annotation Ctr...

Let's talk about my understanding and application of React Context

Table of contents Preface First look at React Con...

Analysis of Nginx Rewrite usage scenarios and configuration methods

Nginx Rewrite usage scenarios 1. URL address jump...

Specific method to delete mysql service

MySQL prompts the following error I went to "...