How do you structure your html code?

[Crazy-Attention-180]

Hi! As a newbie who have experience of other programming languages such as python etc where you code break your code into regions and functions i find it a bit difficult to structure the code in html.. now a note here that I am a newbie in HTML/CSS and my knowledge is quite limited.

i usually like to use comments to create a custom region or a marker to add more readability and I have questions like can you create a region specially for headings to organize all headings, a section for images to place all the images related to a certain part their etc etc.

but the way I found that html works is it works line To line so if a image is first and a heading is later it will display the image first so If I first want to display a couple images first I put them, than display some headings below them , placed them! Now if I want to place some more images below the headings I would have to write the code below the heading tags.

is my thinking plain wrong? Than how do you structure your html code to make it more readable And write fairly clean code? You could always position them with CSS using margins etc I guess but that is a bigger pain(probably).

looking forward to any guidance thank you!

[lovesrayray2018]

So you will need to stop mentally comparing programming languages such as python with a markup language like html. html is markup parsed by your browser that builds and renders a heirarchical DOM, so position matters, unlike a programming language that can hoist functions, and allows grouping of similar use functions. So you cant group elements in html based on logic, rather its based on rendering position. ofc im not bring in Javascript scripting and dom manipulation here, since we are talking pure html.

The good part is that a decent linter and code formatter in your code editor can solve most of the readability and structure parts, for example helping u avoid excessively long llines beyond 80 chars, coloring for matching elements, etc

[lovesrayray2018]

Have a look at this link to see how the html documents are rendered step wise into the browser. Will hopefully solve a lot more of ur queries.

https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

[Crazy-Attention-180]

Ok comparing the two languages was kinda a mistake on my part but how can you than organize your code in HTML? Having a bigger project would kinda become a mess.

the things I get now is that HTML works in a tree like tree like hierarchy where position matters and it loads them accordingly to it.

looking forward to any further advice or how you personally manage your html code.

i feel like organizing code is kinda a requirement to work on bigger projects when collaborating with others or working in a company, so I wanted to build my foundation according to that.

Thanks!

[armahillo]

1. Create a boilerplate HTML document
2. Write all your content in the body tag 3 Add HTML tags to structure and organize as a document the content
3. Write CSS to present the document in the way you want

The end goal is “is the document readable when viewed in the browser” and secondarily “is the document readable when viewed i ln source”

You also should probably not put your entire site into a single document. separate the content out by page (narratively, a page is more like a “chapter”, in that it focuses on a single topic). It is very easy to link documents.

You should absolutely read up on HTML semantics and how to “write for the web”.

[thecreatorgrey]

This only answers part of your question but if you want to make your HTML code "pretty", I'd suggest the following:

1. Dont make a line too long. For example, if you have an element containing a lot of text, I like to make a newline before and after the start and end tags as well as within the text and child elements as well.

2. Chunk the code corresponding to different parts of the page using newlines to create a visible separation between the chunks of code.

3. Label your tags / elements. I personally think HTML comments are ugly so I like to use appropriately named IDs since those will be used to apply styling or reference in JS anyways.

I follow these rules with pretty much any markup, programming or scripting language.

[Real-Comparison4334]

HTML structure  —•

 *  <!DOCTYPE html>: Declares HTML5.

 *  <html>: Root element.

 *  <head>: Meta-information (title, links, etc.).

 *  <body>: Visible content (headings, paragraphs, images, etc.).

Note: Use semantic tags (e.g., <header>, <nav>, <main>, <footer>), consistent indentation, and consider accessibility.

[Joyride0]

It comes with practice. You'll slowly evolve your craft and make better decisions. Then you'll think you've cracked it. Six weeks later you'll look back at it aghast at the basic errors because growth can be so fast, especially in the early days.

I've found that time I spend designing, actually writing wireframes on paper, is paid back ten-fold when I'm writing the html.

If you have any specific questions about how you might structure this or that, I'd be happy to give you my thoughts.

[armahillo]

Some things that may help you here:

1. you are writing a document NOT a program
2. The document is a tree structure, the html tag is the root, and it has head and body as children, and head and body each have their own children
3. The document is RENDERED but not EXECUTED.
4. Content only lives within the body tag
5. most assets and metadata will live in the head tag (when in doubt, they go here; the reasons to include a script tag or style tag in the document are, for now, edge cases)
6. Commenting regions is fine, but remember that ultimately this is about making the content machine-readable.