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 Vinicius Bazan
      Sou leigo ainda no Java Script e não manjo de muita coisa ainda, eu preciso fazer uma função que que deve ser executada na pagina HTML, eu crio a função dentro da tag <script> na <head> do html, mas como eu chamo essa função no momento que eu precisar no <body>, o que eu devo digitar pro código saber que ali deve executar a função?
    • By Articulando
      Galera, seguinte. Estou tentando criar um evento em javascript que funciona da seguinte maneira; existem 5 checkbox na tela, ao selecionar dois checkbox os outros irão travar e não permitir o clique, se o usuário clicar novamente retirando a seleção de algum dos que foi selecionado ele volta a habilitar. Até então o código funciona blz, porém agora eu preciso fazer com que os dois primeiros checkbox contém como um único clique, ou seja, são 2 checkbox para travar, porém se eu selecionar o primeiro e o segundo eles contam como um, então eu o usuário poderia realizar outro clique em algum checkbox e ficariam 3 checkbox selecionados, porém isso só se aplica aos dois primeiros checkbox, caso não sejam eles é apenas dois cliques, se eles forem clicados o usuário pode escolher mais uma opção.
       
      o código atual está assim:
       
      <script type="text/javascript">
                  (function(){
                      "use strict";
                      var marcados = 0;
                      var verifyCheckeds = function($checks) {
                          if( marcados>=2 ) {
                              loop($checks, function($element) {
                                  $element.disabled = $element.checked ? '' : 'disabled';
                              });
                          } else {
                              loop($checks, function($element) {
                                  $element.disabled = '';
                              });
                          }
                      };
                      var loop = function($elements, cb) {
                          var max = $elements.length;
                          while(max--) {
                              cb($elements[max]);
                          }
                      }
                      var count = function($element) {
                          return $element.checked ? marcados + 1 : marcados - 1;
                      }
                      window.onload = function(){
                          var $checks = document.querySelectorAll('input[type="checkbox"][name="modalidades[]"]');
                          loop($checks, function($element) {
                              $element.onclick = function(){
                                  marcados = count(this);
                                  verifyCheckeds($checks);
                              }
                              if($element.checked) marcados = marcados + 1;
                          });
                          verifyCheckeds($checks);
                      }
                  }());
              </script>
       
       
      Quem conseguir me ajudar eu agradeço, preciso muito desse código rodando. 
    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
×

Important Information

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