Tags

• Tags are the building blocks of HTML and they provide the necessary structure for web browsers to render web pages properly.
• Describes the various components of a web page, such as headings, paragraphs, images, links, tables, and forms.

Semantics Tags

Header <header>

Main <main>

Section <section>

Article <article>

Navbar <nav>

Aside <aside>

Divider <div>

Stands for divider, a more general container.

<div></div>

Typography

Paragraphs <p>

Defines a paragraph of text.

<p>
  Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
</p>

Heading1 <h1>

Anchors <a>

Create a hyperlink that redirects to another webpage or document.

<a href="https://www.somewebsite.com">Link Text</a>

Import

Script <script>

Allow to import JS file into the HTML.

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

Links <link>

Allow to upload files like CSS and web frameworks like Bootstrap into the HTML.

<link rel="stylesheet" href="styles.css">

Images

Image <img>

A element to display an image into the document.

<img src="image.jpg" alt="An image">

Picture <picture>

List tags

Ordered List <ol>

<ol>
	<li>First item</li>
	<li>Second item</li>
	<li>Third item</li>
</ol>

Unordered List <ul>

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Tables <table>

Create a table structure on a webpage by organizing data into rows and columns.

<table>
	<tr>
		<th>Name</th>
		<th>Age</th>
		<th>City</th>
	</tr>
	<tr>
		<td>John</td>
		<td>30</td>
		<td>New York</td>
	</tr>
	<tr>
		<td>Jane</td>
		<td>25</td>
		<td>Los Angeles</td>
	</tr>
</table>

Inputs

Text Area <textarea>

Create a larger text input box.

<textarea></textarea>

Form <form>

Create a form for an user input.

• action: The URL that the data from the form is sent.
• method: post | get | put | ...

<form action="https://somewebsite.com" method="post">...</form>

Fieldsets <fielddset>

• fieldset tag groups related form fields together
• legend tag provides a caption or title for the group.

<form>
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone"><br><br>
  </fieldset>
</form>