WEB

Most common Tags

DESCRIPTIONS

DOCTYPE & HTML TAGS

<!DOCTYPE html>

<html>

<head>

<title>Your document title</title>

</head>

<body>


<h1> Heading</h1>

<p>Paragraph content.</p>

</body>

</html>



HEAD TAGS

<head>

  <meta charset="UTF-8">

  <meta name="keywords" content="Puerto Rican, Minimalism, Cartoons">

  <meta name="author" content="Michael Rivera-Cruz">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>



BODY TAGS

<html>

<head>



<title>Your document title</title>



</head>

<body>

  <h1>Hello World</h1>

  <p>This is my awesome website.</p>

</body>

</html>


STYLE TAGS



<!DOCTYPE html>

<html>

<head>



<title>Your document title</title>

<style>



/* This is internal styling */

h1 {

    color: black;

}



p {

    color: red;

}



</style>



</head>

<body>



<h1> Heading</h1>

<p>Paragraph content.</p>



</body>

</html>


SCRIPT TAGS

<!DOCTYPE html>

<html>

<head>



<title>Your document title</title>



<script src="javascript.js"></script>



</head>



<!-- Generated by the server to execute data -->

<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>



<!-- Static -->

<script>

  const userInfo = JSON.parse(document.getElementById("data").text);

  console.log("User information: %o", userInfo);

</script>



HEADER TAGS

<!DOCTYPE html>

<html>

<head>



<title>Your document title</title>



</head>

<body>



<header>

<img src="logo.png" alt="My awesome website logo" >

    <h1>Welcome to my awesome website</h1>

    <p>Paragraph content.</p>

  </header>



<h2> Sub-heading</h2>

<p>Paragraph content.</p>



</body>

</html>



MAIN TAGS



<!DOCTYPE html>

<html>

<head>



<title>Your document title</title>



</head>

<body>



<header>

<img src="logo.png" alt="My awesome website logo" >

    <h1>Welcome to my awesome website</h1>

    <p>Paragraph content.</p>

  </header>



<main>

<h2> Sub-heading</h2>

<p>Paragraph content.</p>

</main>



</body>

</html>



SECTION TAGS



<!DOCTYPE html>

<html>

<head>

<title>Your document title</title>

</head>

<body>

<header>

<img src="logo.png" alt="My awesome website logo" >

    <h1>Welcome to my awesome website</h1>

    <p>Paragraph content.</p>

  </header>

<main>

<section>

  <h2>Section Heading</h2>

  <p>The section tag can contain any elements.</p>

  <img src="image.png" alt="Image example">

</section>

</main>

</body>

</html>



ASIDE TAGS

<!DOCTYPE html>

<html>

<head>

<title>Your document title</title>

</head>

<body>

<header>

<img src="logo.png" alt="My awesome website logo" >

    <h1>Welcome to my awesome website</h1>

    <p>Paragraph content.</p>

  </header>

<main>

<section>

  <h2>Section Heading</h2>

  <p>The section tag can contain any elements.</p>

  <img src="image.png" alt="Image example">

</section>

<aside>

  <h3>Usefull ideas</h3>

  <p>Ideas are...</p>

</aside>

</main>

</body>

</html>



ARTICLE TAGS

<!DOCTYPE html>

<html>

<head>

<title>Your document title</title>

</head>

<body>

<header>

<img src="logo.png" alt="My awesome website logo" >

    <h1>Welcome to my awesome website</h1>

    <p>Paragraph content.</p>

  </header>

<main>

<section>

  <h2>Section Heading</h2>

  <p>The section tag can contain any elements.</p>

  <img src="image.png" alt="Image example">

</section>

<aside>

  <h3>Usefull ideas</h3>

  <p>Ideas are...</p>

</aside>

<article>

  <h3>Interesting Fact</h3>

  <p>Most facts on the Internet are interesting.</p>

</article>



</main>

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<title>Your document title</title>

</head>

<body>

<header>

