계층 구조를 구현하기 위해 시멘틱 태그를 사용해야 한다고 MDN에서 설명하는데
내가 찾은 이유는 2가지로 나눌 수 있을것 같다
- SEO
- 스크린 리더 (음성 및 점자 출력)
html을 구조적으로 설계하여 콘텐츠에 올바른 의미, 기능 또는 모양을 파악하기 좋게 만드는데 취지가 있다고 볼 수 있겠다
Ex) h1 요소는 "페이지의 최상위 제목"의 역할(또는 의미)을 감싸는 텍스트를 제공하는 의미 요소이기도 합니다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Quick hummus recipe</title>
</head>
<body>
<h1>Quick hummus recipe</h1>
<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>
<p>hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>
<h2>Ingredients</h2>
<ul>
<li>1 can (400g) of chick peas (garbanzo beans)</li>
<li>175g of tahini</li>
<li>6 sundried tomatoes</li>
<li>Half a red pepper</li>
<li>A pinch of cayenne pepper</li>
<li>1 clove of garlic</li>
<li>A dash of olive oil</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.</li>
<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
<li>If you want a smooth hummus, process it for a longer time.</li>
</ol>
<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>
<h2>Storage</h2>
<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.</p>
<p>hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>
</body>
</html>
꾸준히