An important principle of the web standards movement that is responsible for the industry we have today is the idea of using HTML elements for what they are rather than how they may appear in the browser by default. This is known as using Semantic HTML.
What is Semantic Elements
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation.
For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are and browsers know how to display them.
On the flip side of this equation, tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any additional meaning to the markup.
Why You Should Care About Semantics
- What should be the driving goal of any web page?" >>> the desire to communicate.
- By adding semantic tags to your document, you provide additional information about that document, which aids in communication.
- Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is.
- Instead of trying to render that code, the browser understands the purpose of using a specific tag and its content
- That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.
- Using semantic tags gives you many more hooks for styling your content. ... You can easily do all of these things by using semantic markup and smartly applied CSS.
- "A semantic element clearly describes its meaning to both the browser and the developer."
모던 웹 브라우저(Chrome, Firefox, Opera, Safari, IE Edge)에서 정말 많은 걸 할 수 있지만 항상 그 본질은 HTML에서 시작한다.
- HTML 태그에는 여러 종류가 있음(
<div>만 있는게 아님 - 브라우저는 정보의 구조, 위계질서(중요도)를 파악할 때 사람의 언어를 직접 이해한 후 판단하는 것이 아니라 마크업 정보를 바탕으로 파악함
- (참고 - markup? markdown?)
- 브라우저가 파악한 위계질서(중요도)가 검색 엔진에 반영
- 모던 웹 브라우저(Chrome, Firefox, Opera, Safari, IE Edge)에서 정말 많은 걸 할 수 있지만 항상 그 본질은 HTML에서 시작
- 페이지(Page), 문서, 웹문서, 도큐먼트Document, 태그(Tag), 요소(Element), Publishing >>> All about "HTML"
- 마크업 할 때 CSS 스타일링도 어느 정도 생각해야하지 않을까요?
: HTML을 의미있게 작성하는 연습이 우선(CSS 실력도 향상되면 못 할게 없음) - 내가 제대로 의미에 맞게 HTML을 쓰고 있다는 건 어떻게 판단?
: 의식의 흐름이 아닌 사고와 논리를 담은 코드를 작성할 것. 태그를 사용하면 '왜 사용했는지'에 대한 스스로의 이유/논리가 있으면 우선 다양한 태그를 사용해볼 것
Reference
