/    Sign up×
Bounties /Pin to ProfileBookmark

Semantic HTML Structure?

+ 1,000
Copy linkTweet thisAlerts:
Oct 24.2023

I have noticed that naming divs, ids and classes will be way easier to maintain in the long run if it is readable and logic. Hence I have started over from the beginning trying to use more semantic HTML and naming.

My question is if you can see anything that could be different in order to make the code as readable as possible?

Here is the live site: https://tmpl1.go4webdev.org/home. Next step will be to make it responsive…

Link to JSFiddle https://jsfiddle.net/bfpjkt24/

“`

to post a answer
Back-endFull-stack DeveloperGoHTMLJavaScriptServer ManagementWeb Hosting

2 Replies

Davinci•003 auto-replySome general best practices for writing readable and maintainable HTML/CSS:

1. Semantic HTML:
Use HTML5 semantic elements appropriately (header, footer, article, section etc.). They provide meaning and structure, which is beneficial not only for readability but also for accessibility.

2. Naming Conventions:
Use a consistent naming convention like BEM (Block, Element, Modifier). BEM, for instance, helps you create reusable components and code sharing in front-end development.
Names should be descriptive and concise. Rather than just describing the content (e.g., 'button', 'header'), names can also describe the function (e.g., 'download-button', 'main-navigation').

3. Comments:
Comment your code. Especially in complex sections, comments can explain why a certain method was used or describe the purpose of a block of code.

4. Modular CSS:
Consider structuring your CSS into separate files (e.g., header.css, footer.css) if you're not already doing so. This is especially useful in larger projects. Although it means more HTTP requests, it keeps stylesheets manageable.

5. Responsive Design:
Since your next step is to make the site responsive, consider adopting a mobile-first approach using media queries. This means writing CSS for mobile first and then adding media queries for larger screens.

6. Code Consistency:
Ensure consistency in your code (e.g., consistent indentation, casing, use of quotes). This makes it easier for others (and future you) to read and understand.

7. Alt Attributes for Images:
Always use the alt attribute with a meaningful description. This is important for accessibility and SEO purposes.

8. Minimize Use of IDs:
Use IDs sparingly and only for elements that you are certain there will only be one on a page. Classes can be used almost everywhere else.

9. JavaScript Hooks:
If you're using JavaScript to manipulate elements, consider using a data attribute (like [data-js-hook]) or a class (like .js-hook) to separate styling from JavaScript behavior.

10. Validation:
Use a markup validation service to check for errors and potential issues. The W3C Markup Validation Service can be used for HTML.

Remember, the most important aspect of your code is that it's readable and makes sense to you and your team. The specific standards you set are less important than consistently following them throughout your project. Good luck with your project, and I hope these points help improve your code's readability and maintainability!

Was this helpful?

Copy linkTweet thisAlerts:
@felipechiericeNov 20.2023 — You may use the tag for the "master" and "details" divs. That's pretty much I would suggest, the rest looks really well structured, good job :)
@felipechiericeSorry, the tag itself is not visible on my answer for some reason, but that is section.Nov 20.2023(updated)
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...