웹페이지 제작시 HTML 태그 적용에 주목_HTML/Xhtml_웹페이지 제작

HTML은 프리젠테이션을 제거하고 컨텐츠 쪽으로 이동하려고 시도하여 프리젠테이션(CSS)과 컨텐츠(HTML)를 분리한다는 논리로 이어졌습니다. 이렇게 하면 일련의 프레젠테이션 지침(외부 CSS 문서 형식)을 여러 페이지에 적용할 수 있으므로 웹 페이지가 더 얇아집니다. 또한 단일 파일을 수정하여 전역 변경이 이루어질 수 있으므로 사이트 관리가 더 쉬워집니다.
일부 잘못된 태그는 기본적으로 더 의미 있고 간단한 CSS 규칙으로 대체될 수 있는 표시용 태그(예: small)입니다. 다른 것들은 단지 프리젠테이션용이 아니라 불필요하게 부피가 크거나(font 태그 등) 불쾌감을 주어(blink 등) 사용성에 해를 끼칩니다. 상표
다음은 더 나은 선택을 제공할 수 있는 자주 접할 수 있는 태그입니다. b을 사용하면 대담한 요소를 만들 수 있습니다. 대신 strong(강한 강조 의미)을 사용하거나 CSS를 사용하여 작업을 수행하고 font-weight: bold 규칙을 추가하여 굵은 요소를 표시하는 것이 더 합리적입니다. i을 사용하여 이탤릭체 요소를 생성할 수 있습니다. em(강조용)을 사용하면 더욱 의미가 있습니다. 또는 CSS를 사용하여 이탤릭체를 표현할 수 있습니다. font-style: italic big 더 큰 글꼴 크기를 생성할 수 있습니다. 대신 의미를 추가하는 제목(예: h1, h2 등, 텍스트가 제목인 경우)을 사용하여 더 많은 제어권을 얻으려면 CSS의 font-size 속성을 ​​사용하세요. small에서는 작은 글꼴도 제작 가능합니다. CSS(font-size)가 다시 한번 더 많은 제어권을 갖게 되었습니다. hr은 수평선을 표시하는 데 사용할 수 있습니다. CSS의 hr, border-top 속성이나 일반 이미지를 디자인하는 데 border-bottom을 사용하는 경우는 거의 없습니다.
위 태그는 최신 HTML 표준과 호환되지만, 좋은 태그가 갖춰야 할 내용에는 아무런 의미가 없습니다. 더 유용할 수 있지만 특별히 해롭지는 않으며, 다음과 같은 더러운 태그 옆에 서 있을 때 입에서 녹지 않는 순수 버터 덩어리로 쉽게 오해될 수 있습니다. u은 요소에 밑줄을 생성할 수 있습니다. 밑줄 친 텍스트에는 많은 연관성이 있음을 상기시켜줍니다. 이것이 바로 이 태그가 사라진 지 오래 된 이유입니다. 연결되지 않은 텍스트에 밑줄을 긋을 필요가 없습니다. center은 요소 내부의 요소를 중앙에 배치하는 데 사용할 수 있습니다. CSS 속성 text-align은 center뿐만 아니라 left, right, justify도 허용합니다. menu은 메뉴 목록을 만드는 데 사용됩니다. 순서가 지정되지 않은 목록이 더 다양하고 ul가 메뉴의 시체 위에 우뚝 서기 때문에 ul만큼 완벽하지는 않습니다. layer과 div 요소는 CSS 상단에 위치한다는 점에서 유사합니다. 이는 이전 버전의 Netscape에서만 작동하므로 더 이상 유용하지 않습니다. blink 또는 marquee. 큰 소리로 말하지 마세요! 그들은 그렇게 기대되어야 하지만, 지원이 매우 제한되어 있고 아주 아주 기분 나쁜 농담만 할 것입니다. font은 요소의 글꼴 이름, 크기 및 색상을 정의하는 데 사용할 수 있으며 태그 세계에서 악명 높은 태그의 왕이라는 칭호를 정당하게 획득했습니다. 오래된 웹사이트(심지어 새로운 웹사이트도 마찬가지)가 개미떼처럼 페이지를 가득 채웁니다. font 태그 확산의 대부분은 모든 요소의 색상과 크기를 포함하여 태그를 사용하는 웹 제작 font 소프트웨어에서 비롯됩니다. font 태그는 모든 반복 요소(즉, p 요소를 사용할 때마다)에 나타나도록 남용되는 반면, CSS를 사용하면 짧은 코드로 반복 요소를 적용하거나 전체 웹사이트를 제어할 수도 있습니다. CSS 방법을 사용하면 다수의 font 태그에 기생하는 보다 페이지가 더 얇아질 뿐만 아니라 태그만 변경하면 되므로 유지 관리도 더 쉽습니다. CSS 파일의 줄을 각 font 태그를 하나씩 수정하는 대신. 이는 또한 전체적으로 일관된 디자인으로 웹사이트를 유지할 가능성을 높여줍니다. font 태그와 테이블의 부적절한 사용은 불필요한 부풀림의 두 가지 주요 원인입니다. 재산
어쩌면 좋은 라벨을 사용하고 있다고 생각할 수도 있지만, 언제든지 나타날 수 있는 문제가 되는 기생충 속성이 여전히 숨어 있습니다. name은 요소의 이름을 지정하는 데 사용됩니다. input과 같은 양식 요소에서는 완전히 허용되지만 다른 곳에서는 name의 작업이 id 속성으로 대체되었습니다. . text 및 bgcolor은 body 시작 태그에서 페이지의 기본 텍스트 색상과 배경 색상을 정의할 수 있습니다. CSS color 및 background-color 속성도 body 선택기에 적용될 때 이 작업을 수행합니다. backgroundbody 태그에 배경 이미지를 지정할 수 있습니다. CSS는 배경 이미지를 처리하기 위해 background-image와 같은 속성을 사용하여 더 나은 작업을 수행합니다. link, alink, vlink은 body 태그에서 연결(방문하지 않음, 활성화됨, 방문함)을 지정하는 데 사용됩니다. CSS 아기들─:link, :active, :visited이 그 일을 할 것입니다. align은 요소의 콘텐츠를 정렬하는 데 사용할 수 있습니다(예: <div align="center">Stuff</div>), 그러나 center<code>center 태그와 마찬가지로 CSS text-align<code>text-align 속성이 새로운 보스입니다. target<code>target은 다양한 방법으로 연결을 열 수 있으며, 가장 일반적으로 사용되는 방법은 새 창을 여는 것입니다(예: <a href="wherever.html" target="_blank ">도와주세요</a><code><a href="wherever.html" target="_blank">Help me</a>). 보기에는 좋아 보이지만 웹사이트에는 이 작업을 수행하지 않습니다. 사용자는 새 창과 같은 마법 같은 것이 나타날 것이라고 기대하지 않으며 가장 일반적인 탐색 도구는 새 창을 열 때 사용할 수 없는 브라우저의 뒤로 버튼입니다. 불법이고 사용하기 쉽지 않습니다. 알아채다
은 이미지의 경우 width<code>width 및 height<code>height, 테이블의 경우 cellpadding<code>cellpadding 및 cellspacing<code>cellspacing과 같은 태그의 표시 속성을 유지합니다. 요소는 종종 다른 값을 사용합니다. 완벽한 해결책은 아니지만, 웹 페이지에 이미지와 표가 많으면 이를 사용하는 것 외에는 현명한 선택이 없습니다.
가장 혼란스러운 성능 속성은 textarea<code>textarea 태그로, 최신 HTML 버전에는 cols<code>cols 및 rows<code>rows라는 두 가지 유효한 속성만 있습니다. 필요한. 좋은 라벨, 나쁜 사용
침실에 들어가려면 개구멍을 통해 몸을 굽히세요. 그런데 잠깐만요, 손잡이가 달린 사람이 들어갈 수 있는 문이 있어요! 와, 보세요 – 한 사람이 들어가기에 딱 맞습니다.
HTML 태그(좋은 태그)를 사용하세요. 믿거나 말거나(믿으세요!) 좋은 이유가 있습니다. 좋은 전제를 가지고 사용하면 더 좋은 결과를 얻을 수 있습니다.
웹 페이지 자체는 HTML 태그 구문 및 의미 체계보다 사용하기가 더 쉽습니다. 화면 판독기에는 ul<code>ul 태그가 있거나 h1<code>h1 또는 h2<code>h2가 있는 경우가 많습니다. 제목 태그를 사용할 때 강조 표시하세요.
HTML 태그 세계에서 가장 많이 남용되는 것은 테이블입니다. 테이블은 레이아웃에 자주 사용되지만 테이블은 설계된 대로 테이블 형식 데이터를 표시하는 데에만 사용해야 합니다. 표가 없는 레이아웃 방법은 일종의 깨달음을 추구하는 선이 아닙니다. 웹 페이지의 무게를 크게 줄일 뿐만 아니라 유지 관리 및 재설계도 더 쉽게 만듭니다. 알아채다
디자이너는 여기에 언급된 태그와 속성(특히 레이아웃용 테이블 사용)을 사용하여 이전 버전의 브라우저(특히 Netscape 4)에서 작동할 수 있는 전환 디자인을 만들기도 합니다. 최신 브라우저. 테이블은 CSS가 무능한 Netscape 4에서 더 큰 프리젠테이션 제어를 허용합니다. 불행하게도 이러한 사용자는 극소수이고, 테이블 레이아웃의 단점을 노출하는 모바일 장치 사용자의 수가 증가하고 있습니다. 위에 설명된 테이블 없는 디자인은 이러한 단점을 방지하며, 일부 사용자에 대한 약간의 성능 변화에도 불구하고 모든 브라우저에서 완전한 기능을 유지합니다. 액자
골디락스는 시리얼 한 잔이면 좋겠다고 생각하지만, 갑자기 거대한 육식포유류 세 마리가 나타나 그녀를 창밖으로 내던집니다. 프레임은 시리얼 컵입니다. 겉으로는 괜찮아 보이지만 멸종위기 단계에 이르렀고 곧 사라질 것입니다.
대부분의 웹사이트는 프레임을 사용하지 않으며 일반 사용자는 문서를 페이지처럼 취급합니다.
예를 들어 사용자가 특정 웹페이지를 북마크에 추가하는 것을 방지하거나, 사용자가 이메일이나 인스턴트 메시징 소프트웨어를 사용하여 특정 웹페이지를 추천하도록 하거나, 전체 웹사이트를 매우 복잡하고 어렵게 만들고 싶은 경우 등이 있습니다. 스크린 리더 사용자가 프레임 사이를 자주 이동하거나 검색 엔진을 혼란스럽게 하고 싶다면 프레임을 사용하면 됩니다!
요컨대 프레임워크는 복잡성을 증가하고 사용성을 잃습니다. 알아채다
다음 규칙을 준수하는 한 나쁜 미래는 없을 것입니다.
1) 성능과 약간 일치하더라도 태그나 속성을 사용하지 마세요. 그것은 CSS에 관한 것입니다. 그리고 CSS는 그것을 더 잘 수행합니다.
2) 이름에서 제시하는 목적에 맞게 태그를 사용하세요. 테이블 태그는 테이블 형식 데이터에 사용됩니다. 제목 태그는 제목에 사용됩니다. 잠깐만요.
3) 특정 콘텐츠에는 적절한 태그를 사용하세요. 목록에는 list<code>list를 사용하고, 제목에는 hx(x = 1 - 7)를 사용하세요.

확장 독서 HTML 고급 안내서의 표준 필수 사항: 나쁜 습관을 버리고 표준으로 전환 - XHMTL 호환