HTML and CSS

Question

Hey,

I did Nav for example. Is it good or can it be improved?

I wanted to make the logo be on one side, all the links in the middle and the login on the other side.

https://www.sololearn.com/en/compiler-playground/WjF3umxjB9nZ

Thanks for help.

Answer 1

It seems like you've already done a great job with your design.
But here's a tip: HTML 5 is all about  "semantic elements."
Instead of just using divs for everything, try using the proper elements for each section.
For example, use the header tag for your headings section and the nav tag for your navigation section.
The purpose of doing that is for SEO. It allows search engines and screen readers to better understand the structure and content of your website.
You could learn more about these tags and their uses here.
https://www.w3schools.com/html/html5_semantic_elements.asp

Answer 2

Yes that works. People tend to put the nav element inside the header because that is generally where navigation lives, but there is no rule that says this element has to be inside the header. It is whatever you prefer/choose to do. Also you already have login, so theres no need for signin.

<header>
        <span class="logo">Logo</span>
        <nav>
            <ul>
                <li><a href="#">text</a></li>
                <li><a href="#">text</a></li>
                <li><a href="#">text</a></li>
                <li><a href="#">text</a></li>
            </ul>
        </nav>
        <a href="#" class="login">Login</a>
    </header>
https://sololearn.com/compiler-playground/WQoVxIxLvwu4/?ref=app

Answer 3

I hope you found this information helpful. Happy Coding!

Answer 4

https://sololearn.com/compiler-playground/WjF3umxjB9nZ/?ref=app

Answer 5

Please resend your code click + and click insert code

Answer 6

How? I just checked incognito and the link to the code works.

Answer 7

RaymanCoder
maybe make it responsive?

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Answer 8

Chris Coder
Like this one?
https://www.sololearn.com/en/compiler-playground/WjF3umxjB9nZ

or only the main div change to header/nav/etc?

Answer 9

Thanks Chris Coder!