a태그 내부에 블록 요소를 넣어도 되는가?
정답은 O이다.
HTML 유효성 검사 페이지를 통해 아래 코드를 검사해보자.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>a태그는 블록을 감쌀 수 있는가?</title>
</head>
<body>
<a href="url">
<div>
<h1>궁금하다!</h1>
</div>
</a>
</body>
</html>
결과는 에러가 없다고 뜬다!
원래라면 인라인 요소인 a태그 내부에 블록 요소인 div를 넣는 것이 불가능하다. HTML 4.01표준만 보더라도 인라인 요소인 a태그는 인라인 요소만 감쌀 수 있다고 규정되어 있다. 하지만 HTML5 표준에서는 가능하다고 명시되어 있다.
왜?
HTML5에서는 태그 분류를 단순히 인라인, 블록으로 나눈 것이 아니라 태그와 성격와 특성에 따라 나누었다.
이는 HTML 콘텐츠 모델에서 확인할 수 있다.
이 HTML 콘텐츠 모델에 의해 a태그가 flow content(플로우 콘텐츠)를 품을 수 있다.
따라서 a태그는 인라인 속성만이 아닌 블록 요소도 담을 수 있게 되었다.
참고
https://abcdqbbq.tistory.com/17
[html 태그] a태그
문서간의 이동을 자유롭게 하는 대표적인 태그가 바로 a태그이다. href="" 속성을 이용해서 링크를 걸고 해당 링크로 페이지를 이동 혹은 새 창으로 페이지를 띄운다. html5 이전에 즉, 컨텐츠 모델
abcdqbbq.tistory.com
https://tamagotch.tistory.com/21
HTML a태그 안에 div태그를 넣어도 괜찮을까?
HTML a태그 안에 div태그를 넣어도 괜찮을까? 결론부터 말하자면 그렇다. HTML5 스팩상 a 태그 안에 div 태그를 넣어도 괜찮다. HTML 코드 유효성 검사기를 통해 a 태그 내부에 div 태그를 위치하는 구조
tamagotch.tistory.com
http://html5doctor.com/block-level-links-in-html-5/
“Block-level” links in HTML5 | HTML5 Doctor
One new and exciting thing you can do in HTML 5 is wrap links round “block-level” elements. Imagine you have a front page with lots of teasers for news articles, each of which leads to a page devoted to the full text of that article. Obviously, each st
html5doctor.com
'HTML&CSS' 카테고리의 다른 글
| [HTML] input태그의 aria-describedby과 title 차이 (0) | 2023.06.19 |
|---|---|
| [CSS] 이미지 스프라이트(Image Sprite) (0) | 2022.07.18 |
| [CSS] 상대 단위 & 절대 단위 & 기타 단위 (0) | 2022.07.18 |
| [HTML] <a> 태그에 target="_blank"추가 시 생길 수 있는 보안적 취약성 (0) | 2022.07.14 |
| [HTML] form (0) | 2022.07.14 |