<img src="logo.png" alt="My awesome website logo" >

    <h1>Welcome to my awesome website</h1>

    <p>Paragraph content.</p>

  </header>

<main>

<section>

  <h2>Section Heading</h2>

  <p>The section tag can contain any elements.</p>

  <img src="image.png" alt="Image example">

</section>

<aside>

  <h3>Usefull ideas</h3>

  <p>Ideas are...</p>

</aside>

</main>

<footer>

  <address>

    Postal Address: No. 37, Street, City, NZ.

  </address>

  <p>My Awesome Website, Copyright © 2020 All rights reserved.</p>

</footer>

</body>

</html>



NAV TAGS

<!DOCTYPE html>

<html>

<head>

<title>Your document title</title>

</head>

<body>

<header>

<img src="logo.png" alt="My awesome website logo" >

    <h1>Welcome to my awesome website</h1>

    <p>Paragraph content.</p>

  </header>

<nav>

  <ul>

    <li><a href="#">HOME</a></li>

    <li><a href="#">ABOUT</a></li>

    <li><a href="#">SERVICES</a></li>

    <li><a href="#">CONTACT</a></li>

  </ul>

</nav>

<main>

<section>

  <h2>Section Heading</h2>

  <p>The section tag can contain any elements.</p>

  <img src="image.png" alt="Image example">

</section>

<aside>

  <h3>Usefull ideas</h3>

  <p>Ideas are...</p>

</aside>

</main>

<footer>

  <address>

    Postal Address: No. 37, Street, City, NZ.

  </address>

  <p>My Awesome Website, Copyright © 2020 All rights reserved.</p>

</footer>

</body>

</html>



IMAGE TAGS

<a href="#"><img src="logo.png" alt="My awesome website logo" ></a>



ANCHOR TAGS

<a href="#">HOME</a>

<a href="#"><img src="logo.png" alt="My awesome website logo" ></a>

<a href="https://www.yoobee.ac.nz">YOOBEE COLLEGES</a>



DIV TAGS

<div style="background-color: #333; color: white; padding: 10px;">

  <h3>This header is colour with CSS styles</h3>

  <p>This paragraph is colour with CSS styles</p>

</div>





HEADING TAGS

<h1>Heading text</h1>

<h2>Heading text</h2>

<h3>Heading text</h3>

<h4>Heading text</h4>

<h5>Heading text</h5>

<h6>Heading text</h6>

PARAGRAPH TAGS

<p>Paragraph content.</p>

BOLD TAGS

<p>Normal text or <b>text in bold</b>.</p>



EM TAGS

<h2>My <em>awesome</em>website</h2>

<h2>My <i>awesome</i>website</h2>



FIGURE TAGS

<figure>

  <figcaption>My awesome website logo</figcaption>

  <img src="logo-image.png" alt="Logo">

</figure>



HORIZONTAL LINE TAGS

<p>Paragraph content</p>

<hr>

<h2>Heading</h2>

<p>Paragraph content</p>





FORM TAGS

<form action="search" method="GET">

  Search Term: <input type="text" name="search_query">

  <input type="submit" value="Search">

</form>



AUDIO TAGS

<audio controls>

<source src="sound.mp3" type="audio/mpeg"">

<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>

</audio>



VIDEO TAGS

<video controls width="400" height="300">

  <source src="video-example.mp4" type="video/mp4">

  <source src="video-sample.webm" type="video/webm">

  <source src="video-demo.ogg" type="video/ogg">

  Video tag is not supported in this browser.

</video>



STRONG TAGS

<p>My <strong>awesome</strong> website.</p>



UNDERLINES TAGS

<p>My <u>awesome</u> website.</p>





ORDERED LIST TAGS

<ol>

  <li>Action</li>

  <li>Adventure</li>

  <li>Comedy</li>

  <li>Thriller</li>

  <li>Sci-Fi</li>

</ol>



UNORDERED LIST TAGS

<ul>

  <li>First item</li>

  <li>Second item</li>

  <li>Third item</li>

</ul>




USEFUL LINKS: