patternhtmlMinor
Positioning text and images on a site grid
Viewed 0 times
gridtextsiteandimagespositioning
Problem
I've just started learning HTML and CSS. Currently I'm creating a test site to practice with.
I'm just after an early idea if the principles I'm using are correct. The below is an snippet from the main body of my HTML code. It's just about positioning text and images on a grid at the moment. I seem to be using a lot of
Some of the alt text is work in progress and repeated currently hence why it repeats.
Can someone tell me if the structure is ok, or not and what I'd need to do to change this?
I'm just after an early idea if the principles I'm using are correct. The below is an snippet from the main body of my HTML code. It's just about positioning text and images on a grid at the moment. I seem to be using a lot of
divs with IDs in the CSS for styling etc.Some of the alt text is work in progress and repeated currently hence why it repeats.
Can someone tell me if the structure is ok, or not and what I'd need to do to change this?
About Us Our Cheeses Contact Us
"QUOTE 1 - We really love the taste of your cheese, we will be back for more"
"QUOTE 2 - We really love the taste of your cheese, we will be back for more"
Solution
a) Don’t use
b)
c) This is not an error, but an opinion-based advice: If you don’t have a strong reason, don’t add
    to separate the navigation links. You could use ul instead (and style it with CSS display:inline; if required):
About Us
Our Cheeses
Contact Us
b)
div has no meaning. You should only use div if there is no other appropriate, "narrower" element. If you are quoting something, use blockquote. If you have a navigation menu, use nav. Of course you can use div in addition to those appropriate elements, if needed.c) This is not an error, but an opinion-based advice: If you don’t have a strong reason, don’t add
id attributes just because you need a styling hook. You could use the class attribute even for what some call "unique" elements. Good reasons to use id are: in-page links (fragment identifier) and, sometimes, JavaScript hooks.Code Snippets
<ul>
<li><a href="…">About Us</a></li>
<li><a href="…">Our Cheeses</a></li>
<li><a href="…">Contact Us</a></li>
</ul>Context
StackExchange Code Review Q#29777, answer score: 3
Revisions (0)
No revisions yet.