Header Html – Titulo e subtitulo
PRÓXIMO
Header Html Design Left
Postado: 30 de maio de 2023
Tempo de Leitura: 2 Minutos
Header Html – Titulo e subtitulo
Html Header – Para que serve ?
O elemento HTML <header> representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.
A tag Header é usado para definir uma seção de header, mas em relação ao elemento que a contém. Ou seja, pode ser usado como título de uma página inteira o uso mais comum, mas também como título de um artigo ou de qualquer outra parte do conteúdo da página.
Definição do <header> no Html5
O elemento <header> representa um contêiner para conteúdo introdutório ou um conjunto de links de navegação.
Um elemento <header> normalmente contém:
- Um ou mais elementos de título do <h1> ao <h6>
- Logotipo ou ícones
- Informação de autoria
É usada para organizar visualmente e estruturalmente o conteúdo, melhorando a acessibilidade e a semântica do site.
Veja neste artigo como criar um Header Html – Titulo e subtitulo personalizado com html css.
Nesta seção, projetaremos uma estrutura simples na tag <header> e a <h1> para inserirmos o titulo.
Essas são as tags que usaremos para criar o nosso Header Html com css.
Vamos Adicionar o HTML
HTML
<header class="box-header">
<h1 class="title-sub"><span>Front-end</span> Códigos <em>Html</em> e Css</h1>
</header> Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Header Html - Titulo e subtitulo.
CSS
.title-sub {
text-align: center;
position: relative;
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
font-weight: 100;
font-size: 35px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.title-sub em {
font-style: normal;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.box-header .title-sub span {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size:20px;
padding-bottom: 0.5em;
color: #ff8b12;
display: block;
line-height: 28px;
height: 30px;
letter-spacing: 6px;
}
.box-header .title-sub:before {
position: absolute;
left: 0;
bottom: -25px;
width: 80px;
height: 5px;
content: "";
left: 50%;
margin-left: -40px;
background-color: #ff8b12;
}Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Conclusão
O HTML Header, seja como <head> ou <header>, é essencial para o funcionamento e organização de uma página web. O primeiro serve para fornecer informações técnicas e de configuração, enquanto o segundo estrutura e apresenta informações iniciais visíveis ao usuário. Ambos são indispensáveis para criar sites eficientes, bem organizados e acessíveis.
Veja o Resultado baixo!
Deixe um comentário