-
4.26 시멘틱 HTML 에서 안좋은 마크업 사용 방법코드스테이츠 2023. 4. 26. 17:23
1. 인라인 요소 안에 블록 요소 넣기
HTML 요소는 표시 방법에 따라 인라인 요소, 블록 요소로 나뉩니다. 인라인 요소는 콘텐츠가 차지하는 만큼만, 블록 요소는 가로로 넓게 화면 영역을 차지하며. 대표적인 인라인 요소로는 <span>, 블록 요소로는 <div> 가 있습니다. 인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안 됩니다. 보통 특정 요소가 인라인 요소인지 블록 요소인지 정확하게 알지 못할 때 이런 실수를 하게 됩니다.
// h1, div 요소는 블록 요소이고, // label, span 요소는 인라인 요소입니다. <label> <h1>나쁜 예시 1</h1> </label> <span> <div>나쁜 예시 2</div> </span>2. <b>, <i> 요소 사용하기
<b> 요소와 <i> 요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소입니다. 하지만 웹 표준을 준수하기 위해서는 이 요소들을 사용하지 않는 것이 좋습니다. 시멘틱 하지 않은, 표현을 기준으로 이름이 지어진 요소이기 때문입니다. 대신 똑같은 스타일을 부여하면서 콘텐츠에 의미를 부여하는 <strong> 요소와 <em> 요소를 사용하는 것이 좋습니다. 두 요소는 글씨에 효과를 줌과 동시에 각 콘텐츠를 강조하는 의미를 부여합니다.
<b>글씨를 두껍게</b> -- 대체하기 --> <strong>콘텐츠 매우 강조하기</strong> <i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>3. <hgroup> 마구잡이로 사용하기
<hgroup> 요소들은 목차의 역할을 하면서 콘텐츠의 상하 관계를 표시하기 위해서 사용합니다. 이를 시각적으로 나타내기 위해서 숫자가 작을수록 글자의 크기가 크고, 숫자가 클수록 크기가 작습니다. 그런데 이러한 특성 때문에 <hgroup> 의 시멘틱 요소로서의 역할을 간과한 채 글자에 스타일 속성을 적용하기 위한 목적으로 사용하는 경우가 종종 있습니다. 이럴 경우 화면은 보기 좋을지 몰라도, 사용자에게 완전히 잘못된 화면 구조 정보를 전달하게 됩니다.
// 나쁜 예시 <h1>엄청 큰 글씨</h1> <h3>적당히 큰 글씨</h3> <h2>큰 글씨</h2> <h6>엄청 작은 글씨</h6> <h4>그냥 글씨</h4> // 좋은 예시 <h1>제목</h1> <h2>큰 목차</h2> <h3>작은 목차</h3> <h3>작은 목차</h3> <h2>큰 목차</h2> <h3>작은 목차</h3> <h4>더 작은 목차</h4> <h4>더 작은 목차</h4>4. <br /> 연속으로 사용하기
<br /> 은 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소입니다. 그런데 이러한 목적이 아니라 요소 사이에 간격을 만들기 위한 목적으로 남발해서는 안 됩니다. 요소 사이에 간격이 필요한 경우에는 아예 별도의 단락으로 구별하거나 CSS 속성을 주어 여백을 조정해 주는 것이 바람직합니다.
// 나쁜 예시 요소 사이에 여백을 주고싶을 때 <br /> <br /> 이렇게 하시면 안 됩니다. // 좋은 예시 1 <p>요소 사이에 여백을 주고싶을 땐</p> <p>아예 별도의 단락으로 구별하세요.</p> // 좋은 예시 2 //HTML 파일 <p class="margin">요소 사이에 여백을 주고싶을 땐</p> <p class="margin">CSS 속성으로 여백을 설정해주세요.</p> //CSS 파일 .margin { margin: 10px }5. 인라인 스타일링 사용하기
웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하면서 각 영역이 분리되어 여러 이점을 얻을 수 있었습니다. 그런데 HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같습니다. 웹 표준을 지키기 위해서는, HTML과 CSS 코드를 분리해서 작성해 주세요.
//HTML 파일 <head> <style> h1 { color : "red" } </style> </head> (O) <h1>스타일링 속성은 CSS로 작성해 주세요.<h1> (O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2> (X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3> //CSS 파일 h2 { color : "yellow" }여기에서 언급된 예시는 웹 표준을 저해하는 마크업 사용법이면서, 생각보다 자주 발생하는 상황이기도 합니다. 이런 방법으로 마크업을 사용하지 않도록 주의하세요.
'코드스테이츠' 카테고리의 다른 글
4.26 SEO (0) 2023.04.26 4.26 크로스 브라우징 (0) 2023.04.26 4.26 웹표준 개념 & 시멘틱 HTML (0) 2023.04.26 4.24 Redux Quiz (0) 2023.04.24 4.24 Redux (0) 2023.04.24