HTML 태그를 올바르게 중첩시키는 방법
오늘 웹 페이지의 HTML 마크 업을 보면 다른 HTML 요소에 HTML 요소가 포함되어있는 것을 볼 수 있습니다. 다른 요소의 "내부"에있는 이러한 요소는 "중첩 요소"로 알려져 있으며 오늘날 웹 페이지를 작성하는 데 필수적입니다.
HTML 태그를 중첩하는 것은 무엇을 의미합니까?
중첩을 이해하는 가장 쉬운 방법은 HTML 태그 를 콘텐츠를 보관하는 상자로 생각하는 것입니다. 콘텐츠에는 텍스트, 이미지 등이 포함될 수 있습니다. HTML 태그는 콘텐츠 주변의 상자입니다. 때로는 상자를 다른 상자 안에 넣어야합니다. 그 "내부"상자는 다른 상자 안에 중첩되어 있습니다.
단락 안에 굵게 표시하려는 텍스트 블록이있는 경우 텍스트 자체뿐만 아니라 두 개의 HTML 요소 가 있습니다.
예 : 이것은 텍스트의 문장 입니다.이 텍스트는 우리가 예제로 사용할 것입니다. 여기에 그것이 쓰여지는 방법이 있습니다.
예 : 텍스트 문장입니다. p>
"문장"이라는 단어를 굵은 글씨로 나타내기를 원하기 때문에 그 앞뒤에 굵은 태그를 열고 닫을 수 있습니다.
예 : 텍스트의 문장 strong>입니다. p>
보시다시피, 문장의 내용 / 텍스트와 두 번째 상자 (강력한 태그 쌍)가 포함 된 하나의 상자 (단락)가 있는데,이 단어는 굵게 표시됩니다.
태그를 중첩 할 때 태그를 열 때 반대 순서로 태그를 닫는 것이 매우 중요합니다. 먼저
를 열고 그 다음에 을 붙입니다. 다시 말하면 strong>와 p>를 닫습니다.
이것을 생각하는 또 다른 방법은 상자의 비유를 다시 사용하는 것입니다. 상자를 다른 상자 안에 넣으면 바깥 쪽 상자 나 상자를 닫기 전에 안쪽 상자를 닫아야합니다.
더 많은 중첩 태그 추가
한 두 단어 만 굵게 표시하고 다른 단어를 기울임 꼴로 표시하려면 어떻게해야합니까? 방법은 다음과 같습니다.
예 : 텍스트의 문장 strong>이며 일부 기울임 꼴 텍스트 em>도 있습니다. p> 이제 우리의 바깥 상자 인 에 및 태그가 두 개 중첩되어 있음을 알 수 있습니다. 상자를 닫을 수 있으려면 둘 다 닫아야합니다. 예 : 텍스트의 문장 strong>이며 일부 기울임 꼴 텍스트 em>도 있습니다. p> / p> div> 이 경우 상자 안에 상자가 있습니다! 가장 많은 상자는 중첩에 신경을 써야하는 가장 큰 이유 중 하나는 CSS를 사용하는 경우입니다. 계단식 스타일 시트는 스타일이 시작되고 끝나는 위치를 알 수 있도록 문서 내에서 일관되게 중첩되도록 태그에 의존합니다. 페이지의 "주 내용" "텍스트"클래스의 클래스로 된 모든 "링크에 영향을 미치는 스타일을 설정하면 잘못된 중첩으로 인해 브라우저가 이러한 스타일을 적용 할 위치를 알기가 어려워집니다. HTML을 살펴 보겠습니다. 예 : 텍스트의 문장 strong>이며 일부 기울임 꼴 텍스트 em>도 있습니다. p> 다른 단락 입니다. p> div> 예제를 사용하여 방금 언급 한 바와 같이이 부서 내부의 링크에 영향을 미칠 CSS 스타일을 작성하고 해당 링크 (페이지의 다른 섹션에있는 다른 링크와 반대)를 작성하려면 내 스타일을 쓰는 중첩, 같은 : 다른 이유는 접근성과 브라우저 호환성을 포함합니다. HTML이 틀리게 중첩되어 있으면 화면 판독기와 구형 브라우저에서 액세스 할 수 없으며 HTML 요소와 태그가 있기 때문에 브라우저가 페이지를 올바르게 렌더링하는 방법을 알 수 없으면 페이지의 시각적 모양을 완전히 깨뜨릴 수도 있습니다 제자리에 없어요. 마지막으로, 정확하고 유효한 HTML을 작성하기 위해 노력한다면 올바른 중첩을 사용해야합니다. 그렇지 않으면 모든 유효성 검사기가 HTML에 잘못된 플래그를 지정합니다. 중첩에 관심을 가져야하는 이유