Jump to content
Sign in to follow this  

Feedback on web page's semantic elements

Recommended Posts

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



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?


Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...