의미 코드 이해

의미 코드 이해

HTML에서 의미 론적 코드의 적절한 사용을 이해하면 모든 콘텐츠가 의도 한대로 정확하게 표시되도록하는 데 큰 도움이됩니다. 단순히 사용하는 것이 종종 유혹적이지만 p or div 모든 것에 대한 요소, 더 자주 사용되는 더 적절하고 의미 론적 요소가 있습니다. 예를 들어 모든 텍스트 블록에 단락 태그를 사용하는 것이 더 쉬울 수 있지만 li, h1 ...을 통하여 h6 또는 다른 요소가 현재 텍스트에 더 적합한 선택 일 수 있습니다. 이 포스트는 의미 론적 코드가 중요한 이유와 HTML 작성에 일반적으로 활용할 수있는 몇 가지 요소를 살펴볼 것입니다.

시맨틱 코드 HTML

시맨틱 HTML은 HTML 태그를 활용하는 HTML 코드를 말합니다. 다양한 페이지 요소의 목적을 설명하는 효과적인 방법입니다. 시맨틱 HTML 코드는 각 요소의 의미를 사람과 컴퓨터에 전달합니다. 결과적으로 검색 엔진, 인간 개발자, 웹 브라우저 및 보조 기술이 웹 페이지의 다양한 측면을 훨씬 더 잘 이해할 수 있습니다.

시맨틱 코드란?

프로그래밍 환경에서 의미론은 코드의 의미를 전달하고 맥락화합니다. 이것이 시맨틱 코드가 계속 주목받고 있고 프론트엔드 개발자와 관련성이 높은 주된 이유입니다.

HTML의 시맨틱 태그란 무엇입니까?

평신도 용어로, 개발자는 시맨틱 HTML 태그를 사용합니다. 특정 페이지를 생성하기 위해 관련 의미가 있습니다. 이 페이지는 주위를 회전하는 태그보다 정보를 더 잘 전달합니다. . 개발자가 시각적 표현을 보여주기보다는 특정 의미를 전달하기 위해 HTML에서 시맨틱 태그를 사용한다는 것을 이해하는 것이 중요합니다.
일반적인 시맨틱 HTML 태그는 다음과 같습니다.

꼬리표 형태
두문자어
약어
정의
인용
소환
문서의 작성자 주소
삽입된 텍스트
인라인 스타일 컨테이너
텔레타이프 텍스트
논리 분할
코드 참조
굵게 강조
텍스트 삭제
XNUMX단계 헤드라인
XNUMX단계 헤드라인
XNUMX단계 헤드라인
XNUMX단계 광고 제목
두 번째 수준 광고 제목
첫 번째 수준 광고 제목
샘플 출력
사전 서식이 지정된 텍스트
사용자 정의 가변 텍스트
위에 쓴
사용자 입력 텍스트

 

어떤 HTML 태그가 시맨틱입니까?

시맨틱 코드 HTMLHTML5 태그와 대부분의 HTML4 태그에는 의미론적 의미가 포함되어 있습니다. HTML 태그를 사용하는 목적은 의도한 의미를 오류 없이 전달하는 것입니다. HTML 태그에 관해서는 웹페이지가 "어떻게" 보이는지 걱정할 필요가 없습니다. 대신 각 태그를 사용하기 위해 따르려는 표준에 중점을 둡니다.

HTML5에서는 의 의미론적 의미가 재정의되었습니다

- 하이퍼링크를 나타냅니다.
– 버튼 요소를 나타냅니다.
, , , , – 내림차순으로 페이지 제목
- 코드 내 텍스트의 중요성 강조
과 – 웹 페이지의 분류를 나타냅니다.
과 – 구조화된 목록과 구조화되지 않은 목록을 나타냅니다.

HTML에서 시맨틱을 어떻게 작성합니까?

HTML에서 완벽한 의미 체계를 작성하는 비결은 의미 체계 태그를 사용하는 것입니다. 시맨틱 HTML 태그에는 다음을 정확히 나타내는 이름이 포함되어 있습니다. 코드의 목적에 대한 기계 또는 인간. 예를 들어, 단락( ) 태그는 일반적인 HTML 의미 태그입니다. 시작부터 전체 내용을 의미합니다. 그리고 끝 태그는 단락 블록의 텍스트를 나타냅니다. 이를 통해 모든 장치 또는 사람이 이 태그를 읽고 목적을 이해할 수 있습니다.

