The title appears in the body

1

I have the following code:

*{  background: gray;
	display: block;
}
body {
	text-align: center;
}
#reproducir {
	width: 720px;
	margin: 20px auto;
	padding: 5px;	
	background: #999;
	border: 1px solid #666;
	border-radius: 5px
	background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Programando Reproductor</title>
	<script type="text/javascript" src="Reproductor.js"></script>
	<link rel="stylesheet" type="text/css" href="Reproductor.css">
</head>
<body>
	<section id="reproducir">
		<video id="video" width= "720" height= "400" src="musica.mp4" controls loop>
		</video>
		<nav>
			<div id="botones">
				<button id="reproducir" type="button" >
					Reproducir
				</button>
			</div>
			<div id="barra">
				<div id="progreso"></div>
			</div>
            <div style="clear: both"></div>  
		</nav>
	</section>
</body>
</html>

And, how it looks in the following capture, the title of the page appears in the body of the page:

Why does that happen and how can I solve it?

    
asked by Frnk 09.06.2018 в 06:17
source

1 answer

1

The header with the meta information of the page is head and not header . It is important to differentiate the two.

  • head "provides general information (metadata) about the document, including its title and links to scripts and style sheets. "
  • header "represents a group of introductory or navigational aids. It may contain some header elements, but also other elements such as a logo, a section that brings together sections of headlines, a search form or similar things. "

In your code you put header (which is a visible section) where it should be head (which is a hidden section). Change that and the problem will be solved.

    
answered by 09.06.2018 / 06:50
source