3
\$\begingroup\$

Could anybody have a look at my HTML code and tell if it's build upon the correct semantic way using the right tags, and not using unnecessary divs?

I'm still not sure if there any divs in my code which don't need to be there.

.main-club-bar-music-festival {
    overflow: auto;
}

.main-club-bar-music-festival h3 {
    margin: 0;
}

.img-club-air {
    position: relative;
}

.img-club-air img {
    width: 100%;
}

.img-club-air a:first-child {
    position: absolute;
    margin: 10px;
    width: 60px;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.img-club-air h2 {
    position: absolute;
    bottom: 0;
    font-size: 20px;
    width: 100%;
    padding: 10px;
    color: white;
    font-family: "LemonMilk"
}

#paragraph-p {
    padding: 20px;
    margin: 0;
    clear: both;
}

.info-rent-a-bike {
    width: 200px;
    margin: 20px auto;
    text-align: center;
    background-color: #eb6c74;
    display: block;
}

.info-rent-a-bike p {
    margin: 0;
    padding: 10px;
    color: white;
    text-transform: capitalize;
    transform: translateX(-5%);
}

.info-rent-a-bike img {
    margin-top: 10px;
    margin-left: 5px;
    height: 38px;
    float: left;
   
}

.show-me-the-way {
    display: block;
    width: 200px;
    margin: 20px auto;
    text-align: center;
    background-color: #eb6c74;
}

.show-me-the-way p {
    margin: 0;
    padding: 10px;
    color: white;
    text-transform: capitalize;
}

.show-me-the-way img {
    height: 38px;
    float: left;
}

.info-block {
    background-color: #eb6c74;
    color: white;
    padding: 10px 20px;
    text-transform: uppercase;
    font-family: "NeueHaasGrotesk Light";
}

.address-club {
    margin-bottom: 16px;
}

.address-club p {
    padding: 10px 20px 0 20px;
    margin-bottom: 0;
}

.address-club img {
    height: 40px;
    margin-left: 10px;
    float: left;
    margin-right: 10px;
}

.address-club a {
    line-height: 40px;
    display: block;
    color: #3b3b3b;
    text-decoration: underline;
}

.address-club a[target=_blank] {
    padding-left: 20px;
    color: #0000EE;
}

.padding-info-club {
    padding: 20px;
}

.regular-info-left li:nth-child(2) {
    margin: 2px 0;
}

.regular-info-right li:nth-child(2) {
    margin: 2px 0;
}

.regular-info-left {
    float: left;
    width: 49.5%;
    text-align: center;
    color: white;
     margin: 0;
    padding: 0;
    list-style: none;
}

.regular-info-left p {
    margin: 0;
}

.regular-info-left p {
    background-color: #3b3b3b;
    height: 50px;
    line-height: 50px;
    text-transform: uppercase;
}

.regular-info-right {
    float: right;
    width: 49.5%;
    text-align: center;
    color: white;
     margin: 0;
    padding: 0;
    list-style: none;
}

.regular-info-right p:nth-child(1) {
    margin: 0;
}

.regular-info-right p:nth-child(2) {
    margin: 2px 0;
}

.regular-info-right p:nth-child(3) {
    margin: 2px 0;
}

.regular-info-right p {
    background-color: #3b3b3b;
    height: 50px;
    line-height: 50px;
    text-transform: uppercase;
}

.info-feedback-on-page {
    margin: 10px 0;
    border-top: 1px solid #eb6c74;
    border-bottom: 1px solid #eb6c74;
    padding: 0px 0px 10px 20px;
}

.info-feedback-on-page button {
    border-radius: 40%;
    background-color: transparent;
    margin-right: 10px;
}

#button-yes {
    background-color: white;
    border-radius: 28px;
    border: 2px solid #44c767;
    color: #44c767;
    font-size: 15px;
    padding: 10px 25px;
    outline: 0;
}

#button-yes:active {
    position: relative;
    top: 2px;
    outline: 0;
}

#button-no {
    background-color: white;
    border-radius: 28px;
    border: 2px solid #e35656;
    color: #e35656;
    font-size: 15px;
    padding: 10px 25px;
    outline: 0;
}

