-
-
Save sandrabosk/ed4c2eba1a41b91625c3b21e3ad32151 to your computer and use it in GitHub Desktop.
Semantic HTML example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Semantic HTML</title> | |
<meta charset="UTF-8" /> | |
</head> | |
<body> | |
<nav> | |
<a href="">Home</a> | |
<a href=""> Gallery</a> | |
<a href="">Contact</a> | |
</nav> | |
<main> | |
<!-- header is container for introductory content of one section of the page --> | |
<!-- we can have multiple headers in one document --> | |
<header> | |
<h1> | |
Sarah O'Connor Fan Page | |
</h1> | |
</header> | |
<section> | |
<h2>Welcome</h2> | |
<p> | |
Welcome to the unofficial | |
<strong> Sarah O'Connor </strong> (Terminator) fanpage. | |
</p> | |
<!-- | |
The <figure> tag specifies self-contained content, | |
like illustrations, diagrams, photos | |
inlcuding the <figcaption> holding a caption for the figure/image | |
--> | |
<figure> | |
<img | |
src="https://i.imgur.com/ok9JK16.jpg" | |
alt="Sarah O'Connor movie screenshot" | |
/> | |
<figcaption> | |
Source: | |
<a href="https://en.wikipedia.org/wiki/Sarah_Connor_(Terminator)" | |
>Wikipedia</a | |
> | |
</figcaption> | |
</figure> | |
<article> | |
<h2>About</h2> | |
<p> | |
Sarah Connor is a fictional character in the | |
<mark>Terminator</mark> franchise. | |
</p> | |
<time timedate="01-10-2019">October 10, 2019</time> | |
<!-- <details> specifies additional details that the user can view or hide on demand. --> | |
<!-- The <summary> tag defines a visible heading for the --> | |
<details> | |
<summary>Details</summary> | |
Very little is known about Sarah's life prior to May 12, 1984. | |
According to the movie script, her birth date would be between May | |
15, 1964, and May 11, 1965. | |
</details> | |
</article> | |
</section> | |
</main> | |
<!-- | |
The HTML Inline Frame element (<iframe>) represents a nested browsing context, | |
embedding another HTML page into the current one. While theoretically you | |
can use as many <iframe>s as you like, check for performance problems. | |
--> | |
<iframe | |
width="600" | |
height="400" | |
src="https://www.youtube.com/embed/D6admCYgHZM" | |
> | |
</iframe> | |
<iframe | |
width="600" | |
height="400" | |
src="https://en.wikipedia.org/wiki/Sarah_Connor_(Terminator)" | |
> | |
<p>Your browser does not support iframes.</p> | |
</iframe> | |
<footer> | |
<small> Copyrights ----- 2019 </small> | |
<!-- | |
<small> represents side-comments and small print, | |
like copyright and legal text, independent of its styled presentation | |
--> | |
</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment