Jump to content
keven1406

A semântica dessa lista está correta?

Recommended Posts

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

 

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!

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites
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? 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Ewfc2005
      Queria saber como faço para fazer um texto aparecer ao rolar a pagina
      igual ao desse site: https://ciesalon.com/services
    • By Aureo Almeida
      Problema em definir largura e disposição horizontal de tabelas com resultado de while
      Como iniciante em programação estou tendo problemas para estilizar uma tabela dentro de um script PHP. Possuo o seguinte script:
      <?php $sql = 'SELECT * FROM psd_produtos'; $stmt = $conn->query($sql); echo '<table>'; while($row = $stmt->fetch(PDO::FETCH_OBJ)){ echo " <td> <tr><h1>$row->prd_nome <br /></h1></tr> <tr><p>$row->prd_detalhe <br /></p></tr> <tr>$row->prd_valor <br /></tr> </td> "; } echo '</table>'; ?> Ele funciona perfeitamente, buscando e produzindo um loop das informações que preciso, porém, gostaria que o resultado me retornasse em tabelas que ficasse dispostas horizontalmente lado a lado, e imaginei colocar uma classe CSS que estabelecesse a largura da tabela em 400px com um float que me permitiria alinhar o resultado em “4 colunas”. Porém, essa classe não funciona dentro do script.
      Tentei echo '<table class="tabela-produto">'; e não funciona.
      A mesma classe, que estabelece uma largura para a tabela, aplicada a uma tabela fora do script funciona e isso tirou minha dúvida se este tópico seria sobre CSS/HTML ou PHP.
      Como posso fazer para obter meu objetivo com este script, alinhando horizontalmente o resultado do while em tabelas dispostas horizontalmente em 4 colunas?
    • By Mansnotrich
      tenho este código no login.php:

       
      E funciona bem no web mas depois fiz este codigo em css e nao aparece no web:

       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.