HTML Basic Tags

자주 사용하는 태크

<div>: The Content Division element

스타일링이나 스크립팅을 위한 콘테츠 분할 블록 요소

div 보다 header, footer, main, section, article, nav 등 다양한 시매틱한 테그들을 사용하는 것을 권장

(검색엔진최적화, 코드 가독성, 접근성 등의 이유)

<div>
    오늘 날씨는 맑음
</div>
<div>
    내일 날씨도 맑음
</div>

<span>: The Content Span element

인라인 컨테이너

<p>오늘 <span style="color: skyblue;">날씨</span>는 맑음! </p>

<section>: The Generic Section element

문서의 논리적 구획을 나누어 주제별로 관련된 콘텐츠를 그룹하는 블록 요소
제목 요소를 자식으로 포함해야 함

<section>
    <h2>날씨</h2>
    <p>오늘 날씨는 맑음</p>
</section>

<header>: The Header element

소개 또는 탐색에 도움을 주는 블록 콘테츠

<article>
    <header>
        <h1>날씨</h1>
    </header>
    <p>오늘 날씨는 맑음!!</p>
</article>

navigation으로서 현재 페이지 내, 또는 다른 페이지로의 링크정보를 담는 Section 요소

<nav>
    <ul>
        <li><a href="#">오늘 날씨</a></li>
        <li><a href="#">내일 날씨</a></li>
        <li><a href="#">일주일 날씨</a></li>
    </ul>
</nav>

<footer>: The Footer element

상위 섹션 콘텐츠 또는 섹션 루트 요소의 footer
일반적으로 해당 색션의 작성자, 저작권 데이터 또는 관련 문서에 대한 링크정보가 포함될 수 있다.

<body>
    <section>
        오늘 날씨는 맑음!
    </section>
    <footer>
        Written By Albert
    </footer>
</body>

<main>: The Main element

<body>의 주요 내용을 표현한다.
웹페이지에서 한 번만 사용할 수 있습니다.

<body>
    <main>날씨</main>
    <section>
        오늘 날씨는 맑음!
    </section>
</body>

<article>: The Article Contents element

독립적으로 배포되건 재사용될 수 있도록 의도된 구획

<article>
    <h1>날씨</h1>
    <article>
        <h2>오늘</h2>
        <p>맑음</p>
    </article>
    <article>
        <h2>내일</h2>
        <p>흐림</p>
    </article>
</article>

<aside>: The Aside element

문서의 주요 내용과 간접적으로 연관된 부분 구획
사이드바, 각주, 광고 배너 등

<aside>
    <p>비오는 날에는 파전!!</p>
</aside>

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: The HTML Section Heading elements

Heading 제목이다.

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<a>: The Anchor element

윕 페이지,파일, 이메일 주소, 동일한 페이지의 위치 또는 URL이 주소를 지정할 수 있는 모든 항목에 대한 hyperlink를 생성한다.
- href: hypertext reference

<a href="https://www.books.weniv.co.kr/basecamp-html-css">HTML/CSS 베이스캠프</a>

<p>: The Paragraph element

단락을 나타납니다. (Paragraph)

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga corrupti alias possimus optio esse. Eos in asperiores ullam repellat minima cumque aspernatur dolores animi fugit non. Voluptatem ab dolorum iusto.</p>

<strong>: The Strong Importance element

콘텐츠의 중요성, 심각성 또는 긴급성을 나타냅니다.
브라우저는 일반적으로 굵은 글씨로 렌더링한다.

<b> vs. <strong>

<strong> 요소는 중요한 콘텐츠이고 <b>은 중요하는 것이 잘 보이게 하기 위해서이다.

<p><strong>오늘</strong> 날씨는 맑음</p>

<br>: The Line Break element

break(line break)

<p>Genius is one percent inspiration,<br>ninety nine percent per</p>

paragraphs 사이에 여백을 만들기 위해 <br>을 사용하지 말아야 한다.

