I’d like to discuss an html structure.
Note: I’ll use the word “best” many times here, but what i mean is what do YOU see as the most effective one in your experience. I know that there’s no something like “best of the best” cause it depends on context.
There is many ways to structure html, but i’m thiking of the one that includes best habits, looking from many perspectives. Not too many divs? As much named tags as possible? Like
<header>, <footer>, <article> … tags. It is good to use a
And so on… We’ve got Bootstrap and a container class. When it’s best to use it and when it is not. Do we use it only when we need to part a website part to column or it’s good to make each part of the website a container. For example i’ve got a
<header> and inside it i put a
<div class="container"> or is it usefull only when i need to part it into two columns? And so on with a
<footer> , etc…
Please share with me your experience in coding, what is the best habit in structuring an html. What is the easiest structure to read by the browsers and what is the best structure to mantain and what is the best structure compatible with the current technologies.
The code i placed here is the example code of how i think about html structure for now. Let’s discuss that please.
I’ll be greatfull for all the advices and point of views. Each is worthy for me.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>My Website</title> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href=./styles/main.css rel="stylesheet" type="text/css"> </head> <body> <header> <div class="container jumbotron"> <div class="row"> <div class="col"> <h1>My name</h1> <h2>my job name</h2> </div> <div class="col"> <img src="./assets/picture.jpg" class="rounded-circle main-picture mx-auto d-block"> </div> </div> </div> </header> <nav class="navbar"> </nav> <main> </main> <footer> </footer> </body> </html>