두려움을 버리다.우리는 의미 HTML 요소를 바꾸어야 한다
<div> 라벨을 생각해 보고 자신에게 물어보세요. 만약 당신이 이전에 이 원소를 들어 본 적이 없다면, 그 원소의 용도는 무엇이라고 생각합니까?어렵죠?🤔
가구점에서 살 수 있는 가구 중 한 세트로 새 탁자를 만들어 보세요.그것은 당신이 그것을 만드는 데 필요한 모든 것을 포함하고, 책상과 관련된 모든 정보를 담은 정보 소책자를 포함한다.
지금 상상해 보아라, 설명서의 매 페이지마다 제목이 하나도 없다.이 때문에 설명 페이지와 상자에 있는 내용 목록, 보증 정책 등을 찾기가 더욱 어려워졌다.너는 여전히 그것들을 찾을 수 있지만, 너는 반드시 자세히 관찰해야 한다.
명칭
<div>은 그것이 어떤 역할을 할 수 있는지에 대한 정보를 제공하지 않았다.지금 <h1> 라벨이나 어떤 제목 라벨을 생각해 보세요.heading 요소는 실행하는 역할을 설명하는 역할이 있습니다. (제목으로)페이지에는 <h1> 요소만 있을 것입니다.HTML 요소를 사용하는 사용자와 웹 사이트의 사용자에게는 다음과 같은 세 가지 주요 이점이 있습니다.
우리는 많은 의미 요소를 사용할 수 있는데 원칙적으로 그들은 같은 일을 할 수 있지만 상술한 장점을 제공할 수 있다.현재 우리는 의미 요소가 무엇인지, 그리고 왜 중요한지 이해했다. 나는 당신에게 의미 요소를 보여 드리겠습니다. 우리는 그것들로 당신이 여전히 자주 사용할 수 있는
<div>을 대체할 수 있습니다.본고에서 나는 MDN Web Docs의 모든 요소의 정의를 인용한 다음에 더욱 간단한 용어로 그것들을 해석할 것이다.
시작하다👏.
<article>
MDN의 정의:
The HTML
<article>element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
이 요소는 코드 라이브러리에 여러 가지 내용을 포함할 수 있는 내용을 포장하는 데 사용됩니다.하나의 예는 블로그 게시물 미리보기 카드나 게시물 자체이지만, 실제로는 제목과 제목을 대표하는 내용을 포함하는 내용이 있으면 사용할 수 있다.
<article>개의 원소를 서로 끼워 넣을 수도 있다.예.👇
<article class="product">
<h2>
Coffee
</h2>
<article class="product-info>
<h3>
Product information
</h3>
<p>
Very delicious coffee!
</p>
</article>
</article>
<header>
MDN의 정의:
The HTML
<header>element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
이 요소는 일반적으로 글이나 게시물의 제목을 나타내는 요소를 한데 묶는 데 사용되는데, 그 중 최소한의 요소는 제목 요소를 포함한다. 예를 들어
<h2>이다.나는 또한 한 사이트의 로그인 페이지에서 그것을 사용했다. 이 페이지는 메인 제목 요소인 <h1>을 포함하고, 제목을 지원하는 이미지, 텍스트, 링크 또는 다른 소개 내용도 있을 수 있다.머리글 요소라고 하지만 페이지 상단에서 사용할 필요는 없고
<article>과 <section>과 같은 다른 요소에서도 사용할 수 있습니다.예.👇
<header class="header">
<h1>
Hero header
</h1>
<img src="heroimage.webp" alt="a nice descriptive alt text">
</header>
<article>
<header>
<h2>
Article header
</h2>
<a href="/blog-article">
Link
</a>
</header>
...
</article>
<section>
MDN의 정의:
The HTML
<section>element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
<div>과 유사하게 <section>보다 좋은 선택이 있습니다.그럼에도 불구하고 <div> 또는 <nav> 또는 유사한 요소의 내용을 분할해야 할 때(스타일 설정에 사용되지 않는 한) <article>에 대한 개선이 필요합니다.조형적인 목적으로 원소포장기가 필요하다면
<div>원소를 사용하는 것이 좋다.예.👇
<section id="blog-articles">
<h2>
Section header
</h2>
...any other content related to the section
</section>
<nav>
MDN의 정의:
The HTML
<nav>element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
이 패키지를 사용하여 페이지 주위를 내비게이션하는 주요 링크 집합을 포장하여 화면 리더 사용자에게 사이트의 주요 내비게이션 링크의 정확한 위치를 명확하게 가리킨다.
예.👇
<nav id="main-nav">
<ul>
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/blog">
Blog
</a>
</li>
</ul>
</nav>
<main>
MDN의 정의:
The HTML
<main>element represents the dominant content of the<body>of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
한 사이트의 페이지당
<main> 요소만 있어 사용자에게 페이지의 주요 내용의 존재 위치를 표시하는 데 사용된다.이것은 사이트의 다른 페이지에서 중복되는 부차적인 내용을 무시할 때 남는 내용입니다. 예를 들어 <nav>, <footer>, <aside>, 유사한 부가 요소에 포함된 내용입니다.이런 것들을 때때로 레이아웃 구성 요소/요소라고 부른다.웹 사이트를 탐색하기 위해 화면 리더가 필요한 사용자에게도 중요한 역할을 한다. 왜냐하면 브라우저가
<main> 요소와 포함된 내용으로 직접 이동하도록 지시할 수 있기 때문이다.예.👇
<nav id="main-nav">
<ul>
...navigational links
</ul>
</nav>
<header id="landing">
<h1>
Some descriptive page header
<h1>
<p>
...explanation
</p>
<a href="/blog">
call to action for user
</a>
</header>
<main>
<h2>
Welcome to the main content of the page
</h2>
<article>
<h3>
Article title
</h3>
...
</article>
</main>
<footer>
...
</footer
<내레이션>
MDN의 정의:
The HTML
<aside>element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
<aside> 요소의 역할은 그것과 관련된 내용의 부차적인 내용을 제공하는 것이다.이것은 요소가 문서의 어느 위치에 있든지 간에 사용자가 주요 내용을 명확하게 이해해야 하는 내용만 포함해야 한다는 것을 의미한다.하나의 예는 한 문장에서 어떤 사물의 정의나 내용과 관련된 진일보한 해석을 제공하는 것이다.다른 글의 링크일 수도 있고 정의를 더 넓혔을 수도 있습니다.
예.👇
<article>
<h2>
Article header
</h2>
<p>
I really enjoy writing JavaScript.
</p>
<aside>
JavaScript is a high-level dynamically typed programming language. You can find more information here ...
</aside>
<p>
I also really like semantic HTML.
</p>
</article>
<details>&<summary>
MDN의 정의:
The HTML Details Element (
<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the<summary>element.
이 두 요소는 열기 또는 닫기 상태로 전환하여 특정 컨텐트를 표시하거나 숨길 수 있는 작은 부품이 필요할 때 유용합니다.이 방면의 전형적인 용례는 사이트의 faq(흔한 문제) 부분으로 사용자가 문제를 클릭하여 답을 표시할 수 있도록 한다.
JavaScript를 사용하지 않으므로 브라우저를 무시하도록 설정했더라도 웹 사이트를 쉽게 액세스할 수 있도록 계속 작동합니다.
<summary> 태그는 사용자가 항상 볼 수 있는 텍스트를 포함하고 <details> 태그는 작은 위젯이 '열기' 상태일 때 표시할 정보를 포함합니다.예.👇
<details>
<summary>
Do you offer tours of the brewery?
</summary>
Unfortunately at this time we do not offer tours of the brewery. We are currently building our taproom so stay tuned.
</details>
<details>
<summary>
Are your beers gluten-free?
</summary>
All of our beers are gluten-free and vegan-friendly!
</details>
<figure>와 <figcaption>
MDN의 정의:
The HTML
<figure>(Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element. The figure, its caption, and its contents are referenced as a single unit.
일반적으로
<figure> 요소는 하나의 이미지를 포함하고 (필요하지 않음에도 불구하고) <figcaption> 요소를 동반하며 이 요소는 이 요소에 대한 설명을 제공한다.그래픽과 관련된 다른 요소(예: <p> 태그)도 포함할 수 있습니다.내 경험에 따르면, 당신이 어떤 문장이나 게시물에 당신이 쓰고 있는 내용, 예를 들어 그림, 도표, 코드를 포함할 때,
<figure> 요소를 포함하는 것이 매우 유용하다.예.👇
<article>
<h2>
Article header
</h2>
<p>
...some introductory text
</p>
<figure>
<img src="post.webp" alt="a nice descriptive alt text" />
<figcaption>
Photo taken by Kieran Roberts
</figcaption>
</figure>
<p>
..rest of the article
</p>
</article>
<blockquote>
MDN의 정의:
The HTML
<blockquote>Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the<cite>element.
사이트에 다른 원본에서 온 텍스트를 포함하려면
<blockquote>을 사용하십시오.cite 요소의 <blockquote> 속성은 내용을 제공하는 원시적인 출처에 응용된다.예.👇
<blockquote cite="link to the souce">
<p>
This is an inspirational quote from another source
</p>
<footer>
Source author, <cite>content of the citation</cite>
<footer>
</blockquote>
<abbr></약어
MDN의 정의:
The HTML Abbreviation element (
<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. If present, the title must contain this full description and nothing else.
이 요소는 당신의 사이트에 있을 수 있는 알파벳 줄임말에 간단하지만 효과적인 도구 알림 효과를 제공합니다.나는 이 속성을 나의 자바스크립트 (js) 등 제품의 서류 가방에 포함시켰다.사용자가 마우스를 알파벳 줄임말 위에 놓을 때,
title 속성은 알파벳 줄임말에 대한 완전한 설명을 제공합니다.예.👇
<p>
I really enjoy working with<abbr title="JavaScript"> js </abbr>and I am now learning <abbr title="TypeScript"> ts </abbr>.
</p>
<footer></바닥글 >
MDN의 정의:
The HTML
<footer>element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data, or links to related documents.
일반적으로 사람들은 문서 밑에
<footer>을 포함하지만, 우리는 각각 <footer> 또는 <article> 요소에 <section>을 포함할 수 있다. 단지 다른 <footer> 또는 <header> 요소가 없으면 후손이 될 수 있다.<footer>에서는 요소 배치와 관련된 모든 유형의 텍스트, 이미지 또는 링크를 포함할 수 있습니다.예.👇
<footer>
<p>
This is the end of the site
</p>
</footer>
<article>
<h2>
Article header
</h2>
<p>
Article content
</p>
<footer>
<p>
Article footer
</p>
<footer>
</article>
결론
나는 당신이 의미 HTML에 대한 지식을 이미 알고 미래의 프로젝트에 가져와서 당신의 사이트와 상호작용하는 모든 사람들이 당신의 태그를 더욱 쉽게 방문할 수 있기를 바랍니다.
너는 나를 따라와도 된다. 나는 항상 활발하다. 너와 연락해서 매우 기쁘다.
읽어주셔서 감사합니다.👋
Reference
이 문제에 관하여(두려움을 버리다.우리는 의미 HTML 요소를 바꾸어야 한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kieran6roberts/ditch-the-dreaded-div-semantic-html-elements-we-should-use-instead-1k60텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