<hr>: The Thematic Break (Horizontal Rule) element

Thematic Break (주제 변경)

<p>프로젝트 1: ...</p>
<hr />
<p>프로젝트 2: ...</p>

<code>: The Inline Code element

잛은 코드 조각(한 줄)을 나타난다

<p><code>&lt;code&gt</code>는 코드의 조각을 표현한다.</p>

<pre>: The Preformatted Text element

HTML에 작성한 내용 그대로 표현한다

<pre>
          -
         ---
        -----
       -------
        -----
         ---
          -
</pre>

<ol>: The Ordered List element

번호가 매겨진 목록
type:1,a,A,i,I
start: 시작 위치
reversed: 역순

<h2>공부 순서</h2>
<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ol>

<ul>: The Unordered List element

순가가 없는 목록
type: circle,disc,square

<h2>기술 스택</h2>
<ul>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ul>

<img>: The Image Embed element

문서에 이미지를 삽입

<img src="이미지 주소" alt="이미지 설명"> # src는 required

마무리

다양한 태그가 존재하는데 그 의미를 고민하지 않고 div ,br 이 편해서 막 사용했는데 그 태그의 의미에 맞게 고민해서 사용해야 겠어요.

참조

ChatGPT

Last updated 11 months ago

Was this helpful?

<div>: The Content Division element

스타일링이나 스크립팅을 위한 콘테츠 분할 블록 요소

div 보다 header, footer, main, section, article, nav 등 다양한 시매틱한 테그들을 사용하는 것을 권장

(검색엔진최적화, 코드 가독성, 접근성 등의 이유)

<div>
    오늘 날씨는 맑음
</div>
<div>
    내일 날씨도 맑음
</div>

<footer>: The Footer element

상위 섹션 콘텐츠 또는 섹션 루트 요소의 footer

<body>
    <section>
        오늘 날씨는 맑음!
    </section>
    <footer>
        Written By Albert
    </footer>
</body>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga corrupti alias possimus optio esse. Eos in asperiores ullam repellat minima cumque aspernatur dolores animi fugit non. Voluptatem ab dolorum iusto.</p>

<strong>: The Strong Importance element

콘텐츠의 중요성, 심각성 또는 긴급성을 나타냅니다.

브라우저는 일반적으로 굵은 글씨로 렌더링한다.

<b> vs. <strong>

<strong> 요소는 중요한 콘텐츠이고 <b>은 중요하는 것이 잘 보이게 하기 위해서이다.

<p><strong>오늘</strong> 날씨는 맑음</p>

<div>: The Content Division element

<span>: The Content Span element

<section>: The Generic Section element

<header>: The Header element

<nav>: The Navigation Section element

<footer>: The Footer element

<main>: The Main element

<article>: The Article Contents element

<aside>: The Aside element

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: The HTML Section Heading elements

<a>: The Anchor element

<p>: The Paragraph element

<strong>: The Strong Importance element

<br>: The Line Break element

<hr>: The Thematic Break (Horizontal Rule) element

<code>: The Inline Code element

<pre>: The Preformatted Text element

<ol>: The Ordered List element

<ul>: The Unordered List element

<img>: The Image Embed element

마무리

참조

<div>: The Content Division element

<span>: The Content Span element

<section>: The Generic Section element

<header>: The Header element

<nav>: The Navigation Section element

<footer>: The Footer element

<main>: The Main element

<article>: The Article Contents element

<aside>: The Aside element

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: The HTML Section Heading elements

<a>: The Anchor element

<p>: The Paragraph element

<strong>: The Strong Importance element

<br>: The Line Break element

<hr>: The Thematic Break (Horizontal Rule) element

<code>: The Inline Code element

<pre>: The Preformatted Text element

<ol>: The Ordered List element

<ul>: The Unordered List element

<img>: The Image Embed element

마무리

참조