구문:
여기서 이러한 태그 요소의 즉각적인 구문을 살펴보겠습니다.
<article> <h1 id="">…</h1> </article>
구조는 시작 태그를 따릅니다. 다음 이전 섹션에는
태그 또는 부제목을 형성하고 콘텐츠의 정확한 의미 정보를 제공하며 훨씬 더 풍부하고 적절한 의미 있는 정보를 제공합니다. 다른 태그와 마찬가지로 이 기사 태그는 해당 클래스에 대한 이벤트 속성 및 전역 속성과 같은 HTML 속성도 지원합니다.
예시 태그:
<article> <h1 id="Introduction-to-CSS-demo">Introduction to CSS demo</h1> <p>CSS is a cascading Style Sheet helps to make a web page visually colored</p> </article>
HTML에서 기사 태그는 어떻게 작동하나요?
이 섹션에서는 간단한 기사 태그(문서에 포함된 콘텐츠)에 대해 논의하고 웹페이지에서 이 태그가 어떻게 작동하는지 살펴보겠습니다. HTML 5는 검색 엔진의 콘텐츠를 풍부하게 하기 위해 새로운 의미 콘텐츠를 도입합니다. 콘텐츠에 대한 전역 및 이벤트 속성을 지원합니다. 태그의 콘텐츠는 단일 페이지의 다른 콘텐츠 부분과 독립된 문서로 간주됩니다. 페이지의 기사 이름, 저자 정보 및 출판 날짜를 정의하거나 보여줄 수 있습니다. 이 태그는 단일 요소 및 여러
단일 기사 요소가 있는 문서는 문서의 주요 내용을 설명합니다. 개별적인 고유한 단일 콘텐츠를 갖는 반면, 여러 아래는 HTML 태그 구현 예시입니다. 단일 코드: 출력: 코드: 아래 출력은 방문자에게 링크 주소가 포함된 웹페이지를 보여줍니다. 출력: 를 사용하여 날짜와 시간을 표시하는 방법을 보여주는 예 코드: 출력: 여러 기사를 사용한 예. 아래 코드는 의미 요소 코드: 출력: 를 살펴보겠습니다. 태그는 여러 코드: 출력: 코드: 다음은 관련 콘텐츠가 있는 모든 문서의 웹페이지 헤드라인을 포함하는 전역 헤더입니다. 다음은 특정 웹사이트의 바닥글로 연결되고 바닥글 섹션에 회사 세부정보를 제공하여 SEO에 도움이 되는 태그입니다. 마지막으로 출력: 코드: 출력: Untuk membuat kesimpulan, artikel ini merangkumi beberapa panduan untuk digunakan pada halaman web. Ia merupakan pilihan terbaik untuk mengandungi dokumen (mereka rasa sendiri) atau kandungan dalam satu halaman web, dan ia dikenali sebagai elemen semantik yang sempurna di bawah HTML5. Sebagai konteks serba lengkap, ia telah digunakan dalam html5 kerana tapak web canggih telah mula memanfaatkan sepenuhnya teg ini diberi ganjaran oleh pengguna dengan baik dalam menyiarkan kandungan seperti blog dan majalah.HTML 태그 구현 예시
예시 #1
<title>HTML Article Tag demo</title>
<article>
<h2 id="python">python</h2>
<p>Python is a new programming language</p>
</article>
예시 #2
속성을 사용하는 예를 보여줍니다. CSS 스타일로. CSS를 사용하여 웹 브라우저에 잘 표시됩니다.
<title>Demo of article</title>
<article style="width: 200px; border: 1px solid black;
padding: 8px; border-radius: 8px;
margin:6px;">
<article>
<address>
Written by xxxxxx.<br>
refer me at: <br>
https://www.educba.com/ <br>
</address>
</article></article>
예시 #3
<title>Demo of article tag</title>
<article style="width: 200px; border: 1px solid black;
padding: 8px; border-radius: 8px; color :green;
margin:6px;">
<article class="blog_post">
<p>My first article post. Stay tuned</p>
<footer>
<p>
Displayed on <time datetime="2019-12-24 20:00"> Dec 23</time> by tutor
</p>
</footer>
</article></article>
예시 #4
를 사용하여 HTML 콘텐츠 내에서 가장 중요한 헤더를 지정합니다.
<style>
.JAN {
margin: 1;
padding: .2rem;
background-color: #D2691E;
font: 2rem 'Fira Sans', sans-serif;
}
.JAN > h1,
.day {
margin: .4rem;
padding: .2rem;
font-size: 1rem;
}
.day {
background: border-box no-repeat
gray;
}
.day > h2,
.day > p {
margin: .2rem;
font-size: 1rem;
}
</style>
<article class="JAN">
<h1 id="FEDERAL-HOLIDAYS-IN-USA">FEDERAL HOLIDAYS IN USA</h1>
<article class="day">
<h2 id="JAN">01 JAN 2020</h2>
<p>NEW YEAR DAY.</p>
<p> martin luther day </p>
</article>
<article class="day">
<h2 id="feb">18 feb 2020</h2>
<p>Presidents day.</p>
</article>
<article class="day">
<h2 id="May">05 May 2020</h2>
<h2 id="May">27 May 2020</h2>
<p>mothers day.</p>
<p>memorial day.</p>
</article>
</article>
예시 #5
<style>
.art {
margin: 5;
padding: .3rem;
background-color: #DC143C;
font: 1rem 'italic', sans-serif;
}
</style>
<article class="art">
<section id="aim">
<p>[Main Objective]</p>
</section>
<section id="main_concept">
<p>[Content text]</p>
</section>
<section id="link page">
<ul>
<li><a href="tt.html">first link page</a></li>
<li><a href="th.html">second link page</a></li>
</ul>
</section>
</article>
예시 #6
<article>
<header>
<h1 id="On-this-page">On this page</h1>
<p>Published on 15th DEC 2019</p>
</header>
<p>WELCOME</p>
<p> EXAMPLES TOPIC</p>
<p>ILLUSTRATION</p>
<section>
<h2 id="Related-topics">Related topics</h2>
<article>
<footer>
<p>published by Mark winston</p>
</footer>
<p>This was a great article</p>
</article>
<article>
<footer>
<p>Posted by: Casey Brock</p>
</footer>
<p>What do you think about the topics with the comments please</p>
</article>
</section>
</article>
예시 #7
<title>Demo of article tag</title>
<main>
<article>
<h1 id="Cloud-computing-Basics">Cloud computing Basics</h1>
<p>Used for data storage.</p>
<section>
<h2 id="Basic-and-syntax-part">Basic and syntax part</h2>
<p>With an example.</p>
</section>
<section>
<h2 id="Types-of-cloud-computing-services">Types of cloud computing services</h2>
<p>Private , public , hybrid</p>
</section>
</article>
</main>
Kesimpulan
