HTML 5: #Header or <header> - html

I am a little confused now by html so i've a question about the semantic element:
Should i use like this?
<html>
<head>
<title>Some page</title>
</head>
<body>
<header class="main-header">
<!-- menu and imaganary logo -->
<nav>
<ul>
<li>Demo</li>
</ul>
</nav>
</header>
</body>
</html>
Or this?
<html>
<head>
<title>Some page</title>
</head>
<body>
<div class="main-header">
<!-- menu and imaganary logo -->
<nav>
<ul>
<li>Demo</li>
</ul>
</nav>
</header>
</body>
</html>
I read http://html5doctor.com/the-header-element/ about the header element. It tells that it usefull for the headings of a <article>
It doesn't give me information about this situation.

<header> is also good for the page header or for a <section>'s header not just for articles. You can use both your examples without a problem. I recommend you use <header> for easier readability.

According to the HTML Specification
The <header> element is intended to usually contain the section's heading (an <h1>-<h6> element or an <hgroup> element), but this is not required. The element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
So, you should probably go with the first example, although the second one too can be used without a problem.
Also you can directly use the header element in your CSS like below.
header {
// style the header
}

Related

Why we write header and footer element inside of the body element in HTML5?

When we code in html5 we usually write code in this format
<!DOCTYPE html>
<html>
<body>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
</body>
</html>
And like this
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</body>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning? I mean this way
<!DOCTYPE html>
<html>
<head>
</head>
<header>
<nav>
<!-- Navigation Bar -->
</nav>
</header>
<body>
<p> Middle stuff of the website here. </p>
</body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning?
Because the semantic meaning they have isn't what you think it is.
The <head> contents data about the document while the <body> contains the parts of the data that get rendered.
A <header> and <footer> contain a header and footer for something which could be the <main> part of the document, or could be a <section> or something else.

HTML5:Parallax effect and navigation bar. Problem with headers

I'm trying to make a website with a navigation bar and parallax effect,but i have a problem. Navigation bar and parallax effect use the same header in body and i wish to know how i can use multiple headers on a page. Can you add please a code example with multiple headers that can be edited separated in CSS?
I will atach down my code
<!DOCTYPE html>
<html>
<head>
<title>Ce inseamna o cariera in it si tech?</title>
<link rel="stylesheet" href="Main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header class="navigation-bar">
<div class="container">
<div class="logo">
<img src = "IT & TECH.png" width = 200px height = 99px >
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Cum sa incepi o cariera?</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
PS I tried with header1 and header2 but i can't edit them in CSS file.
Use section instead of nav or header and assign id/class for it may be it will help

How do I get my nav links in the nav bar?

I'm not sure why this is happening. The tag that is the title "Don't Be Square" is in the nav bar, but not the links. What am I missing here in the CSS or the HTML that will bump it up inside there? enter image description here
I think, you have header "Don't Be Square" after that you are righting code for Nav bar. And you wanted to bring your nav bar top right. To do so, you can right css for your title.
use float: left; there other way also you can acheive, for that you have to share the code.
Hope it will help you.
It would help if you posted some of the source code along with it. The only thing that I can potentially think of by just the image is that you are using some sort of header (h1, h2, etc) followed by some other tag that isn't inline (div, p, etc). Since both are block that could be why it displays on the line after. If this is the problem, a tags are inline so simply putting the tags within the body of the h1 could suffice such as
<h1>Don't Be Square <a some link here/> <a another link/> <a third link></h1>
and then styling the links differently from the h1 by giving them an id or using the css identifier
h1 a{ your styling here}
Again I can't help much because there is no source but hopefully this helps.
This is just an example you may follow it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Don't Be Square</a>
</div>
<ul class="nav navbar-nav" style="float: right;">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
</html>
View it in full screen if not the navbar will wrap. Good luck

href doesn't appear as a clickable link

I am trying to make an unordered list with clickable links, but none of them appears like that.
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I was expecting a list of clickable links, but I get a list containing the set items but without their clickable links.
I am new to web developing so I am assuming I have overlooked something.
edit: I am using a plugin named Emmet whivh I used to make the block/section.
you should write words into link content
like:
sampletest1
The problem is that you are closing the anchor tag before the content.
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
It gives nothing because there is no label for the anchor tag.
You should change like
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
This is because you must write your text inside the a-tag,
like this:
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>

HTML Page - Header & Footer - Redundancy

I am creating a HTML/CSS page which has 4 link,
Home.html
Details.html
ContactMe.html
AboutUs.html
I want to keep this as Header in all the HTML pages associated.
Also the Page has a Footer which contains the a tagline sentence.
How do I avoid Coding the Header and Footer in all the HTML pages.
Thanks!
see : http://www.w3schools.com/php/php_includes.asp
there are examples of simple PHP scripting
if you can use PHP (i recommend) then you can simply include your header file:
eg. index.php:
<html>
<head>
</head>
<body>
<header>
<? include('header.html'); ?>
</header>
</body>
</html>
If you have to strictly use HTML then you can load html content with jQuery
eg. index.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("header").load("header.html");
});
</script>
</head>
<body>
<header></header>
</body>
</html>
UPDATE:
In header.html you can have your menu as ul list
<ul>
<li>Home</li>
<li>Details</li>
<li>Contact Me</li>
<li>About Us</li>
</ul>