Skip to content

Instantly share code, notes, and snippets.

@ross-u
Last active October 21, 2020 14:19
Show Gist options
  • Save ross-u/01a0d06dcee8d980c21015192f741b7f to your computer and use it in GitHub Desktop.
Save ross-u/01a0d06dcee8d980c21015192f741b7f to your computer and use it in GitHub Desktop.
Semantic HTML example
<!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 Connor Fan Page
</h1>
</header>
<section>
<h2>Welcome</h2>
<p>
Welcome to the unofficial
<strong> Sarah 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 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