더 나은 웹 개발을 위해 피해야 할 일반적인 HTML 실수 8가지

당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 알아보기

모든 웹사이트의 기반은 HTML입니다. HTML은 웹 페이지의 콘텐츠를 구조화하고 표시하기 위한 기본 언어입니다.

그러나 노련한 HTML 코더라도 최적화가 잘 안된 웹사이트를 만드는 간단한 오류를 범할 수 있습니다. 이와 같은 오류는 성능, 유용성 및 접근성에 문제를 일으킬 수 있습니다.

오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.

이러한 오류를 피하려면 다음과 같은 일반적인 HTML 오류를 연구하고 오류를 방지하는 방법에 대한 팁을 찾으십시오.

1. 더 이상 사용되지 않는 HTML 요소 사용

HTML은 시간이 지남에 따라 변경되었으므로 일부 요소와 속성은 이제 중복됩니다. 최신 브라우저는 더 이상 사용되지 않는 요소와 속성을 지원하지 않으며 이를 사용하면 웹 사이트 속도에 부정적인 영향을 미칠 수 있습니다.

그만큼 <센터> 텍스트 중앙 정렬을 위한 태그 <글꼴> 텍스트 서식 지정을 위한 태그 및 <스트라이크> 취소선 텍스트에 대한 태그는 가장 자주 사용되는 더 이상 사용되지 않는 HTML 요소 중 일부입니다. 이러한 구성 요소에 대해 최신 버전을 사용해야 합니다.

예를 들어 다음과 같이 할 수 있습니다. CSS를 사용하여 콘텐츠 중앙에 배치 , 보다는 <센터> 꼬리표. 또한 CSS 대신 CSS를 사용하여 글꼴 스타일을 설정할 수 있습니다. <글꼴> 꼬리표.

2. 대체 텍스트를 포함하지 않음

이미지에 대한 대체 텍스트를 포함하지 않는 코드의 예를 보여주는 스크린샷

이미지는 온라인 디자인의 중요한 구성 요소이지만 시각 장애가 있는 시청자는 이미지를 볼 수 없습니다. 따라서 추가해야합니다. 설명 대체 텍스트 더 쉽게 접근할 수 있도록 사진에 추가합니다.

대체 텍스트를 사용하면 텍스트 음성 변환 엔진이 사용자에게 이미지 설명을 읽을 수 있습니다. 하지만 스크린 리더만을 위한 것은 아닙니다. 대체 텍스트는 검색 엔진 최적화에 도움이 될 수 있습니다. 대부분의 브라우저는 이미지 로드에 실패하면 대체 텍스트도 표시합니다.

3. HTML 요소의 부적절한 중첩

허용 가능한 코드와 적절한 웹 사이트 작동을 보장하려면 HTML 요소가 올바르게 중첩되어야 합니다. 부적절한 중첩은 깨진 레이아웃, 누락된 콘텐츠 및 끊어진 링크를 포함하여 예상치 못한 결과를 초래할 수 있습니다.

예를 들어 새 태그를 열기 전에 각 div 태그를 닫아야 합니다. 마찬가지로, <그> 정렬되거나 정렬되지 않은 목록 외부의 태그.

무료 영화 온라인 다운로드 없음 회원가입 없음 설문조사 없음

4. div 태그 남용

'div' 태그는 콘텐츠를 그룹화하고 스타일을 지정하는 데 사용되는 유연한 HTML 요소입니다. 그러나 이 태그를 과도하게 사용하면 웹 사이트가 제대로 구성되지 않고 코드 유지 관리가 어려워질 수 있습니다.

모든 것에 대해 div 태그가 아닌 콘텐츠 의미를 부여하는 시맨틱 HTML 요소를 사용해야 합니다. 당신은 사용할 수 있습니다 <헤더> div 태그가 아닌 헤더용 태그입니다. 마찬가지로 다음을 사용해야 합니다. <없음> 내비게이션 바 태그 대신 <사업부> 꼬리표.

5. 시맨틱 HTML을 사용하지 않음

다음과 같은 의미론적 요소를 사용하지 않고 <머리글>, <바닥글>, <탐색>, <섹션>, 그리고 <기사> , 웹페이지가 복잡하고 체계적이지 않아 사용자가 필요한 정보를 탐색하고 찾는 것이 더 어려워질 수 있습니다.

귀하의 웹사이트는 검색 엔진 결과 페이지(SERP) 검색 엔진이 콘텐츠를 인덱싱하는 데 문제가 있는 경우.

6. CSS 대신 인라인 스타일 사용

style 속성을 사용하여 인라인 CSS 스타일을 HTML 요소에 직접 적용할 수 있습니다. 이러한 스타일은 빠른 변경에 도움이 되지만 과도하게 사용하면 코드를 유지하기 어렵게 만들고 웹 사이트의 효율성을 떨어뜨릴 수 있습니다.

따라서 인라인 스타일이 아닌 웹 사이트에 전체적으로 스타일을 적용하는 외부 CSS 파일을 사용해야 합니다. 브라우저로 전송되는 코드를 줄여 웹 사이트 성능을 향상시키고 웹 사이트 유지 관리도 단순화합니다.

7. 반응형 디자인을 사용하지 않음

반응형 디자인은 웹사이트가 다양한 화면 크기와 장치에 맞게 조정될 수 있도록 하는 웹 디자인 전략입니다. 이 접근 방식은 다음과 같은 경우에 필수적입니다. 웹 사이트 접근성 향상 모바일 장치의 사용이 증가함에 따라 사용자 경험.

기기의 화면 크기에 따라 다양한 스타일을 적용하려면 CSS 미디어 쿼리를 사용해야 합니다. 이를 통해 다양한 장치에서 웹 사이트에 액세스할 수 있으므로 사용자 경험이 향상됩니다.

8. HTML 유효성 검사 실패

웹 개발은 코드에 오류가 없고 웹 표준을 준수하는지 확인하기 위해 HTML 유효성 검사로 시작해야 합니다. 유효하지 않은 HTML은 깨진 레이아웃, 누락된 콘텐츠, 깨진 링크 및 기타 여러 문제를 초래할 수 있습니다.

코드에서 실수를 찾아 수정하려면 HTML 유효성 검사기를 사용해야 합니다. 정확성 외에도 유효성 검사는 성능, 접근성 및 검색 엔진 최적화를 향상시킵니다.