I'm asking you about "meaningful structuring."

Hello!

ID Kim123hj, ^ - ^ I answer your question.

Isn't the markup that I wrote with the CSS design in mind messy?

<span class="bold-text">Daesil</span>
<span class="color-grey">
  <Small>Up to 4 hours</small>
  <mark class="color-pink">Membership</mark>
</span>

<span class="price-before-in-grey">
  <small>
    <s>35000</s>
  </small>
</span>
<span class="larger-text-bound">KRW 30,000</span>

Before discussing the messyness of the written markup, I would like to mention the name of the CSS class first. bold-text and color-grey It's good to be clear about what kind of decoration it is, but it's literally a name that only describes expressions, so it's not a good example.

For better class attribute names, we recommend that you write meaningful and expressive parts such as warning, info, error, and success.

For example, it would be nice to create a class property name based on the name of the information related to the room, such as the markup created below It is not recommended to use elements such as small, s, and mark for style purposes to show without reflecting the recommended meaning. The style you want to decorate can be styled with CSS. ^ - ^

<span class="room-type"> Daesil</span>
<span class="room-rental-info">
  Up to 4 hours
  <span class="tag-membership">Member</span>
</span>
<span class="room-rental-price-origin">35000</span>
<span class="room-rental-price">KRW 30,000</span>

If you look at other website codes, they use <div> elements a lot, can I use them like this?

From a meaningful structural point of view, <div> is not necessarily an element to be used, unlike elements such as titles, paragraphs, lists, citations, tables, and forms. The role of <div> is mostly used to bind or decorate elements.

The key here is to use <div> to bind or decorate elements, but to mark up meaningfully is also a problem to use <div>.

For example, it is a problem if you write <div> while ignoring what needs to be structured considering the meaning, such as buttons, titles, paragraphs, and dates. It's a misuse or abuse of <div>.

Good markup

<button>...</button>
<h2>...</h2>
<p>...</p>
<time>...</time>

Bad Markup

<div class="button">...</div>
<div class="heading is-2">...</div>
<div class="paragraph">...</div>
<div class="time">...</div>

When writing an HTML structure, all of the small elements and s elements I wrote above can be implemented in CSS, so is it right to pay attention to the structure without doing it? Or is it right to give minimal visual change even in the HTML structure creation stage?

HTML is a structural language. CSS is the language of expression. I made it for that purpose.

But in the days when HTML appeared, there was no CSS. So, even before the advent of CSS in the transition period, HTML had a purposeful attribute for decoration. Then, it became a problem that the structure and expression were mixed, and the language CSS for expression emerged. The era of separation of structure and representation has come. (20th century)

That's how the Web has evolved to improve its misconceptions, and in most practice today, structures and representations are written separately, unless they are specialized. Using the language of each role. (21st century)

In conclusion, I want you to do your best to create a meaningful structure. Please leave the expression to the CSS. --<

In the mission, it is a div element made to express the gps shape and 1.4km located on the right side of the screen, so should I wrap that 1.4km with p element? If you wrap it with a p element, it goes down to the bottom of Lee Ji-mi and I didn't wrap it for now. Also, is it okay not to modify the size of the image when marking up the structure of HTml?

There is no need to enclose 1.4km information with a shorting element. And I feel like I'm talking about it over and over again, but the structure shouldn't be sacrificed because of the expression. When you use a paragraph, you don't use it because of the phenomenon of moving below the image.

I don't know CSS well now, so I can feel frustrated just by looking at the screen. To give you a tip, you don't have to finish all the HTML at this stage to study CSS. At this point, if you go to the CSS part and study, and then look at the HTML markup again, it will be very helpful to solve the frustration and curiosity at this stage. ^ - ^

Lastly, you asked me about resizing the image, but it's not okay. As you'll learn later, it's good to give accurate image width and height information from the image optimization perspective, user experience (UX) perspective.