Semantic HTML

HyperText Markup Language

It’s not a programming language

<img scr="post-img.jpg" alt="HTML code on a screen"/>

• alternative text(alt) is an important attribute. it allows search engines such as google chrome to actually know what is in the image, and by specifying the description of the image, we can also allow blind people to use a website.(They will have the screen reader read the alternative text so the description to them)
• some elements don’t need a content and even closing tag.

    <nav>
      <a href="blog.html">Blog</a>
      <a href="#">Challenges</a>
      <a href="#">Flexbox</a>
      <a href="#">CSS grid</a>
    </nav>

• Once we reach the section where we build some layouts and actually also in the next section, just on CSS, it will be very important to have all these different parts inside of their own containers.
• Same as <header></header> element. it doesn’t really do anything, but you tell the browser like, “Hey, all of this here is our webpage header”

Using Semantic elements is really important.

One of the reasons is a search engine optimization, which basically means that a search engine such as Google will be able to understand the structure of your content. And therefore they will be better able to analyze what your content and what your webpage is all about. Also writing semantic HTML is extremely important for accessibility and especially for people who rely on screen readers to consume on web pages.

 

 

---

나의 첫 코딩.

   <aside>
      <header>
        <h4><strong>Related posts</strong></h4>
      </header>

      <ul>
        <li>
          <img src="img/related-1.jpg" width="75" height="75" />
          <a href="#">How to Learn Web development</a>
          <p>By Jonas Schmedtmann</p>
        </li>
        <li>
          <img src="img/related-2.jpg" width="75" height="75" />
          <a href="#">The Unknown Powers of CSS</a>
          <p>By Jim Dillon</p>
        </li>
        <li>
          <img src="img/related-3.jpg" width="75" height="75" />
          <a href="#">Why Jacascript is Awesome</a>
          <p>My Matilda</p>
        </li>
      </ul>
    </aside>

• 부족한 점: alt element가 중요하다고 그렇게 말했건만 빼먹었다. 이미지를 설명하는 alt attribute 꼭 사용하기!!!

 

 

---

 

Converse Chuck Taylor All Star Low Top

$65.00

Free shipping

Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple.

More Information →

Product details

• Lightweight, durable canvas sneaker
• Lightly padded footbed for added comfort
• Iconic Chuck Taylor ankle patch.

<article>  
  <h1>Converse Chuck Taylor All Star Low Top</h1>
<img src="https://i.ibb.co/Jr7Wh1d/challenges.jpg" alt="Converse Shoese" width="250" height"250"/>
  <p><strong>$65.00</strong></P>
<p>Free shipping</p>

<p>Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple.</p>

<a href="#">More Information &rarr;</a>

<h4>Product details</h4>
<ul>
  <li>Lightweight, durable canvas sneaker</le>
<li>Lightly padded footbed for added comfort</li>
<li>Iconic Chuck Taylor ankle patch.</li>

<p><button>Add to cart</button></p>
  
</ul>

</article>

I used an h2, actually not an h1 because of that idea of this being a component within a bigger page. And so each page should only have one h1 and so if we then have multiple articles, then each of them should just be an h2.

• 나는 당연히 h1이라고 생각했는데 조나스는 이 페이지는 물건의 상세설명칸이므으로 전체페이지를 상상하면 위쪽에 h1이 있을걸 생각해서 h2를 썼다고 한다. 오.....
• 한 페이지에 h1는 무조건 하나! 그 안에는 여러개의 article이 올 수 있지만 그 안에는 또 각각 하나의 h2만 들어가야 한다.

just because the h1 is the main heading of the page, it doesn't mean that it also needs to be the biggest one. So being the h1 is really all about semantics, not only about what it looks like.

• h1은 그 페이지에서 가장 첫번째가 되는 말머리가 되는 의미론적인 면에서 중요한거지 크기의 문제가 아니다. 즉 h2가 h1보다 커도 전혀 상관없다는 뜻!

• 부족한 점: alt element가 중요하다고 그렇게 말했건만 빼먹었다. 이미지를 설명하는 alt attribute 꼭 사용하기!!!