Skip to main content

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>

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

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

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

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



  • 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.



ORDERED LIST TAGS

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



UNORDERED LIST TAGS

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




USEFUL LINKS: 

No Comments
Back to top
Entity Select