19 de maio de 2022 ● 3 min de leitura

HTML Started

Modelo para iniciar uma página HTML

Um modelo simples para copiar e começar uma página HTML, cansei de ter de lembrar toda vez :)

Substituir as informações nas tags:

Page Title: Título com o tamanho maáximo de 30 caracteres;
Page Name: Nome com o tamanho maáximo de 65 caracteres;
Page Description: Descrição com o tamanho maáximo de 155 caracteres;
url.page: Endereço permanente para o conteúdo;
/path/to/thumbnail: caminho da imagem do thumbnail com tamanho máximo de 300KB e um link com HTTPS.

Na variável og:type informar o tipo de conteúdo como website, article, book, profile ou os tipos de arquivos no OGP Type

Também alterar e informar as cores na lista dentro do :root completando com outras variáveis, não esquecendo de informar a cor do tema na tag theme-color

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="theme-color" content="#ed34a2" />

    <title>Page Title</title>
    <meta name="title" content="Page Title" />
    <meta name="description" content="Page Description" />

    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://url.page" />
    <meta property="og:site_name" content="Page Name" />
    <meta property="og:title" content="Page Title" />
    <meta property="og:description" content="Page Description" />
    <meta property="og:image" itemprop="image" content="/path/to/thumbnail" />
    <meta property="og:locale" content="pt_BR" />

    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://url.page" />
    <meta property="twitter:title" content="Page Title" />
    <meta property="twitter:description" content="Page Description" />
    <meta property="twitter:image" content="/path/to/thumbnail" />
  </head>

  <style>
    /* Reset CSS */
    *,
    *:before,
    *:after {
      margin: 0;
      padding: 0;
      outline: 0;
      box-sizing: border-box;
    }

    html {
      --14px: 0.875rem;
      --16px: 1rem;
      --18px: 1.125rem;
      --21px: 1.3125rem;
      --24px: 1.5rem;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    ol,
    ul {
      list-style: none;
    }

    a,
    a:hover,
    a:visited {
      text-decoration: none;
      color: inherit;
    }

    /* Content CSS */
    :root {
      --color-background: #282c35;
      --color-text: #ed34a2;
    }

    body {
      background: var(--color-background);
      color: var(--color-text);
    }
  </style>

  <body></body>

  <script></script>
</html>

Metatags adicionais

Algumas meta tags que podem ser incluidas

Autor do conteúdo

<meta name="author" content="Author Name" />
<meta name="twitter:creator" content="Author Name" />

As palavras chaves do conteúdo

Informando a lista de palavras chaves separado com vírgula, como css, html, javascript

<meta name="keywords" content="List of the keywords" />
<meta name="news_keywords" content="List of the keywords" />

Imagem de Icone

No exemplo está como PNG, substituir o tipo para outras extensões de arquivos

<link rel="icon" href="/path/to/icon.png" type="image/png" />

Referênciar arquivos

Podemos referências arquivos externos como

CSS externo

<link rel="stylesheet" href="/path/to/styles.css" />

Script externo

<script src="/path/to/scripts.js" />

Sitemap

<link rel="sitemap" type="application/xml" href="/sitemap.xml" />

com o modelo de sitemap

<urlset
    xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
    xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
>
    <url>
        <loc>https://url.page</loc>
        <changefreq>monthly</changefreq>
        <priority>0.5</priority>
    </url>
</urlset>

Referências

Meta Tags
Josh W Comeau - The Surprising Truth About Pixels and Accessibility

Comentários