문서 구조 또는 페이지 레이아웃

높은 수준의 페이지 또는 문서 구조화를 위해 nav, section, article, main, header, footer, 그리고side의 적절한 태그를 사용하십시오.

인라인 텍스트 의미론

콘텐츠와 관련하여 구조화된 헤더를 사용하고 태그를 사용하여 올바른 데이터 구조화를 보장합니다. 당신은 또한 사용할 수 있습니다 , , 그리고 목록을 위해. 스크린 리더가 단락을 분류하면 여러 섹션을 건너뛸 수 있습니다.

그러나 시맨틱 HTML을 작성할 때 한 가지 이상의 고려 사항이 있습니다. 예를 들어 복잡한 레이아웃에 표를 사용하지 말고 alt 및 title 속성을 건너뛰지 마십시오. 동시에 HTML 의미 체계를 정확하게 확인하고 사용하려는 의미 체계 요소의 의도된 의미를 설명해야 합니다.

또한 가장 논리적인 개요를 작성하려면 정확한 h1, h2, h3 등의 제목에 집중해야 합니다. 의미론적 id 값과 클래스 이름도 사용해야 합니다. 또한 다양한 기능으로 표 형식의 데이터를 연습합니다.

시맨틱 HTML이 더 나은가요?

시맨틱 HTML을 작성하면 많은 이점이 있습니다. 각 웹 페이지에 대한 전략적 접근 방식이며 다양한 요소의 배치를 고려할 수 있습니다. 결국 시맨틱 HTML을 작성하는 것은 노력과 시간의 가치가 있습니다.

시맨틱 HTML은 웹 페이지의 SEO에 영향을 줄 수 있습니다 검색 엔진이 더 높은 규모로 우선 순위를 지정할 수 있도록 돕습니다. 또한 시맨틱 HTML을 사용하면 장애가 있는 개인이 웹 페이지를 보다 쉽게 ​​탐색할 수 있습니다. 또한 시간이 지남에 따라 증가할 데이터의 종류에 대해 개발자에게 알려줍니다. 의미있는 HTML을 통해 의미있는 코드 블록을 찾는 것은 끝없이 검색하는 것보다 쉽고 간단합니다. .

시맨틱 HTML SEO

시맨틱 HTML SEO 크롤러는 데이터를 구별해야 하기 때문에 시맨틱 HTML 태그를 사용하면 웹 페이지에 있는 정보의 특성과 명시적 사용을 위해 첨부된 관련성을 쉽게 파악할 수 있습니다. 그러나 시맨틱 HTML을 구성할 때 핵심은 정보가 사람과 컴퓨터가 읽을 수 있는지 확인하는 것입니다.

시맨틱 HTML을 사용하면 검색 엔진이 "올바른" 콘텐츠를 색인화하고 우선 순위를 지정할 수 있습니다. 예를 들어 디스플레이를 사용할 수 있습니다. Google 스니펫 목록의 요소입니다. 지난 몇 년 동안 시맨틱 HTML은 계속해서 진화하고 Google의 규칙과 일치하는 표준 SEO 관행을 보완합니다.

SEO 외에도 적절한 태그를 사용하면 콘텐츠를 명확한 계층 구조로 쉽게 유지 관리할 수 있습니다. 결국 검색 엔진은 색인을 생성하기 위해 웹 콘텐츠를 분석합니다. 좋은 소식은 HTML5의 등장으로 몇 가지 새로운 의미론적 요소가 등장했다는 것입니다. 그리고 시맨틱 HTML 코드는 Google과 같은 검색 엔진에서 사이트의 순위를 높이는 데 필수적인 역할을 합니다.

새로운 HTML5 시맨틱 요소는 무엇입니까?

개발자가 목록 및 단락과 같은 기본 목적으로 사용하는 다양한 요소가 있습니다. 개발자는 다음과 같은 요소도 사용합니다. 과 특정 콘텐츠 작업을 위해

HTML5는 비교적 새롭지만 비의미적 HTML5 요소를 사용하는 것은 이제 사이트에서 상당히 보편화되었습니다. 일반적인 HTML5 의미론적 요소 중 일부는 다음과 같습니다. , , , , , , , , , , , ,

