Analyze basic grammar and semantic writing rules of HTML-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Analyze basic grammar and semantic writing rules of HTML

怪我咯

Apr 30, 2017 am 10:47 AM

htmlSemanticsgrammar

This article organizes the basic syntax and semantics of HTML and provides examples. Friends who need it can refer to it

DOCTYPE

DOCTYPE(Document Type)

This statement is located at the very beginning of the document, before the html tag. This tag tells the browser which HTML or XHTML specification the document uses.

DTD(Document Type Definition)

The declaration starts with , it is not case sensitive, there is no content in front, if Having other content (except spaces) will cause the browser to turn on quirks mode in IE to render web pages. Public <code>DTD, the name format is registration // organization // type tag // language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), + means yes, - means no. Organization is the name of the organization, such as: W3C. The type is usually DTD. A tag specifies a description of the public text, that is, a unique descriptive name for the referenced public text, which can be followed by a version number. The last language is the ISO 639 language identifier of the DTD language, such as: EN means English, ZH means Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and framework-based HTML document respectively.

HTML 4.01 strict

HTML 4.01 Transitional

HTML 4.01 Frameset

HTML5 Document Type

meta

Declare the character encoding used in the document

Before html5

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
html5
<meta charset="utf-8">

SEO optimization

Title

<title>your title</title>

Page description

<meta name="description" content="your description">

Keywords

<meta name="keywords" content="your keywords">

Web page Author

<meta name="author" content="your name">

Web search engine indexing method

&lt ;meta name="robots" content="index,follow">

follow Follow the link and analyze the target page. This is the default behavior and can be ignored.

index Index the web page. This is the default behavior and can be ignored.

noodp does not use the Open Directory Project to create content descriptions.

noydir does not use Yahoo Directory to create content descriptions.

noarchive does not allow search engines to display cached versions of content.

cache allows search engines to display cached versions of content.

Nocache does not allow search engines to display cached versions of content.

Tags

define the structure of the document and make the markup of the document more semantic.

html5 demo
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>html5 demo</title>
 </head>
 <body>
 <header>
  <h1 id="html-nbsp-demo">html5 demo</h1>
  <nav>
  <ul>
   <li>nav1</li>
   <li>nav2</li>
  </ul>
  </nav>
 </header>
 <section>
  <h1 id="article-nbsp-aside">article aside</h1>
  <article>article</article>
  <aside>aside</aside>
 <section>
 <footer>footer</footer>
 </body>
</html>

tips

html5 tag is more abundant and complete, the p tag seems to have no use, but if If you just want to add a section of style to the document, the p tag will come in handy. The default style of the

tag will be different in different browsers. In order for a web page to have the same effect in different browsers, it is usually necessary to format the tag style first

@charset "utf-8";
html{margin:0;padding:0;border:0}a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,p,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,nav,object,ol,p,pre,q,section,span,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1.5;background:#fff}table{border-collapse:separate;border-spacing:0}caption,td,th{text-align:left;font-weight:400;float:none!important}table,td,th{vertical-align:middle}blockquote:after,blockquote:before,q:after,q:before{content:&#39;&#39;}blockquote,q{quotes:"" ""}a img{border:none}a{text-decoration:none}:focus{outline:0}

If you want to use the html5 tag in a browser that does not support html5, you need to add a small piece of JavaScript code

<script>
 document.createElement(&#39;header&#39;);
 document.createElement(&#39;nav&#39;);
 document.createElement(&#39;section&#39;);
 document.createElement(&#39;aside&#39;);
 document.createElement(&#39;article&#39;);
 document.createElement(&#39;footer&#39;);
</script>

tag Editable properties contenteditable

<article contenteditable></article>

The above is the detailed content of Analyze basic grammar and semantic writing rules of HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

How to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PM

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

What are the disadvantages of using native select on your phone?Apr 30, 2025 pm 03:12 PM

What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

How to optimize collision handling of third-person roaming in a room using Three.js and Octree?Apr 30, 2025 pm 03:09 PM

Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

What problems will you encounter when using native select on your phone?Apr 30, 2025 pm 03:06 PM

Issues with native select on mobile phones When developing applications on mobile devices, we often encounter scenarios where users need to make choices. Although native sel...

See all articles