Basic grammar and semantics of HTML

Posted by dawieharmse on Mon, 15 Jul 2019 20:04:50 +0200

DOCTYPE

DOCTYPE(Document Type)

This declaration is at the front of the document, before the HTML tag, which tells the browser which HTML or XHTML specification the document uses.

DTD(Document Type Definition)

The declaration starts with <! DOCTYPE > and is case-insensitive. There is nothing in front of it. If there is anything else (except space), it will make the browser open quirks mode to render the web page under IE. Public DTD, the name format is registration // organization // type label // language. Registration refers to whether the organization is registered by the International Organization for Standardization (ISO), +Yes, - No. The organization is the name of the organization, such as: W3C. Types are typically DTDs. Label is the only descriptive name for the referenced public text, which can be accompanied by a version number. The final language is the ISO 639 language identifier of DTD language, such as EN for English and ZH for Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and framework-based HTML documents, respectively.

HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5 document type

DOCTYPE HTML ><! - Use HTML5 doctype, case-insensitive

meta

Character encoding used in declarative documents

html5 before
<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">

Keyword

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

Web Author

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

Index Method of Web Search Engine

<meta name="robots" content="index,follow">
Following tracks links and analyses target pages. This is the default behavior and can be ignored.
Index index index the web pages. This is the default behavior and can be ignored.
noodp does not use 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.

More meta settings

Label

Define the structure of the document to 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>html5 demo</h1>
            <nav>
                <ul>
                    <li>nav1</li>
                    <li>nav2</li>
                </ul>
            </nav>
        </header>
        <section>
            <h1>article aside</h1>
            <article>article</article>
            <aside>aside</aside>
        <section>
        <footer>footer</footer>
    </body>
</html>

For more labels, please refer to w3school

tips

html5 tags are richer and more complete, and div tags seem to have little use, but if you just want to add a style to the document, then div tags will come in handy.
Labels differ from browser to browser by default. In order for a web page to see the same effect in different browsers, it is usually necessary to format the label 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,div,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:''}blockquote,q{quotes:"" ""}a img{border:none}a{text-decoration:none}:focus{outline:0}

If you want to use HTML5 tags in browsers that do not support html5, you need to add a small piece of JavaScript code

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

Tag editable property contenteditable

<article contenteditable></article>

Topics: Front-end html5 IE encoding Javascript

Programmer Think

Basic grammar and semantics of HTML

DOCTYPE

meta

Label

Hot Topics