# WEB
# 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.
```html
```
## **BODY TAGS**
- HTML <body> element holds the content of your web pages. The <body> element goes after <html> element. See example below.
```html
Your document title
Hello World
This is my awesome website.
```
## **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.
```html
Your document title
Heading
Paragraph content.
```
## **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.
```html
Your document title
```
## **HEADER TAGS**
- The HTML <header> may include a title, a brand logo, or information about the website. See the example below.
```html
Your document title
Welcome to my awesome website
Paragraph content.
Sub-heading
Paragraph content.
```
## **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.
```html
Your document title
Welcome to my awesome website
Paragraph content.
Sub-heading
Paragraph content.
```
## **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>*
## **FOOTER TAGS**
- 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*](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>*
## **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:**
- [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
- [https://developer.mozilla.org/en-US/docs/Learn/Front-end\_web\_developer](https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer)
- [https://www.w3docs.com/snippets/html/html5-page-structure.html](https://www.w3docs.com/snippets/html/html5-page-structure.html)
- [https://www.semrush.com/blog/semantic-html5-guide/](https://www.semrush.com/blog/semantic-html5-guide/)
- [https://css-tricks.com/how-to-section-your-html/](https://css-tricks.com/how-to-section-your-html/)
- CSS CheatSheet, [https://htmlcheatsheet.com/css/](https://htmlcheatsheet.com/css/)
- CSS reference, [https://cssreference.io/](https://cssreference.io/)