다음과 같은 요소를 기억하십시오. , , , , , 그리고 기능 집단. 이러한 요소는 페이지 섹션에 다른 요소를 함께 묶습니다. 또한 대표적인 태그에는 모든 정보가 포함될 수 있습니다. 궁극적으로 개발자는 의미 체계에서 범주형 정보를 찾고 탐색하는 것이 더 쉬워집니다. 지역.

시맨틱 코드에 관심이있는 이유

의미 상 올바른 HTML이 SEO를 향상시키는 지 여부에 대한 논쟁이 있지만 한 가지 중요한 이점은 장치 또는 사용자의 장애에 관계없이 모든 사람이 콘텐츠에 최대한 액세스 할 수 있도록하는 것입니다. 시맨틱 코드는 접근성에 대한 동등한 기회를 생성하는 화면 판독기 및 기타 도구에서 더 잘 처리됩니다. 의미 론적 코드를 작성하는 데 시간이 오래 걸리고 더 많은 고려가 필요할 수 있지만, 웹 접근성.

시맨틱 코드의 일반적인 예

약어

약어 요소는 페이지에서 약어 또는 두문자어를 사용할 때마다 사용해야합니다. 그만큼 title 속성은 약어의 전체 값입니다. 마우스 오버 abbr 요소는 전체 값을 표시합니다.

JS WWW

 

아래 첨자 및 위첨자

아래 첨자와 위 첨자는 일반적으로 과학적 표기법, 인쇄 규칙 및 기타 용도에 사용됩니다. 몇 가지 일반적인 예 :

고 2 0 2 위

 

코드 스 니펫

HTML 페이지에서 발췌 한 코드를 표현할 수 있으면 유용합니다.이 블로그의 자습서에서 정기적으로이 작업을 수행합니다. 그만큼 codepre 요소는 모두 코드 스 니펫에 사용할 수 있습니다. code 코드의 일부로 취해야하는 단일 값이나 단어에 더 좋습니다 ( span 요소 작동). 와 함께 사용 pre, code 그런 다음 공백 및 줄 바꿈의 관련 형식과 함께 전체 코드 블록을 표시합니다.

이미지 요소에는 항상 img 태그를 사용해야합니다. p {  font-family: Helvetica;  font-size: 16px;  color: blue; }

 

줄 바꿈 및 단어 바꿈

줄 바꿈 및 단어 바꿈 브라우저의 뷰포트는 일반적으로 자체적으로 단어 분리 및 줄 바꿈을 생성하지만, 경우에 따라 원하는 위치를 정확히 표시하는 것이 가장 좋습니다. br 줄 바꿈 요소 및 wbr element for wordbreaks .. 일반적인 예에는 메일 링 주소뿐만 아니라 단어를 두 줄로 줄 바꿈해야하는 경우 구성 단어로 나눌 수있는 URL이 포함됩니다.

811 W. 7th St. 로스 앤젤레스, CA 미국 https : // sunlight media.org

 

이 블로그 게시물은 표면을 긁어 모았지만 의미 론적 코드 작성을위한 HTML 요소가 더 많이 있습니다. 향후 포스트에서 시맨틱 코드의 고급 예제를 조사 할 것입니다.

 

작성자 바이오

Angelo는 20 년 넘게 창의적인 IT 세계에 참여해 왔습니다. 1998 년 Dreamweaver, Flash 및 Photoshop을 사용하여 첫 번째 웹 사이트를 구축했습니다. 그는 HTML / CSS, Flash ActionScript 및 XML과 같은 광범위한 프로그래밍 기술을 학습하여 지식과 전문성을 확장했습니다.

Angelo는 호주 시드니에서 CIW (Certified Internet Webmasters) 프로그램으로 공식 교육을 이수하여 컴퓨터 네트워킹의 핵심 기본 사항과 이것이 월드 와이드 웹의 인프라와 관련되는 방식을 배웠습니다.

Sunlight Media를 운영하는 것 외에도 Angelo는 웹 및 앱 개발, 디지털 마케팅 및 기타 기술 관련 주제와 관련된 유익한 콘텐츠를 작성하는 것을 즐깁니다.

댓글

  • 소리 17월 2021일, 8년, 오전 04:XNUMX분

    지식을 공유해 주셔서 감사하고 좋은 일을 계속하십시오.

코멘트를 게시

댓글이 검토됩니다. 귀하의 이메일은 비공개로 유지됩니다. 필요 입력 사항은 표시되어 있습니다 *