HTML Structure: The correct way to use
You know that moment when something you thought was simple turns out to be way more important than you realized? That was me with HTML this week. I thought HTML was just about making text show up on a page, but its a lot more than that.
Here’s something that blew my mind: there’s actually a difference between elements and tags. I’d been using these words interchangeably like they meant the same thing (oops!). Turns out, tags are just the syntax bits while elements are the whole package: opening tag, content, and closing tag together. Small distinction, but it suddenly made everything make more sense.
Another interesting thing I learned is that HTML structure isn’t just about making things appear on my screen—it’s about making sure everyone can access the content. People using screen readers, keyboard navigation, or other assistive technologies rely on proper HTML to understand and navigate websites.And this could be using appropriate HTML tags. For example using the li-tags to list instead of a p-tag.
The heirarchy of the heading tags is also quite interesting. I used to just slap heading tags wherever I thought text should be bigger. H1 here, H3 there, whatever looked good. But there’s an actual hierarchy! H1 is your main title (use it once!), H2s break up major sections, H3s are subsections… it’s like creating an outline for your page. And apparently, this isn’t just for looks—screen readers use this structure to help people jump between sections.
File and Folder Organization
The second major area I explored this week was file organization. I’ve realized that a well-organized project structure is essential for maintaining code and collaborating with others and yourself even.
Its essential to group and organize files according to their role and function it makes projects much easier to navigate. For example, images go in an images folder, stylesheets in a CSS folder, and so on.
These folders and files should have appropriate naming conventions. Using hyphens (-) or underscores (_) instead of spaces in file and folder names. Spaces can cause issues in URLs and file paths, so using about-us.html instead of about us.html is essential practice.
Using clear, descriptive names for files and folders helps both current and future developers (including future me!) understand the project structure at a glance. Names like contact-form.html are far better than page2.html or unnecesarily long names that dont really serve a purpose..
References
- MDN Web Docs – HTML Basics – This is my new best friend for HTML questions
- HTML Semantic Elements
Leave a Reply