Basic HTML
Tags: html, learnhtml, codenewbie, codepen
Published: 2019-12-02 02:15:03

This is my first post and I just want to share about web development, but the first we should know about basic html. 

Why *__HTML__*? and why you should know about basic *__HTML__*?

The acronym *__HTML stands for HyperText Markup Language__*. 

A markup language is a computer annotation system for defining the structure and presentation of text. *__HTML__* __is the foundation of all web pages__. 

Without __HTML__, *__you wouldn’t be able to organize text or add images or videos to your web pages__*. 

__HTML__ is the beginning of everything you need to know to create engaging web pages!

__Enough for that, let's get started!__

####__Element and Structure__
HTML elements and structure, the building blocks of websites. HTML elements have a start tag and an end tag. For example, `<html>` and `</html>`.
Example code of HTML, here like this :

{% codepen https://codepen.io/ascaliko/pen/abzobpY %}

####__Tables__
All the syntax you need to create tables in your HTML documents. Use Table Element to create a table, with basic structure
`<table>`, `<tr>` (table row), `<th>` (table header) and `<td>` (table data).
Example code of table element :

{% codepen https://codepen.io/ascaliko/pen/BayBaWy %}

####__Form__
How to create your own form and integrate HTML5 validations. Form elements will very often be used when building a website, especially to create something related to input data, forms are written like this `<form> ... </form>` and are used as containers / wrappers of elements such as text boxes, text areas, radio buttons etc.
Example code of form element : 
```html
<!DOCTYPE html>
<html>
<head>
	<title>Learn HTML | Form</title>
</head>
<body>
	<!-- 1. Action Attribute 
	The Action Attribute functions to refer file for 
	the purpose of executing data transmission.
	-->
	<form  action=""></form> 

	<!-- 2. Attribute Method
	The Attribute method functions is to tell browser 
	about a data process transmission. 
	The Value from this method can be “get” / “post” -->
	<form  action="" method="get"></form> 
	<form  action="" method="post"></form> 

	<!-- 3. Attribute Target 
	The target attribute is the same function as 
	when we are acquainted with the Anchor Element (<a></a>). -->
	<form  action="" method="post" target="_blank"></form> 
	<!-- With these attributes when the form is executed 
		it will open a new tab and will go according 
		to the action attribute value -->

	<!-- 4. Attribute Novalidate
	This attribute serves to deactivate the default validation of
	 elements that are inside the Element form. -->
	<form  action="" Novalidate></form> 
</body>
</html>
```

####__Semantic HTML__
Write clearer, more accessible HTML using Semantic HTML tags.
The benefit of writing semantic HTML stems from what should be the driving goal of any web page: the desire to communicate. By adding semantic tags to your document, you provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is.

| Semantic       | HTML Tags                              |
| -------------- | -------------------------------------- |
| `<abbr>`       | Abbreviation                           |
| `<acronym>`    | Acronym                                |
| `<blockquote>` | Long quotation                         |
| `<dfn>`        | Definition                             |
| `<address>`    | Address for author(s) of the document  |
| `<cite>`       | Citation                               |
| `<code>`       | Code reference                         |
| `<tt>`         | Teletype text                          |
| `<div>`        | Logical division                       |
| `<span>`       | Generic inline style container         |
| `<del>`        | Deleted text                           |
| `<ins>`        | Inserted text                          |
| `<em>`         | Emphasis                               |
| `<strong>`     | Strong emphasis                        |
| `<h1>`         | First-level headline                   |
| `<h2>`         | Second-level headline                  |
| `<h3>`         | Third-level headline                   |
| `<h4>`         | Fourth-level headline                  |
| `<h5>`         | Fifth-level headline                   |
| `<h6>`         | Sixth-level headline                   |
| `<hr>`         | Thematic break                         |
| `<kbd>`        | Text to be entered by the user         |
| `<pre>`        | Pre-formatted text                     |
| `<q>`          | Short inline quotation                 |
| `<samp>`       | Sample output                          |
| `<sub>`        | Subscript                              |
| `<sup>`        | Superscript                            |
| `<var>`        | Variable or user defined text          |