2 {{ upvoteCount | shortNum }}
2 {{ upvoteCount | shortNum }}

Div and semantic tags usage

by NamanRathore
1 replies
I'm new to HTML. Been learning for more than 2 months+ and I am as yet befuddled about the most "useful" approach to coding however I realize I shouldn't overthink it.

Question - For the example below, do I still need a div id="header" since there is a header class="header"? Is it because of the div's flexibility for styling purpose if I happened to add/style anything to it next time? I did see the Freecodecamp project website example having a semantic tag like header tag nested in non-semantic div. So I follow suit.

As for CSS, I never style anything to the div id="header". I asked this question because it feels the div is a little redundant and I assume, lesser tags and codes make cleaner and clearer coding?

Code:
.logo {
    margin: 20px 0 0 20px;
}

.logo img {
    max-width: 230px;
}

header {
    display: flex;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    justify-content: space-around;
    align-items: baseline;
}
Code:
<!-- Header Wrap-->
        <div id="header">
            <!-- Logo-->
        <header class="header">
            <div class="logo"><a href="#"><img src="../t/img/b.png" alt="logo" /></a></div>
            <!--Navigation-->
            <nav class="header-menu">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
            </ul>
            </nav>
        </header>
        </div>
#div #semantic #tags #usage
  • Profile picture of the author savidge4
    Originally Posted by NamanRathore View Post

    I'm new to HTML. Been learning for more than 2 months+ and I am as yet befuddled about the most "useful" approach to coding however I realize I shouldn't overthink it.

    Question - For the example below, do I still need a div id="header" since there is a header class="header"? Is it because of the div's flexibility for styling purpose if I happened to add/style anything to it next time? I did see the Freecodecamp project website example having a semantic tag like header tag nested in non-semantic div. So I follow suit.

    As for CSS, I never style anything to the div id="header". I asked this question because it feels the div is a little redundant and I assume, lesser tags and codes make cleaner and clearer coding?

    Code:
    .logo {
    margin: 20px 0 0 20px;
}

.logo img {
    max-width: 230px;
}

header {
    display: flex;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    justify-content: space-around;
    align-items: baseline;
}
    Code:
    <!-- Header Wrap-->
        <div id="header">
            <!-- Logo-->
        <header class="header">
            <div class="logo"><a href="#"><img src="../t/img/b.png" alt="logo" /></a></div>
            <!--Navigation-->
            <nav class="header-menu">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
            </ul>
            </nav>
        </header>
        </div>
    I get that you may think it is redundant, and no its not needed in 99% of uses.

    I personally develop sites and we use color coding for sections and subsections of content so say you have main pages, and then content related to men's, women's, boys and girls as an example. I would then have headers 2, 3, 4 and 5 men's would be blue women's would be pink, boys would be light blue and girls would be light pink - again as examples.

    But again 99% of the time, the header on a site is a static constant, and that portion of code is not needed.

    Hope that Helps!
    Signature
    Success is an ACT not an idea
    {{ DiscussionBoard.errors[11717873].message }}

Trending Topics