Jump to content

Feedback on web page's semantic elements


SSteven

Recommended Posts

I request an evaluation of the following web page, especially on the use of semantic elements:

https://jsfiddle.net/SSteven/qt9d2sfw/

Specifically:

1) At the top, 2 images are supposed to be displayed. (Currently, their alt text is displayed.) I have treated this as the <header>. I have used "float: left" to display both images horizontally.

Is the code for the header element and its sub-elements OK?

2) The top menu has been displayed in an <nav> element, which has been styled along with its sub-elements.

3) The "side menu" has been included in an <aside> element.
4) The <main> element contains an <article> element, which has the main content.

   Both the "side menu" and the <main> element are floated horizontally.

5) Finally, there is a <footer> element.

Basically, I'd like to ask:
1) Is the use of the semantic elements correct?
2) Is their styling done correctly or is there a better way?

I'd also like to ask about indentation guidelines for HTML code. I have indented the HTML code. What is the normal practice?

Thanks.

Link to comment
Share on other sites

A lot of these things that you've asked about will be unique to you unless you're working with enforced styling such a development team.

Code wise, a lot of it looks good. Only things that I'll pick out it:

  • Try throwing your CSS into a separate file. It will unclutter the main HTML code, and you'll be able to reuse it for other pages.
  • In my opinion <br /> tags are kind of a crutch? They have their place but, most of the time, you'll be able to do better with CSS

And on the note of the <br /> tags, one of them doesn't have an ending slash. This just looks like its been forgotten and it isn't make or break, however something that's really important is to be consistent across your tags. Your <a> tags inside the <footer> have spaces in between the href and = whereas the ones on your <aside> do not.

Just the main thing is to be consistent.

Have a look into the DRY principle. "Don't repeat yourself"

Edited by Funce
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...