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;
    }

    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