WEB

Most common Tags

Most common Tags

DESCRIPTIONS

DOCTYPE & HTML TAGS

The opening tag for the element is placed right after the <!DOCTYPE> declaration at the beginning of the HTML document.

The <html> tags are used to define the root element of an HTML file. See the example below.

<!DOCTYPE html>

<html>

<head>

<title>Your document title</title>

</head>

<body>

<h1> Heading</h1>

<p>Paragraph content.</p>

</body>

</html>

HEAD TAGS

The HTML <head> element contains important information (metadata) of your web page document. This metadata is only visible to the browser and not to the end-user. See the example below.

<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 <body> element holds the content of your web pages. The <body> element goes after <html> element. See example below.

<html>

<head>



<title>Your document title</title>



</head>

<body>

  <h1>Hello World</h1>

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

</body>

</html>

STYLE TAGS

Used within <head> or <body>, HTML style tags define internal styling for elements. This styling information contains CSS. See the example in the head area.

<!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

The HTML <script> element is used to insert executable code or data; usually, this is used to insert or refer to JavaScript code. See the examples below.

<!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

The HTML <header> may include a title, a brand logo, or information about the website. See the example below.

<!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

The HTML <main> tag represents the primary (main) content of your website page document or web application. You can only use <main> once. See the example below.

<!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

Within a web page, HTML <section> tags are use to structure content. Also, you can use as many <section> tags within your website page. See the example below.

<!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

HTML <aside> contains information that is not directly related to a web page's principal purpose or idea. In HTML <aside>, details of the author, definitions, related information, ads, etc. can be included. See the example below.

<!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

The <article> tags can hold blog entries, news articles, comments, etc. See the example below.

<!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>

The HTML <footer> tags leave a footer for its nearest content or root item to the segment. Also, it is used inside individual blocks in a website document (apart from the website document's main footer content).

<!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>

</footer>

</body>

</html>

NAV TAGS

The HTML <nav> element defines a block of navigational links leading to the main sections of a website.

<!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>

</footer>

</body>

</html>

IMAGE TAGS

The HTML <img> tag defines an image in an HTML page. To link an image to another document, use the <img> inside <a> tags. See the example below.

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

ANCHOR TAGS

The <a> HTML element links a page within the website or an image to a document, and another website page. See the examples below.

<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

HTML <div> element is for content division. It organizes content and simplifies the process of styling information with attributes and CSS. See the example below.

<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

The HTML defines headings in a web document by using the six HTML heading elements from <h1> to <h6>.

<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

The HTML <p> tag specifies the beginning of a paragraph.

<p>Paragraph content.</p>

BOLD TAGS

The element <b> converts standard text into a bold text in HTML without adding special significance. See the example below.

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

EM TAGS

HTML <em> feature responds to the HTML query of how to italicize. Also, you can use <i> to italicize too. See the example below.

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

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

FIGURE TAGS

The <figure> element usually represents images, diagrams, and illustrations. See the example below.

<figure>

<figcaption>My awesome website logo</figcaption>

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

</figure>

HORIZONTAL LINE TAGS

This element creates a horizontal line, making a division within the content. The HTML <hr> tag has no closing tag since it does not contain any content. See the example below.

<p>Paragraph content</p>

<hr>

<h2>Heading</h2>

<p>Paragraph content</p>

FORM TAGS

The HTML <form> tag groups elements and sends their data to a web server. See the search form example below.

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

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

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

</form>

AUDIO TAGS

The item HTML <audio> embeds sound content into a page of the website. See the example below.

<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

The HTML <video> tag adds a video on the web page. See the example below.

<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

The <strong> HTML tags in an HTML page emphasize important information. See the example below.

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

UNDERLINES TAGS

By using the <u> tag, its content receives a simple solid underline in HTML. See the example below.

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

LINK TAGS

By using the HTML <link> tag, you can set a link between a document and an external resource. Unlike the <a> tag that is written in the <body> section, the <link> must be placed in the HTML <head> tag. See the example below.

<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

Using <ol> tags, you can create HTML ordered lists of items. See the example below.

<ol>

<li>Action</li>

<li>Adventure</li>

<li>Comedy</li>

<li>Thriller</li>

<li>Sci-Fi</li>

</ol>

The <ul> tag creates an unordered list of items. See the example below.

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

WEB

Most common Tags

DESCRIPTIONS

DOCTYPE & HTML TAGS

HEAD TAGS

BODY TAGS

STYLE TAGS

SCRIPT TAGS

HEADER TAGS

MAIN TAGS

SECTION TAGS

ASIDE TAGS

ARTICLE TAGS

FOOTER TAGS

NAV TAGS

IMAGE TAGS

ANCHOR TAGS

DIV TAGS

HEADING TAGS

PARAGRAPH TAGS

BOLD TAGS

EM TAGS

FIGURE TAGS

HORIZONTAL LINE TAGS

FORM TAGS

AUDIO TAGS

VIDEO TAGS

STRONG TAGS

UNDERLINES TAGS

LINK TAGS

USEFUL LINKS:

WEB

Most common Tags

DESCRIPTIONS

DOCTYPE & HTML TAGS

HEAD TAGS

BODY TAGS

STYLE TAGS

SCRIPT TAGS

HEADER TAGS

MAIN TAGS

SECTION TAGS

ASIDE TAGS

ARTICLE TAGS

FOOTER TAGS

NAV TAGS

IMAGE TAGS

ANCHOR TAGS

DIV TAGS

HEADING TAGS

PARAGRAPH TAGS

BOLD TAGS

EM TAGS

FIGURE TAGS

HORIZONTAL LINE TAGS

FORM TAGS

AUDIO TAGS

VIDEO TAGS

STRONG TAGS

UNDERLINES TAGS

LINK TAGS

ORDERED LIST TAGS

UNORDERED LIST TAGS

USEFUL LINKS: