Header Html – Titulo e subtitulo

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

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

      <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.

.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!

Veja o Resultado baixo!

Baixar Código Veja Funcionando