One of my sites is huge and complex. So I try to make a group of links on bottom of my page to make sense for visitors of my page and also for a site crawlers.
I decide to use -nav- Tag and -h1-h2-h3- heading Tags. I will use CSS to display no difference between headings. (Headings i will use for SEO and i hope it will work)
I have two options to use -nav- Tag. My question is which option is better.
Option 1(one -nav- tag):
<nav>
<h1>Main links</h1>
HTML |
CSS
<h2>Secondary links</h2>
JavaScript |
jQuery
<h3>Third links</h3>
JavaScript |
jQuery
</nav>
Option 2 (many -nav- tags):
<nav>
<h1>Main links</h1>
HTML |
CSS
</nav>
<nav>
<h2>Secondary links</h2>
JavaScript |
jQuery
</nav>
<nav>
<h3>Third links</h3>
JavaScript |
jQuery
</nav>
All links point to different page on same domain
So which option should i use for SEO purpose. Please advice. Thank you.
Note:
This question is more SEO than about code, but i left it still on so my help some other person. If will be more downvotes i'll delete him. I choose to go with second version.
From my understanding you can have as many tags as you would like as long as they arent nested.
However in my opinion the first option is better.
Related
I want to write semantic beautiful no-nonsense HTML. When is the right time to include class and when it's not? Should I add class on every element of my HTML?
To write semantic markup, we must use HTML tags correctly so that our markup is both human-readable and machine-readable. When we write semantic markup we can no longer select HTML elements based on visual presentation. Instead, we select HTML elements based on their semantic meaning, and then use CSS to define the visual presentation of our content. When writing semantic markup, the presentation of web page elements is kept completely separate and distinct from the markup of the content itself.
<body>
<ul class="post">
<li class="title"> <h3>Title of Post</h3> </li>
<li class="content"><p> Lorem Ipsum bla bla..</p></li>
<li class="hashtag">#samplepost
</li>
</ul>
</body>
<style>
.title{code}
.content{code}
.hashtag{code}
</style>
or
<body>
<ul class="post">
<li> <h3>Title of Post</h3> </li>
<li><p>Ipsum bla bla..</p></li>
<li>#samplepost </li>
</ul>
</body>
<style>
.post > li > h3{code}
.post > li > p {code}
.post > li > a {code}
</style>
Which of these is more semantic? Should we use class on everything or only when necessary?
Only use classes when you want to style a group of elements in a similar way (and ids for unique elements), it can be confusing for someone picking up your code if class names don't have any styles attached to them, and it just adds clutter.
Using semantic tags will make your html more semantic - ie. header, nav, main, footer, aside - etc. Some of these tags even make it easier for screen readers to navigate. w3 schools has good info about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp
It is better not to be attached to HTML tags, who knows where else you will have to use a similar interface. It’s best to stick with some CSS methodology (for example BEM) and write styles based on CSS classes. From the presence of classes, the layout will not be less semantic. The main html tags to write correctly.
In general, if you want to avoid problems in the future, use the css classes.
I would write like this:
<body>
<div class="posts-list">
<h3 class="posts-list__title">Title of Post</h3>
<ul class="post-list__ul">
<li class="post-list__item">
<p> Lorem Ipsum bla bla..</p>
</li>
</ul>
<div class="posts-list__hashtag">
#samplepost
</div>
</div>
</body>
Creating classes everywhere is a lot of work and can potentially cause some problems later on. If you add a class to every HTML tag, imagine how hard to maintain the code is going to be if the project becomes bigger. As mentioned above there are specific methodologies which can be really helpful, and BEM is a popular, but not the only one, you can use other. If you don't want to use methodology and stick with simple classes for now (though at some point I really suggest diving into that topic, you don't have to know perfectly how to use specific methodology, but how they works, if you ever join any team working with code, then they are going to tell you what methodology they picked for the project), I suggest using second code, but with comments:
<body>
<!-- Post -->
<ul class="post">
<!-- Title -->
<li>
<h3>Title of Post</h3>
</li>
<!-- Content -->
<li>
<p>Ipsum bla bla..</p>
</li>
<!-- Hashtag -->
<li>#samplepost </li>
</ul>
</body>
<style>
.post>li>h3 {
code
}
.post>li>p {
code
}
.post>li>a {
code
}
</style>
Comments are really simple and powerful tool. They will help you getting oriented in the project really quick, and avoid adding unnecessary classes for semantics.
The first thing to note is your content is not a list, so you shouldn't be using ul/li. That bad semantics, and as such worse than no semantics at all.
Your semantic markup is this:
<body>
<h3>Title of Post</h3>
<p>Lorem Ipsum bla bla..</p>
#samplepost
</body>
If you want to create a containing block for your post, to might reasonably wrap it in a div element, and although it's not necessary for such simple content, you could also consider wrapping it in a main element. You could put your anchor inside a p element but that makes no semantic difference.
Now you add one or more classes to any element when it is sensible to do so. What is sensible? It means not going over the top, forcing a class onto an element just because it looks naked without one. Generally, a good rule of thumb is to add a class when there's a utilitarian purpose in doing so. Classes are a way of putting you content in to categories, so that categorisation should be useful in some way.
For example, it might be that you want to style all the content with a particular category a similar way. Or it might be that you want to add some common functionality via JavaScript to all the content in a particular category.
Or it might be that you want to identify a category of content for your maintenance purposes. For example, suppose you have a large document describing products that you sell. With each product is a price. Even if you have no intention of styling the price differently from the other content, nor have any relevant JavaScript, you might add a class of "price" to each one, so that when the time comes to update your prices, you can easily find them all in your editor, and thus make sure that you don't miss one.
For each utilitarian purpose, think about opportunities, rather than necessities. By adding a class to categorise some some content, you are creating an opportunity for common styling, or functionality, or discovery to be applied.
I've learned to make the main navigation with a list like that:
<ul>
<li>nav-item</li>
</ul>
Now additionally, I need two top navigations, one left for social buttons and another right for other things. Someone told me better to build those top navigations by 2 like that:
<div>
top-nav-item
</div>
And I'm confused. Why is that better? Could someone tell me the advantage of the second way?
Thank you~
I would recommend using <nav> elements, which is HTML5 spec (see also here). Semantically it fits better with navigational elements, and it might help understand search engines better what elements of your website they are looking at. You can put <a> elements inside the <nav>. A search engine might be able to better understand that those are links to other pages, because that is what anchor elements are made for (linking to other pieces of content).
For how it looks, it doesn't matter; pretty much all elements can be made to look like a menu with buttons. Furthermore, search engines are pretty smart nowadays, and they will probably understand most of your website anyway, even if you don't use the proper elements all the time.
That being said, those elements are there for a reason, so why not use them?
The mozilla developer network's example that I reference above uses the following, but to me personally it does not necessarily always make sense to put everything in a <ul> element.
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Why is that better?
It isn't.
HTML is a semantic markup language. It is designed to describe the semantics of your data.
You have a list of links.
The markup should express that it is a list of links not a series of generic blocks with links in them.
I have created example that you want please check below link.
Click on Run.
.nav{float:left;}
.nav li,.social li{float: left;margin-right: 22px;list-style: none;}
.social{float:right;}
<header>
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Contact</li>
</ul>
<ul class="social">
<li>Facebook</li>
<li>Google</li>
</ul>
</header>
What is the best approach for creating a website with multiple page navigation. I've done both in the past but i dont know with one is better.
In-page navigation:
<nav>
Home
Products
About Us
</nav>
<div id="home">
...
</div>
<div id="products">
...
</div>
<div id="about">
...
</div>
You can have multiple divs and hide them and show them using css when each link is active.
Site navigation:
<nav>
Home
Products
About Us
</nav>
You have multiple html files and you just redirect to them.
I think the most common way to do it is the second way, but if you dont use a server side code processor/compiler/library you will need to duplicate the layout(is this example just the nav but can be more).
Which one should i use for a simple website, different sections or different pages?
I'm trying to write a site using the most semantically correct HTML I can manage, and my client wants a navigation bar where each link has a title and a description/subtitle inside the clickable area. What's the best way to achieve this?
Here's what my code looks like right now:
<nav role="navigation">
<a href="dashboard.html">
<!-- There's an icon here but don't worry about that -->
<h4>My Dashboard</h4>
<p>Get an overview of your cases.</p>
</a>
<a href="new.html">
<h4>Submit Case</h4>
<p>Get help from the Service Center.</p>
</a>
</nav>
And for reference, here's what it looks like styled:
The accessibility guidelines I'm following specify that heading tags should be used in descending order (as in, <h3> may only appear after an <h2> tag, etc). The answers to this question seem to indicate that it's not a good idea to use headings in the navigation regardless.
I could use <p> tags for both the title and description, but I'd prefer for screen-readers to be able to tell that the title is more important.
I'm inclined to use a description list, but I can't find examples where they're used this way.
I ended up using styled <p> tags, but with a hidden colon between the title and the subtitle to still convey the hierarchy between them to screen-readers. Headings were the wrong way to go from the start, since the nav links aren't part of the page's content.
From what I understand, article is for a standalone content,section can be used to group a list of articles or can be used inside article to represent parts.
When implement this idea, I've got a case:
A page with main content being an article. After the article tag, I want to load a forum topic with all its replies. Each topic and reply is using article tag.
My question is-- Will it be confusing for assistive technology if I group the topic and its replies inside Section tag? The mark up look like this:
<div id="page">
<article role="main"> main content</article>
<section id="forum">
<article>topic content</article>
<article>reply-1</article>
<article>reply-2</article>
</section>
</div>
if the above markup can't provide an easy way for the assistive technology to understand the topic section is connected to the main content, what markup would you recommend ?
in this case i would almost certainly do it this way
<div id="page">
<article role="main">
<section id="main">
main content
</section>
<section id="forum">
topic content
<ul class="comments">
<li>reply-1</li>
<li>reply-2</li>
</ul>
</section>
</article>
</div>
Purely on the basis that you have an article, and within that article you have appear to have 2 sections, 1 for the main content, and 1 for the forum content.
within the forum content, you also have a list of comments.
To me anyway, this seems like the correct semantic way.
You can use them where ever you want. Their use is semantic. If you think it makes more sense to layout your code like that then do it.
However, most people will say that sections should be inside articles unless there are no articles.
I would consider using the header tag for the first article tag. Then make the section an article and the articles sections. Then put the header inside the article.
<div id="page">
<article id="forum">
<header role="main"> main content</header>
<section>topic content</section>
<section>reply-1</section>
<section>reply-2</section>
</article>
</div>
It is really just a matter of opinion, however, we don't yet know how google and other search providers will treat these. The idea is to give your code the same modular look that the layout has.