newbie self learning web design. In theory, I've learned html and css. In practice I've hit a snag. Here is the barebones code so far.
<header>
<a id="site-logo" href="/"><img src="#" alt="Dot Design" /></a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<form id="search">
<input type="search" placeholder="Search" />
</form>
</header>
<div id="content>
<!-- content goes here -->
</div>
Here is the template I'm referencing for practice: http://min.us/i/braxZb11KQjfD
The problem is I'm not quite sure if:
everything in the red box should go in the header
only the jquery slider should go in the header
everything in the red box should not be in the header
or it doesn't matter and just a matter of preference
Since I have no experience, I'd like some feedback as to which method is correct? Or more generally accepted and preferred?
Thank you very much for your input.
Everything in the red box should not be in the header unless that content describes the page content. Which at this point it does't look like it does. It's just homepage content. Unless the intro is directly related to the slider there's no reason to combine the two.
<header></header>
<div id="content">
<figure class="hero"></figure>
<p class="lead"></p>
...
</div>
Would work fine as a setup. The HTML offers a way to group elements semantically (for instance the section and header) or to provide hooks for styling (#content and .hero etc).
Related
After reading What are the implications of using custom tags in HTML? I have decided to not use custom tags the way I was planning to use them so that I follow standards, and bots may read my code properly. Although, I wanted to know if rather than using custom tags for divs, if incasing these divs within custom tags would still cause any negative effect to my source.
I wouldn't be using: <SomeDiv> rather than <div class="SomeDiv">
Something more along the lines of:
<header>
<nav>
<div class="navWrap">
<div class="navGutz">
NAVBAR
</div>
</div>
</nav>
<logo>
<div class="logo">
LOGO
</div>
</logo>
</header>
<content>
<left>
<div class="myContent">
<topContent>
Main content and more divs
</topContent>
</div>
</left>
<right>
<div class="sidebar">
<news>
News
</news>
</div>
</right>
</content>
<footer>
<div class="social">
Social Links
</div>
<div class="copyright">
Copyright
</div>
</footer>
I ask because rather than using comments to label sections, I wanted to use tags. That way if for any reason I wanted to add style to the section in a whole, I would be able. Visually looking at it it seems a little redundant, but there would be more to it rather than what is just in the example.
So to restate the question, would incasing my content (that is up to standards) with custom tags cause any sort of negative effects against my site? Whether it be indexing, crawling, score, etc.
You should check this article on DEV. The article is about Custom HTML tags, Web Components, the Custom Elements spec and the few js libs.
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
I have a website coded with HTML responsive and the sidebar navigator element of the site disappears on mobile. The following is what I currently have in terms of code for this. I would like to have the sidebar work on mobile, would be grateful to anyone who can help.
<header id="header" class="skel-layers-fixed">
<img src="/images/logo.jpg" alt="" style="width:64px;height:48px;border:50;">
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Platform</li>
<li>Photos</li>
<li>Endorsements</li>
</ul>
</nav>
</header>
Your nav-element is inside your header-element. That means, that perhaps, depending on your CSS-styling, your nav-element can be hidden behind the image. Start by inspecting your source-code in the browser and se if it even generates correctly. Then go on from there... Try also to avoid inline-css-styling, by experience this can mess up your workflow and makes it harder to debugging, and for other to understand and read your code.
I have a problem with my page:
http://dennisadelmann.de/New/index.html
when my index page is loading, the Name (header) is jumping.
i think its because of the simpleweather plugin. but i couldnt find a solution
Here are the code of my header: (let me know if you need more of the code)
<div id="fadeMenu">
<ul class="navscroll">
<li>work</li>
<li>journal</li>
<li>contact</li>
</ul>
</div>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<header>
<nav>
work
journal
contact
</nav>
<div id="weather"></div>
<div id="name">
<h1>DENNIS ADELMANN</h1>
<p>communication design</p>
</div>
</header>
Thank you!!!!
You're right, it seems like it's because of the weather plugin.
To fix it you need to either make height:fixed where the weather appears (so changing the content doesn't matter)
OR
You could add some default content to the area when it's made that is later changed once the plugin is ran, something like a fallback inside the element tags: "The weather plugin is blocked. Please allow third party plugins on your browser."
Can we use multiple tags on the same page in html5?
I've read this article on Zeldman.com but it's not entirely clear to me
i.e.
<header><nav>links here</nav></header>
<footer><nav>links here</nav></footer>
Yes, absolutely. You can have multiple header, nav, and footer tags sans penalty.
As long as you're making sure you are using tags semantically and you aren't putting them in invalid places (they're block-level elements, so you can't put them inside an inline element, for example) then you shouldn't worry too much about what the sticklers are saying. It's all to easy to get caught up arguing about tiny details instead of moving forward on your project.
Yes, having multiple <nav> elements is absolutely ok.
You just have to make sure you're making them distinguishable for people using screen readers. You can do it by labelling each <nav> using aria-label.
<nav aria-label=’primary’>
<ul>
...List on links here...
</ul>
</nav>
<nav aria-label=’secondary’>
<ul>
...List on links here...
</ul>
</nav>
Or, if one of the <nav> as visible text on screen that can be identified as labelling element, you can use aria-labelledby like follows:
<nav aria-label="Site Menu">
<ul>
...List on links here...
</ul>
</nav>
<article>
<h1>Title</h1>
...
<nav aria-labelledby="id-1">
<h2 id="id-1">
Related Content
</h2>
<ul>
...List on links here...
</ul>
</nav>
</article>
You can read more about using Multiple Navigation Landmarks.
The answer is yes. You can have a <nav> tag in the footer, for more info check mdn <nav> documentation.