in ,

A free guide to HTML5 elements, Hacker News


      

        

CC0Contributors

A list of everything that * could * go in theof your document

Table of Contents

Below are the essential elements for any web document (websites / apps):

charset="utf-8">name="viewport"(content="width=device-width, initial-scale=1">  to consistently ensure proper document rendering.   Any other head element should come * after * these tags.  ->(Page Title)

⬆ back to top

Elements

Validelements includemeta,link,title,style,script,noscript, andbase.

These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.

charset="UTF-8">(Page Title)href="https://example.com/page.html">rel="stylesheet"(href=)"styles.css">  / * ... * /  

⬆ back to top

  to consistently ensure proper document rendering.   Any other head element should come * after * these tags. ->charset="UTF-8">name="viewport"(content="width=device-width, initial-scale=1">as possible, as the tag   only applies to resources that are declared after it. ->http-equiv="Content-Security-Policy"(content=)"default-src 'self'">name="application-name"(content=)"Application Name">name="theme-color"(content=)"# 4285 F4 ">name="description"(content="A description of the page">name="robots"(content="index, follow">name="googlebot"(content="index, follow">name="google"(content="nositelinkssearchbox">name="google"(content="notranslate">name="google-site-verification"content="verification_token">name="yandex-verification"(content=)"verification_token">name="msvalidate. 01 "content="verification_token">name="alexaVerifyID"(content="verification_token">name="p: domain_verify"(content=)"code_from_pinterest">name="norton-safeweb-site-verification"(content=)"norton_code">name="generator"(content="program">name="subject"(content="your document's subject">name="rating"content="General">name="referrer"(content="no-referrer">name="format-detection"(content=)"telephone=no">http-equiv="x-dns-prefetch-control"content="off">http-equiv="Window-Target"content="_ value">name="ICBM"(content="latitude, longitude">name="geo.position"(content=)"latitude; longitude">name="geo.region"(content=)"country [-state]">name="geo.placename"(content=)"city / town">

⬆ back to top

rel="stylesheet"(href=)"https://example.com/styles.css">rel="canonical"(href=)"https://example.com/article/?page=2">rel="amphtml"(href=)"https://example.com/path/to/amp-version.html">rel="manifest"(href=)"manifest.json">rel="author"(href=)"humans.txt">rel="license"(href=)"copyright.html">rel="alternate"(href=)"https://es.example.com/"hreflang="es">rel="me"(href=)"https://google.com/profiles/thenextweb"type="text / html">rel="me"(href=)"mailto: [email protected]">rel="me"(href=)"SMS:   15035550125 ">rel="archives"(href=)"https://example.com/archives/">rel="index"(href=)"https://example.com/article/">rel="Self"(type="application / atom   xml"href="https://example.com/atom. xml ">rel="first"(href=)"https://example.com/article/">rel="last"(href=)"https://example.com/article/?page=42 ">rel="prev"(href=)"https://example.com/article/?page=1">rel="next"(href=)"https://example.com/article/?page=3">rel="EditURI"(href=)"https://example.com/xmlrpc.php?rsd"type="application / RSD   XML "title="RSD">rel="Pingback"(href=)"https://example.com/xmlrpc.php">rel="webmention"(href=)"https://example.com/webmention">rel="micropub"(href=)"https://example.com/micropub">rel="search"href="/ open-search.xml"type="application / opensearchdescription   xml"title="Search Title">rel="alternate"(href=)"https://feeds.feedburner.com/example"type="application / rss   xml "title="RSS">rel="alternate"(href=)"https://example.com/feed.atom"type="application / atom   xml "title="Atom 0.3">rel="dns-prefetch"(href=)"// example.com/">rel="preconnect"(href=)"https://www.example.com/">rel="prefetch"(href=)"https://www.example.com/">rel="Prerender"(href=)"https://example.com/">rel="Preload"(href=)"image.png"as="image">

⬆ back to top

Icons

rel="icon"sizes=" (x)  "href="/ path / to / icon.png">rel="apple-touch-icon"href="/ path / to / apple-touch-icon.png">rel="mask-icon"(href=)"/ path / to / icon.svg"color="blue">

⬆ back to top

Facebook Open Graph

property="fb: app_id"content="123456789 ">property="og: url"(content=)"https://example.com/page.html">property="og: type"(content=)"Website">property="og: title"(content=)"Content Title">property="og: image"(content=)"https://example.com/image.jpg">property="og: image: alt"content="A description of what is in the image (not a caption)">property="og: description"(content=)"Description Here">property="og: site_name"(content=)"Site Name">property="og: locale"(content=)"en_US">property="article: author"(content=)"">

(Twitter Card)

name="twitter: card"content="Summary">name="twitter: site"(content=)"@ site_account">name="twitter: creator"(content=)"@ individual_account">name="twitter: url"(content=)"https://example.com/page.html">name="twitter: title"(content=)"Content Title">name="twitter: description"(content=)"Content description less than 200 characters ">name="twitter: image"(content=)"https://example.com/image.jpg">name="twitter: image: alt"content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters. ">

Twitter Privacy

If you embed tweets in your website, Twitter can use information from your site to tailor content and suggestions to Twitter users.More about Twitter privacy options.

name="twitter: dnt"(content=)"on">

Schema .org

lang=""itemscopeitemtype="https: // schema .org / Article ">          rel="author"(href=)"">      rel="publisher"(href=)"">      itemprop="name"(content="Content Title">      itemprop="description"(content="Content description less than 200 characters ">      itemprop="image"(content="https://example.com/image.jpg">

Note:These meta tags require theitemscopeanditemtypeattributes to be added to Thetag.

  • 🛠 Test your page with the (Structured Data Testing Tool)

Pinterest

Pinterest lets you prevent people from saving things from your website, accordingto their help center. Thedescriptionis optional.

name="Pinterest"content="nopin"(description=)"Sorry, you can't save from my website!">

Facebook Instant Articles

charset="utf-8">property="op: markup_version"(content=)"v1.0">rel="canonical"(href=)"https://example.com/article.html">property="fb: article_style"(content=)"myarticlestyle">

(OEmbed)

rel="alternate"type="application / json   oembed"  href="https://example.com/services/oembed?url=http://example.com/foo/&format=json "  title="oEmbed Profile: JSON">rel="alternate"(type="text / xml   oembed"  href="https://example.com/services/oembed?url=http://example.com/foo/&format=xml "  title="oEmbed Profile: XML">

⬆ back to top

Browsers / Platforms

(Apple iOS)

name="apple-itunes-app"content="app-id=APP_ID, affiliate-data=AFFILIATE_ID, app-argument=SOME_TEXT">name="format-detection"(content=)"telephone=no">rel="apple-touch-icon"href="/ path / to / apple-touch-icon.png">rel="apple-touch-startup-image"(href=)"/ path / to / launch.png">name="apple-mobile-web-app-title"content="App Title">name="apple-mobile-web-app-capable"content="yes">name="apple-mobile-web-app-status-bar-style"content="black">name="apple-itunes-app"content="app-id=APP-ID, app-argument=http / url-sample.com">rel="alternate"(href=)"ios-app://APP-ID/http/url-sample.com">

(Google Android)

name="theme-color"content="# E 64545 "">name="mobile-web-app-capable"(content=)"yes">name="google-play-app"content="app-id=package-name">rel="alternate"(href=)"android-app://package-name/http/url-sample.com">

(Google Chrome)

rel="chrome-webstore-item"href="https://chrome.google.com/webstore/ detail / APP_ID ">name="google"(content="notranslate">

(Microsoft Internet Explorer)

http-equiv="x-ua-compatible"(content=)"ie=edge">name="skype_toolbar"(content="skype_toolbar_parser_compatible">name="msapplication-config"(content=)"/ browserconfig.xml">

Minimum required xml markup forbrowserconfig.xml:

                src="small.png"/>        src="medium.png"/>        src="wide.png"/>        src="large.png"/>        

⬆ back to top

Browsers (Chinese)

(Browser)

name="renderer"(content="webkit | ie-comp | ie-stand">

(QQ Mobile Browser)

name="x5-orientation"(content=)"landscape / portrait">name="x5-fullscreen"(content=)"true">name="x5-page-mode"content="app">

(UC Mobile Browser)

name="screen-orientation"(content=)"landscape / portrait">name="full-screen"(content=)"yes">name="imagemode"(content="Force">name="browsermode"(content="application">name="nightmode"(content="disable">name="layoutmode"(content="Fitscreen">name="wap-font-scale"content="no">

⬆ back to top

property="al: ios: url"content="applinks: // docs">property="al: ios: app_store_id"content="12345 "">property="al: ios: app_name"content="App Links">property="al: android: url"content="applinks: // docs">property="al: android: app_name"content="App Links">property="al: android: package"content="org.applinks">property="al: web: url"content="https://applinks.org/documentation">
  • 📖 (App Links)

⬆ back to top

Other Resources

⬆ back to top

⬆ back to top

Other Formats

⬆ back to top

Translations

⬆ back to top

Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The (HEAD) repository consists of two branches:

1.master

This branch consists of theREADME.mdfile that is automatically reflected on thehtmlhead.devwebsite. All changes to the content of the cheat sheet as such should be directed to this file.

Please follow these steps for pull requests:

  • Modify only one tag, or one related set of tags at a time
  •   

  • Use double quotes on attributes
  •   

  • Don’t include a trailing slash in self-closing elements – the HTML5 spec says they’re optional
  •   

  • Consider including a link to documentation that supports your change

2.gh-pages

This branch is responsible for thehtmlhead.devwebsite. We useJekyllto deploy theREADME.mdMarkdown file throughGitHub Pages. All website related modifications must be directed here.

You may want to go through the (Jekyll Docs) and understand how Jekyll works before working on this branch.

Contributors

Check out all the super awesomecontributors.

Author

Josh

License

⬆ back to top

      

    

Brave Browser
Read More
Payeer

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

Eat Less Red Meat, Scientists Said. Now Some Believe That Was Bad Advice., Hacker News

Eat Less Red Meat, Scientists Said. Now Some Believe That Was Bad Advice., Hacker News

Tesla workers union: Elon Musk illegally tried to discourage unionizing, Recode

Tesla workers union: Elon Musk illegally tried to discourage unionizing, Recode