바이오 대표

[HTML] <div></div>, Semantic 태그들 본문

Front_end

[HTML] <div></div>, Semantic 태그들

바이오 대표 2021. 8. 8. 18:35

<div> : (division) 또 다른 box (쉽게 생각하면 enter 역할) 

<div> 를 대체할 수 있는 태그들 with meaning ex) header, main, footer 

 

<div> 를 적용하면 왼쪽 구조를 오른쪽 처럼 만들 수 있다. 

    <body>
        <label for='website' >Website</label>
        <input id='website' required placeholder="Name" type="date"/>
        <input id='website' required placeholder="Name" type="date"/>
        <input type="submit" value="Create Account"/>
    </body>
    <body>
        <div>
          <label for='website' >Website</label>
        </div>

        <div>
          <input id='website' required placeholder="Name" type="date"/>
        </div>
            
        <div>
          <input id='website' required placeholder="Name" type="date"/>
        <div/>
        <input type="submit" value="Create Account"/>
    </body>

 

예전에는 <div></div> 를 이용해서 코드와 html 를 box 형태로 구분 하였다. div 와 같은 역할을 하지만 개발자들이 코드를 보고 더 쉽게 이해 할 수 있도록 바로 의미를 짐작할 수 있는 Semantic 태그들이 존재한다. 

ex) header,main,footer 등

 

* <header> visible (in the body) =! <head> invisible

 

예시) 

<!DOCTYPE html>  
<html lang="kr"> 
    <head>
        <title>HTML input Exercise</title>
    </head>
    <body>
        <header>
            <h1>This is the header</h1>
        </header>
        <main>
            Main text goes here.
        </main>
        
    </body>
</html>

↓

 

<span> : short text

<p> : paragraph

 

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element 

 

HTML elements reference - HTML: HyperText Markup Language | MDN

This page lists all the HTML elements, which are created using tags.

developer.mozilla.org

해당 웹사이트의 Context sectioning 에 다른 태그들 활용 가능 

저작자표시

'Front_end' 카테고리의 다른 글

[CSS] Box (block) & Inlines  (0) 2021.08.12
[CSS] CSS 기본형식 및 HTML 적용 방법  (0) 2021.08.12
[HTML] <form> <label></label><input/></form>_예시)달력  (0) 2021.08.08
[HTML] <form> <label></label><input/></form>_예시)계정  (0) 2021.08.08
[HTML] HEAD = 웹사이트 description, meta 태그  (0) 2021.08.08
'Front_end' Related Articles more