Simple landing page markup with basic HTML

I'm writing the HTML for this website:

And this is the HTML I made:

```



Gustoso











Gustoso



Welcome
Menu
Reservations
News
Contact













Pastry with Love
We're bringing you fresh ingredients every day in ways you can't resist.


Our Menu








Art of Cakes
We create delicious memories


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptas magni consequatur numquam
debitis distinctio consequuntur a tempore autem nihil. Minus aspernatur sint distinctio fuga porro aut eius officiis, voluptas.


Chef Cook


Benito Gaspare

"Unique creatins for unite occasions."





Tastes so Good!









Tasty pancakes
Season Favourite


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptas magni consequatur numquam
debitis distinctio consequuntur a tempore autem nihil. Minus aspernatur sint distinctio fuga porro

Overall this is quite good, by far not the worst HTML I have seen.

I like that you use alt attributes on all your images, as you should.

I am going to assume that you have replaced all href's with # for the example.

I know you have said that you would prefer not to have any CSS reviewed, but it does cross into HTML with classes and ids so I will make one comment on that.

I have noticed that you have used some ids like `. This would be fine for in page links or Javascript but should not be used as a CSS selector, no id should. There is no need for that level of specificity in your css.

HTML elements

While your choice of HTML elements is generally quite good I think you are slightly misusing some of the HTML5 elements, particularly section and header. Remember: there is no shame in using div's.

Section

Most of your use of section is fine, the only use I have a problem with is the first one where you include the site nav and social media icons.

From
- HTML | MDN:


The HTML element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

Navigation and such I wouldn't call a thematic grouping of content, and the content of the header would be better moved to be a child of body. The remainder of the content in the section is, I think, a little to sparse to use a section so I would recommend a div.

Header

Apart from the header at the top of the page used the others incorrectly.

In the example below you seem to be using them in place of a hgroup. hgroup is like a heading element that can contain several elements, but it has been removed from the W3C spec and shouldn't be used.

These should be replaced with suitable header elements and the subtitles should remain p's styled as needed with css.



The Jibarito Sandwich
The best sandwaich you've ever tasted!






Class aptent

...


Lists

I have spotted this example, where you list some ingredients. I see this mistake quite often where people use divs instead of ul & li.

It might be helpful to ask yourself when writing this, "What am I doing?". If the answer is anything like "I am showing a list of…", then you know to use a ul or ol.

    
    ...
    

    
    ...
    
...

Anchors

I noticed that you are using these social media icons. Typically these would do something.
They could be a simple link you the company profile on each site, or if they are some type of sharing button they should still be a link and shouldn't rely on Javascript (see The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media ).

Structure

You should use the heading elements (h1 to h6) to describe the structure of a page. It is helpful to write the structure out as a nested list so you can see it without the distraction of HTML. There are also browser extensions that can do this for you.

At the moment you have:

• Pastry with Love

• We're bringing you fresh ingredients every day in ways you can't resist.

• Chef Cook

And then you seem to abandon headings. As you can see from the list this doesn't make a lot of sense.

Part of this is due to "We're bringing you fresh ingredients every day in ways you can't resist". HTML doesn't support subtitles, so every heading starts a section of related content, for example:

Pastry with Love

We're bringing you fresh...



If you look in the screen shot you can easily pick out headings like, Art of Cakes, Breakfast, etc. which you do seem to have recognised with the class title`.

StackExchange Code Review Q#140521, answer score: 4