HTML5 의미론-HTML 튜토리얼-php.cn

HTML5 의미론의 예

예 #2 – <nav>

예 #3 – <섹션>

예 #5 – <div>

예시 #6 – <자세히> 그리고<요약>

하나의 예제에서 모든 요소 코드를 구현하는 방법은 무엇입니까?

집

웹 프론트엔드

HTML 튜토리얼

HTML5 의미론

PHPz

Sep 04, 2024 pm 04:37 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML5 의미 체계 요소에는 구성 요소 유형을 반영하는 중요한 이름이 있습니다. 표, 머리글, 바닥글 등을 예로 들어보겠습니다.

<요약>
<헤더>
<제쳐두고>
<마크>
<섹션>
<시간>

HTML4의 경우 개발자는 자신의 ID/클래스 이름을 사용하여 상단, 헤더, 하단, 메뉴, 바닥글, 기본, 탐색, 머티리얼, 개체, 상단 탐색, 사이드바 등과 같은 요소를 디자인합니다. 그러나 이로 인해 검색엔진이 웹페이지의 정확한 내용을 식별하지 못했습니다.

HTML5 의미론의 예

이제 HTML5 의미론 요소의 몇 가지 예를 살펴보겠습니다.

예 #1 –

이름에서 알 수 있듯이 페이지 소개 세그먼트의 헤더를 나타냅니다. 한 페이지에 여러 헤더를 볼 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Header Element for the page</title>
<style>
h1, h4 {
Color:#red;
Text-align:centre;
margin-bottom:2px;
}
p {
font-size:23px;
text-align:centre;
margin-top:2px;
}
</style>
</head>
<body>
<article>
<header>
<h1>Educba learning bridge</h1>
<h3>Become a techinal learner with EDUCBA</h3>
<p>Hey the best online training institute in ASIA </p>
</header>
</article>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미론

예 #2 –

내비게이션 링크 모음은 내비게이션 메뉴나 내비게이션 바를 설명하는 데 사용됩니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Navigation Element</title>
<style>
h1 {
color:#Grey;
}
</style>
</head>
<body>
<h1>Navigation Bar for EduCBA</h1>
<nav>
<a href="https://www.educba.com/">Home</a> |
<a href="https://www.educba.com/data-science/">Data Science</a> |
<a href="https://www.educba.com/software-development/">Software Development</a> |
<a href="https://www.educba.com/design/">Design</a> |
<a href="https://www.educba.com/finance/">Finance</a>
</nav>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미론

예 #3 – <섹션>

페이지는 각 섹션의 요소와 함께 소개, 연락처, 세부정보 등의 섹션으로 나눌 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Have a look for Section Element in EduCBA</title>
<style>
h1 {
color:#Grey;
}
p {
font-size:20px;
text-align:left;
margin-top:2px;
}
</style>
</head>
<body>
<section>
<h1>AWS Tutorials for EduCBA</h1>
<p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
</section>
<section>
<h1>Data Mining</h1>
<p>AThrough technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
</p>
</section>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미론

예 #4 –

이 표시 요소는 텍스트를 강조하는 데 사용됩니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>EduCBA mark Element</title>
<style>
h2 {
color:#Grey;
}
</style>
</head>
<body>
<h1>How to mark text </h1>
<p> In theory, this method transforms <mark>raw data into valuable information</mark> or insights.</p>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미론

예 #5 –

블록이나 세그먼트 분할의 모습입니다. 패키지로 사용됩니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>div Element</title>
<style>
.edu {
color:#grey;
}
</style>
</head>
<body>
<h1>div Element for educba </h1>
<div class="EduCBA">
<h1>Data Science</h1>
<p>Data analatics computer Science nachine learning </p>
</div>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미론

예시 #6 – <자세히> 그리고<요약>

이 요소는 사용자가 보거나 숨길 수 있는 추가 세부정보를 정의하는 데 사용됩니다.
이 요소는 <세부정보> 요소

<세부사항> 구현 프로그램 그리고 <요약>

코드:

<!DOCTYPE html>
<html>
<head>
<title>Details for the EduCBA Summery</title>
<style>
.GFG {
Color:#red;
font-size:60px;
Text-align:left;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:left;
margin-top:3px;
}
</style>
</head>
<body>
<details>
<summary class="EDUCBA">Make your Study easily with us</summary>
<p>One of the best Data Science and web portal
where you can learn good skills of programming.
</p>
</details>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미론

: 페이지 콘텐츠 이외의 콘텐츠를 지정하는 데 사용되는 요소입니다.
: 시간이나 날짜를 지정하는 데 사용되는 요소입니다.
: 문서의 주요 내용을 지정하는 데 사용되는 요소입니다.

하나의 예제에서 모든 요소 코드를 구현하는 방법은 무엇입니까?

여기서 한 가지 예에서 요소 코드를 구현하는 방법을 살펴보겠습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Header Element for the page</title>
<style>
color:red;
h1, h4 {
Color:#red;
Text-align:centre;
margin-bottom:2px;
}
p {
font-size:20px;
text-align:centre;
margin-top:2px;
}
</style>
</head>
<body style="background-color:LightCyan;">
<article>
<header>
<h1>Educba learning bridge</h1>
<nav>
<a href="https://www.educba.com/">Home</a> |
<a href="https://www.educba.com/data-science/">Data Science</a> |
<a href="https://www.educba.com/software-development/">Software Development</a> |
<a href="https://www.educba.com/design/">Design</a> |
<a href="https://www.educba.com/finance/">Finance</a>
</nav>
<details>
<h3>Become a technicall learner with EDUCBA</h3>
<section>
<h1><mark>AWS Tutorials for EduCBA</mark></h1>
<p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
</section>
<section>
<h1><mark>Data Mining</mark></h1>
<p>Through technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
</p>
</section>
<p><em>EduCBA is the best online training institute in ASIA</em></p>
</details></header>
</article>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미론