HTML 태그 중첩

HTML 태그를 올바르게 중첩시키는 방법

오늘 웹 페이지의 HTML 마크 업을 보면 다른 HTML 요소에 HTML 요소가 포함되어있는 것을 볼 수 있습니다. 다른 요소의 "내부"에있는 이러한 요소는 "중첩 요소"로 알려져 있으며 오늘날 웹 페이지를 작성하는 데 필수적입니다.

HTML 태그를 중첩하는 것은 무엇을 의미합니까?

중첩을 이해하는 가장 쉬운 방법은 HTML 태그 를 콘텐츠를 보관하는 상자로 생각하는 것입니다. 콘텐츠에는 텍스트, 이미지 등이 포함될 수 있습니다. HTML 태그는 콘텐츠 주변의 상자입니다. 때로는 상자를 다른 상자 안에 넣어야합니다. 그 "내부"상자는 다른 상자 안에 중첩되어 있습니다.

단락 안에 굵게 표시하려는 텍스트 블록이있는 경우 텍스트 자체뿐만 아니라 두 개의 HTML 요소 가 있습니다.

예 : 이것은 텍스트의 문장 입니다.

이 텍스트는 우리가 예제로 사용할 것입니다. 여기에 그것이 쓰여지는 방법이 있습니다.

예 : 텍스트 문장입니다.

"문장"이라는 단어를 굵은 글씨로 나타내기를 원하기 때문에 그 앞뒤에 굵은 태그를 열고 닫을 수 있습니다.

예 : 텍스트의 문장 입니다.

보시다시피, 문장의 내용 / 텍스트와 두 번째 상자 (강력한 태그 쌍)가 포함 된 하나의 상자 (단락)가 있는데,이 단어는 굵게 표시됩니다.

태그를 중첩 할 때 태그를 열 때 반대 순서로 태그를 닫는 것이 매우 중요합니다. 먼저

를 열고 그 다음에 을 붙입니다. 다시 말하면 를 닫습니다.

이것을 생각하는 또 다른 방법은 상자의 비유를 다시 사용하는 것입니다. 상자를 다른 상자 안에 넣으면 바깥 쪽 상자 나 상자를 닫기 전에 안쪽 상자를 닫아야합니다.

더 많은 중첩 태그 추가

한 두 단어 만 굵게 표시하고 다른 단어를 기울임 꼴로 표시하려면 어떻게해야합니까? 방법은 다음과 같습니다.

예 : 텍스트의 문장 이며 일부 기울임 꼴 텍스트 도 있습니다.

이제 우리의 바깥 상자 인

태그가 두 개 중첩되어 있음을 알 수 있습니다. 상자를 닫을 수 있으려면 둘 다 닫아야합니다.

예 : 텍스트의 문장 이며 일부 기울임 꼴 텍스트 도 있습니다.

/ p>

이 경우 상자 안에 상자가 있습니다! 가장 많은 상자는

또는 "division"입니다. 이 상자 안에는 중첩 된 단락 태그 쌍이 있으며 첫 번째 단락 안에 다음 태그 쌍이 있습니다. 다시 한번, 오늘 어떤 웹 페이지든지보십시오. 그리고 당신은 이것과 훨씬 더 둥지 일어나는 것을 볼 것입니다! 이것이 페이지가 박스 안에있는 상자입니다.

중첩에 관심을 가져야하는 이유

중첩에 신경을 써야하는 가장 큰 이유 중 하나는 CSS를 사용하는 경우입니다. 계단식 스타일 시트는 스타일이 시작되고 끝나는 위치를 알 수 있도록 문서 내에서 일관되게 중첩되도록 태그에 의존합니다. 페이지의 "주 내용" "텍스트"클래스의 클래스로 된 모든 "링크에 영향을 미치는 스타일을 설정하면 잘못된 중첩으로 인해 브라우저가 이러한 스타일을 적용 할 위치를 알기가 어려워집니다. HTML을 살펴 보겠습니다.

예 : 텍스트의 문장 이며 일부 기울임 꼴 텍스트 도 있습니다.

다른 단락 입니다.

예제를 사용하여 방금 언급 한 바와 같이이 부서 내부의 링크에 영향을 미칠 CSS 스타일을 작성하고 해당 링크 (페이지의 다른 섹션에있는 다른 링크와 반대)를 작성하려면 내 스타일을 쓰는 중첩, 같은 :

.main-content a {color : # F00; }

다른 이유는 접근성과 브라우저 호환성을 포함합니다. HTML이 틀리게 중첩되어 있으면 화면 판독기와 구형 브라우저에서 액세스 할 수 없으며 HTML 요소와 태그가 있기 때문에 브라우저가 페이지를 올바르게 렌더링하는 방법을 알 수 없으면 페이지의 시각적 모양을 완전히 깨뜨릴 수도 있습니다 제자리에 없어요.

마지막으로, 정확하고 유효한 HTML을 작성하기 위해 노력한다면 올바른 중첩을 사용해야합니다. 그렇지 않으면 모든 유효성 검사기가 HTML에 잘못된 플래그를 지정합니다.