DEV Community

Cover image for Basic HTML
Ascaliko
Ascaliko

Posted on • Edited on

Basic HTML

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 :

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 :

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 :

<!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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)