#button-no:active {
    position: relative;
    top: 2px;
    outline: 0;
}
<main class="main-club-bar-music-festival">
        <div class="img-club-air">
            <a href="favourites.html"><img src="img/favorite-icon-add.svg" alt="add to favourites"></a>
            <img src="img/club-panama.jpg" alt="Club Panama">
            <h2>panama</h2>
        </div>
        <h3 class="info-block">regular info</h3>
            <ul class="regular-info-left">
                <li>
                    <p>dancing</p>
                </li>
                <li>
                    <p>go out with mates</p>
                </li>
                <li>
                    <p>expensive</p>
                </li>
            </ul>
            <ul class="regular-info-right">
                <li>
                    <p>edm</p>
                </li>
                <li>
                    <p>locals/foreigners</p>
                </li>
                <li>
                    <p>groups</p>
                </li>
            </ul>
        <p id="paragraph-p">Panama chose a bit of a peculiar spot to open a nightclub. Located outside the city centre, Panama created a diversified nightclub. The nightclub holds a lot of parties varying from electronic tp 80's and 90s parties. Panama also houses HappyHappyJoyJoy, an asian shared dining restaurant</p>
            <a class="info-rent-a-bike" href="http://www.ov-fiets.nl/huurlocaties?locatie=amsterdam&POST_AUTOCOMPLETE=%2Fhuurlocaties.xml" target="_blank">
                <img src="img/bicycle-icon.svg" alt="OV-Bicycle">
                <p>rent ov-bike
                    <br>€ 3,85,-/24 hour</p>
            </a>
            <a class="show-me-the-way" href="https://goo.gl/maps/EiZDqD3UDK72">
                <img src="img/location-icon.svg" alt="your location to destination">
                <p>show me the way</p>
            </a>
        <h3 class="info-block">average price for a drink</h3>
        <p class="padding-info-club">- € 2,30,-</p>
        <h3 class="info-block">entrance</h3>
        <p class="padding-info-club">- € 5,00,-</p>
        <h3 class="info-block">address</h3>
        <div class="address-club">
            <p>Panama
                <br> Oostelijke Handelskade 4
            </p>
            <a href="http://www.panama.nl" target="_blank">www.panama.nl</a>
            <a href="tel:0203118686">020 311 86 86<img src="img/phone-icon.svg" alt="call-icon"></a>
        </div>
        <h3 class="info-block">opening hours</h3>
        <p class="padding-info-club">Fr - Su: 21:00 - 05:00pm</p>
        <div class="info-feedback-on-page">
            <p>Was this information usefull for you as an international student?</p>
            <button id="button-yes">yes</button>
            <button id="button-no">no</button>
        </div>
    </main>

Improve this question
\$\endgroup\$

2 Answers 2

Reset to default
1
\$\begingroup\$

There isn't much to review in your code but I suggest

  • You should use class attributes only when you want to use more than once and in the case when you want to use once, id could suffice. E.g <div class="address-club"> should be <div id="address-club">
  • In as much as you didn't tag this as html5, I suggest using section rather than div . section is a semantic element and it provides more readability to your code
Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ the ul, and those li elements are just there for info, it's not a navigation. So could I put a <section> around the ul then? \$\endgroup\$
    – Niekket
    Nov 16, 2016 at 23:53
  • \$\begingroup\$ I will update my answer shortly @Niekket \$\endgroup\$
    – Tolani
    Nov 17, 2016 at 0:33
0
\$\begingroup\$

a vs. button

If the "add to favourites" function works via JavaScript, you should use a button instead of an a element.

If the user has to navigate to favourites.html to add it as favourite, using a is correct.

Use sectioning content elements explicitly

HTML 5.1 encourages:

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

So wherever you use a heading element (h1-h6), you could use a section element (or the more specific sectioning content elements article/aside/nav, if applicable), wrapping the heading and the content in its scope.

Your structure could look like:

<main>
  <article>
    <h2>panama</h2>

    <section>
      <h3>regular info</h3>
    </section>

    <section>
      <h3>average price for a drink</h3>
    </section>

    <section>
      <h3>entrance</h3>
    </section>

    <section>
      <h3>address</h3>
    </section>

    <section>
      <h3>opening hours</h3>
    </section>

    <div class="info-feedback-on-page">
    </div>

  </article>
</main>

No alt content for decorative icons

Instead of 

<img src="img/phone-icon.svg" alt="call-icon">

you should use an empty alt attribute

<img src="img/phone-icon.svg" alt="">

You already convey that it’s a telephone number with the the tel URI scheme and the anchor content (which is the telephone number).

If you think it’s not clear enough, the alt content should contain what the icon stands for, not the fact that it’s an icon (so call instead of call-icon).

br only if it’s meaningful

Don’t use the br element whenever you need a line break; only use it if it’s actually part of the content (like in addresses, in poems, …).

So instead of 

<p>rent ov-bike
  <br>€ 3,85,-/24 hour</p>

you could wrap one of the "lines" in a span and use CSS for the line break (e.g., display:block):

<p>rent ov-bike <span>€ 3,85,-/24 hour</span></p>
Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.