My Statement of Faith
My statement of faith
<article>
- The <article> tag specifies independent, self-contained content.
- An article should make sense on its own
- It should be possible to distribute it independently from the rest of the site.
- An article should make sense on its own and Potential sources for the <article> element:
- Forum post
- Blog post
- News story
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article</title>
</head>
<body>
<h1>The article element</h1>
<article>
<h2>My Statement of Faith</h2>
<p>My statement of faith</p>
</article>
<article>
<h2>How the Apostles Died</h2>
<p>How each one of the apostles died. </p>
</article>
<article>
<h2>Parables of Jesus</h2>
<p>List of the Parables of Jesus from the bible. </p>
</article>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article</title>
</head>
<body>
<h1>The article element</h1>
<article>
<h2>My Statement of Faith</h2>
<p>My statement of faith</p>
</article>
<article>
<h2>How the Apostles Died</h2>
<p>How each one of the apostles died. </p>
</article>
<article>
<h2>Parables of Jesus</h2>
<p>List of the Parables of Jesus from the bible. </p>
</article>
</body>
</html>
<article> Results
How the Apostles Died
How each one of the apostles died.
Parables of Jesus
List of the Parables of Jesus from the bible.
<aside>
- Independent content is specified by the article tag.
- Tag used to add a piece of content that is related to the main content. It could be a box to add a quote, or a sidebar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article Element</title>
<body>
<p> My family and I went to
Fort Knox Museum.
<aside>
<p> Fort Knox Museum is located outside of Fort Knox, Ky The Museum is located just inside one of Fort Knox’s gates. The museum is made up of military history.</p>
</aside>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article Element</title>
<body>
<p> My family and I went to
Fort Knox Museum.
<aside>
<p> Fort Knox Museum is located outside of Fort Knox, Ky The Museum is located just inside one of Fort Knox’s gates. The museum is made up of military history.</p>
</aside>
</body>
</html>
<aside> Results
My family and I went to Fort Knox Museum.
< >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px red;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>
<h1>The summary and details elements + CSS</h1>
<details>
<summary>Fort Knox Musuem </summary>
<p>Fort Knox Musuem is located just out side Fort Knox KY. The Musuem is full of Military Artices from the Civil War to now. It has several military vehicle outside. </p>
</details>
</body>
</html>
Results
The summary and details elements + CSS
Fort Knox Musuem
Fort Knox Musuem is located just out side Fort Knox KY. The Musuem is full of Military Artices from the Civil War to now. It has several military vehicle outside.
<details>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body
</body>
</html>
Results
<figcaption>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<figcaption>Results
<figure>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<figure> Results
<footer>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<footer> Results
<header>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<header> Results
<main>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<main> Results
<mark>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<mark> Results
<nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<nav> Results
<section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<section> Results
<summary>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body
</body>
</html>
<summary> Results
<time>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>