Home>

I have a question in the book HTML5/CSS3 Modern Coating, but the code below

<main>
   HOT TOPIC 
  
  <!-Contents of HOT-TOPIC->
  
   NEWS 
  
  <!-NEWS content->
  
  
  <!-Contents of ARTICLES->
  
</main>
.hidden {
  display: none;
}


There was a statement that is the recommended markup, but I can't help it.

Perhaps you intend to implicitly separate sections by h2, but if you intend to separate sections, you can just separate them by section or div as shown in the code below without using the h2 tag. What about?

<mainhot-topic ">
  <!-Contents of HOT-TOPIC->
</Section>
<section>
     NEWS 
  <!-NEWS content->
</section>
<section>
  <!-Contents of ARTICLES->
</section>
</main>

Is it more conceptually correct in HTML to add a class and delete it?

This is a fundamental story, but I would appreciate your reply.

  • Answer # 1

    I haven't read the contents of the book, so I can't say anything about it ...
    I don't see what the recommendation is based on.

    First, from an SEO perspective,Unnecessary invisible elementsShould not be included as much as possible.
    There is a possibility that you will be subject to a penalty because you are aiming only for the upper display.
    In this syntax,
    When considering the sentence structure of HTML, it is invisibleh2It seems that the element does not need to be included.
    (Especially the bottom is called NEWSh2I don't need it because it has elements. )
    Also at the toph2Because it is considered to correspond to the page title,
    h1Should be marked up with.
    And it should not be invisible and the look should be styled.
    (It is possible to make it stylish enough with CSS)

    I don't know what the author intended and what the markup was for,
    Not very goodI have to say.

    Perhaps you intend to implicitly separate sections by h2, but if you intend to separate sections, you can just separate them by section or div as shown in the code below without using the h2 tag. What about?

    That's not the problem.
    The issue this time ish2Whether or not the invisibility of is not visible, in the first placeh2Whether or not there is is more important.
    As a markup,h2In the appearance position ofThere is no problem.
    ItsectionLet's separate withdivLet's separate with
    Regarding this syntaxThere is no particular change in the outline.

    However, one point,sectionThe element ish1 ~ 6You should put the element.
    Not always, but usuallysectionToh1 ~ 6It is assumed that the element is included.
    (sectionIt seems that it is related to shaping the outline)

    : Generic section element --HTML: HyperText Markup Language | MDN

    SosectionWhen separating with
    Rather, in ith2IsShould enterIt means that.

  • Answer # 2

    Perhaps you intend to implicitly separate sections by h2, but if you intend to separate sections, you can just separate them by section or div as shown in the code below without using the h2 tag. What about?

    About thisContent sectioningThere is something like that, which is explained in MDN as follows.

    Content sectioning elements organize the content of a document into logical pieces. Use sectioning elements to create a rough outline, such as header or footer navigation in the content of a page, or a heading that identifies a section of content.
    HTML element reference --MDN

    Make it clear that it is ARTICLES content. Or if you want to separateWhy don't you try using?

    What is ?

    The HTML element is self-contained within a document, page, application, site, etc., and represents a component intended to be delivered or reused individually (in a collection).

    I think that HTML tags are often used to determine what the content of a document points to in this way.

    Postscript
    I was also interested in SEO's point of view, so I looked it up.
    Although it is a top hit, I think the following article will also be helpful.

    Does the text hidden by "display: none" have an SEO effect? --seopack.jp
    Do not use "hidden content" for "SEO purposes".
    The use of "display: none" does not become SEO spam, but the act of unreasonably increasing the value of the site by "hidden content" or "cloaking" that is invisible to search users is called "SEO spam". It will be a factor of penalty.

    In addition to "use of display: none", "hide text color and background color with similar colors", "hide by placing an image on top of text", "hide by reducing font size", "text-indent:- "Hide with 9999px;" and "Hide keywords in alt attribute" have been used as SEO spamming acts, so we do not recommend using them when you do not need them.