A semântica dessa lista está correta?
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!Discussão (2)
Carregando comentários...