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, as seen in the screenshot below, the title of the page appears in the body of the page:
Why is this happening and how can I fix it?
The header with the meta information of the page is
head
and is notheader
. 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 navigation aids. It can contain some header elements, but also other elements such as a logo, a section that brings together header sections, a search form, or the like.”In your code you put
header
(which is a visible section) where it should behead
(which is a hidden section). Change that and the problem will be fixed.