Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Minha duvida é se a semântica está legal, e se fiz certo na segunda section do miolo do site. A section que me refiro é a com a class = "section-contato". Lá tem o endereço da empresa, o numero e email. Como no design não pode ter isso: Endereço: Tralálálálá, e sim uma imagem e do lado da imagem o endereço. A mesma coisa com o e-mail e o telefone. Vou mandar a photo do design que estou estudando e também o código. Em questão da imagem e design já está tudo certo. Meu problema só é se fiz certo semanticamente ao colocar no <li> o <h3>Address</h3> e depois o paragrafo com o conteúdo para indicar que aquele parágrafo refere-se ao endereço e assim por diante. Vou colocar só o HTML já que não estou precisando de ajuda com o CSS.
<!DOCTYPE html>
<html lang = "pt-br">
<head>
<title>Contact Us</title>
<meta charset = "UTF-8"/>
<link rel = "stylesheet" href = "_css/reset.css"/>
<link rel = "stylesheet" href = "_css/estilo.css"/>
</head>
<body>
<header>
<h1>Don't be a stranger ;)</h1>
</header>
<div class = "container tamanho">
<section class = "">
<section class = "secao-form">
<h2>Input your datas</h2>
<form action = "/action">
<div class = "container tamanho-form">
<p><label for = "cNome">Name: </label><input type = "text" name = "tName" id = "cNome" size = "39" maxlength = "50" placeholder = "Name"/></p>
<p><label for = "cMail">E-mail: </label><input type = "email" id = "cMail" size = "39" maxlength = "30" placeholder = "Email"/>
<p><label for = "cPhone">Phone: </label><input type = "text" name = "Phone" id = "cPhone" size = "39" maxlength = "25" placeholder = "Phone"/>
<textarea name = "menssagem" rows = "9" cols = "57" placeholder = "Message" id = "text-area"></textarea>
<input type = "submit" value = "Submit >"/>
<div>
</form>
</section>
<section class = "secao-contato">
<div class = "container tamanho-contato">
<h2>Ask Us Anything</h2>
<ul id = "localizacao">
<li class = "endereco">
<h3>Address</h3>
<p>350 7th Ave, New York, <br/> <span id = "linha-endereco">NY 760890, USA</span></p>
</li>
<li class = "email">
<h3>E-mail</h3>
<p>Support@halocity.com</p>
</li>
<li class = "telefone">
<h3>Phone</h3>
<p>+1 (212) 643-4534</p>
</li>
</ul>
<footer>
<ul class = "social">
<li><a href = "linkedin.com">LinkdIn</a></li>
<li><a href = "facebook.com">Facebook</a></li>
<li><a href = "twitter.com">Twitter</a></li>
</ul>
</footer>
</div>
</section>
</section>
</div>
</body>
</html>
Imagem do design que estou estudando: [https://drive.google.com/file/d/0Byt538E2KsCbME5haTJlNERyYzQ/view?usp=sharing](https://drive.google.com/file/d/0Byt538E2KsCbME5haTJlNERyYzQ/view?usp=sharing)
Uma pergunta adicional:
Notei que a página não tem um footer comum. Daí tive a ideia de colocar um footer no fim da segunda section onde tem as redes sociais. Isso semanticamente está correto ou é melhor deixar a página sem footer algum?
Obs: Não criei essa o design, peguei no dribble para treinar o css e html.
Desde já agradeço a todos!>
17 horas atrás, douglas79 disse:
Bom, como padrão seria interessante colocar o footer depois da tag de fechamento da </div>, daí aplica as propriedades do footer que julgar necessário e ele aparecerá. Mas vai de cada programador. Se achou que fica melhor sem, beleza.
Espero ter ajudado!
[]'s
Obrigado por comentar. Sim, pensei em colocar um footer ai, mas fiquei imaginando como se encaixaria no design, se no mesmo não há footer. Acho que da forma que fiz está semanticamente errado, porque coloquei o footer com as redes sociais dentro da section, tornando um footer da section. Acho que só pra conter o footer da forma correta, seria melhor que eu colocasse ele normal, mas com o CSS deixasse ele no formato a complementar a section superior, ficando com o mesmo formato que agente vê na foto. Não sei se é obrigatório ter footer na página, estou pesquisando aqui. Pelo que você viu do código, tem alguma coisa fora o footer que eu possa melhorar em questão de semântica?