Chat
1
x
Article

HTML | Popular terms on the website

Each specification of the field of science must have its own special terms that you like or don't like must be mastered in order to achieve a good understanding of what is being studied. In the world of website developers or website developers we often see or hear about HTML, CSS or javascript. But sometimes we don't or don't really understand what those terms really mean.

Before someone jumps into the world of developer, he must know these terms. Website developers are not far from the world of coding. The term coding will continue to be attached to the existing programming language terms as mentioned above, HTML, CSS, and so on. This code will be useful for translating the wishes of the developer and the device used, this will be useful as a way of communication between the developer and the device.

Well, to keep the contents of this article from extending beyond the title of this article, the author will not elaborate any further. These are the terms that are often used by developers. These terms are presented as fully as possible.


HTML

Hypertext Markup Language (HTML) is a standard markup language for documents designed to be displayed in a web browser. This can be helped by technologies such as Cascading Style Sheets (CSS) and scripting languages ​​such as JavaScript.

HTML is the primary web mark-up language and is run naturally in every browser and is maintained by the World Wide Web Consortium.

The web browser receives an HTML document from a web server or from local storage and renders the document into a multimedia web page. HTML describes a web page's structure semantically and initially includes cues for document viewing.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms can be embedded into the rendered page. HTML provides the means to create structured documents by indicating structural semantics for text such as headings, paragraphs, lists, links, citations, and other items. HTML elements are represented by tags, written using angle brackets. Tags like : <img/> and <input/> directly insert content into the page. Other tags such as <p> surround and provide information about the document text and may include other tags as sub-elements. The browser does not display the HTML tags, but uses them to interpret the page content.

HTML can embed programs written in scripting languages ​​such as JavaScript, which affect the behavior and content of web pages. The inclusion of CSS determines the appearance and layout of the content. The World Wide Web Consortium (W3C), the former maintainer of HTML and the current maintainer of the CSS standard, has been pushing for the use of CSS over explicit presentation HTML since 1997.

HTML Functions

HTML (HyperText Markup Language) is a language that uses certain signs (tags) to declare codes that must be interpreted by the browser so that the page can be displayed correctly.

HTML serves to manage a series of data and information so that a document can be accessed and displayed on the Internet through web services. Specifically, HTML has the following functions:

  1. Create a web page.
  2. Display various information in an Internet browser.
  3. Create a link to another web page with a certain code (hypertext).

Differences between HTML and HTML5

You may have heard of HTML5? what is the difference between HTML and HTML? You may still suspect that the two terms are the same?

HTML4 (recently referred to as “HTML”) was released in 1999 and the latest version was introduced to the public in 2014. Known as HTML5, this latest version adds even more new features to this mark up language. One of the advanced features in HTML5 is support for embedding audio and video. So, instead of using Flash player, we can embed video and audio files into web pages by using the <audio></audio> & <video></video> tags. It also has built-in support for scalable vector graphics (SVG) and MathML for mathematical and scientific formulas.

HTML5 also introduces several improvements to the semantics. The new semantic tags send information to the browser about the meaning of the content, which is useful not only for readers, but also for search engines. The most used semantic tags are: <article></article >, <section></section>, <aside></aside>, <header></header>, and <footer></footer>.


The following table provides information about the significant differences between HTML and HTML5:

# HTML HTML5
1 Does not support audio and video without using flash player support. supports audio and video control with the use of audio and video tags.
2 Uses cookies to temporarily store data. Uses SQL database and app cache to store offline data.
3 Does not allow JavaScript to run in the browser. Allows JavaScript to run in the background. This is possible due to the JS Web worker API in HTML5.
4 Vector graphics are possible in HTML with the help of various technologies like VML, Silver-light, Flash, etc. Vector graphics are also an integral part of HTML5 like SVG and canvas.
5 Does not allow drag and drop effects. Allows drag and drop effect.
6 It is impossible to draw shapes such as circles, rectangles, triangles, etc. HTML5 allows to draw shapes such as circles, rectangles, triangles, etc.
7 Works with all older browsers. Supported by all new browsers like Firefox, Mozilla, Chrome, Safari, etc.
8 Old versions of HTML are not mobile friendly. HTML5 language is more mobile friendly.
9 The Doctype declaration is too long and complicated. Declaration of Doctype is quite simple and easy.
10 Elements such as nav, header is missing. New elements for web structure like nav, header, footer etc.
11 Long and complicated character encoding. Simple and easy character encoding.
12 It's almost impossible to get the actual user's GeoLocation with the help of a browser. One can track user's GeoLocation easily by using JS GeoLocation API.
13 Unable to handle inaccurate syntax. Able to handle inaccurate syntax.
14 Attributes such as charset, async, and ping are missing in HTML. Charset, async, and ping attributes are part of HTML 5.

Improved HTML Elements in HTML5, including removing the following elements :

# Elements in HTML Elements in HTML5
1 applets equivalent to: object
2 acronym equivalent to: abbr
3 dir equivalent to: ul
4 frameset Deleted
5 frames Deleted
6 noframes Deleted
7 strikes No new tags. CSS is used for this
8 big No new tags. CSS is used for this
9 basefont No new tags. CSS is used for this
10 fonts No new tags. CSS is used for this
11 center No new tags. CSS is used for this
12 tt No new tags. CSS is used for this

Attributes in HTML

In HTML there are several attributes that are commonly used, the author will present the point in outline only to simplify the other explanations. It's like :

  • CLASS
        <div class="big-box yellow-box">This is a big yellow box.</div>

  • ID
         <div id="my-box">This is my box! Put your text in some other box.</div>

  • HREF
         <a href="http://google.com">Google it!</a>

  • BODY
        <html>
          <head>
            <title>Example body tags</title>
          </head>
          <body>
            It's in the body!
          </body>
        </html>

  • CHILDREN
        <ul id="parent">
          <li id="child">I am the child of my parents!</li>
        </ul>

  • COMMENTS
        <!-- This is an HTML comment! -->

  • DIV
        <div>This is a div element.</div>

  • HTML

        <!DOCTYPE html>
        <html>
    
        This html section contains the web page side code.
    
        </html>

  • HEAD
        <html>
          <!-- the "head" part -->
          <head>
          </head>
          <!-- the "head" part -->
          <body>
          </body>
        </html>

  • HEADINGS

        The heading section can contain h1, h2, h3, h4, h5, or h6. Here's an example:
    
        <h1> This is an H1 header! </h1>
        <h2> This is an H2 header! </h2>
        <h3> This is an H3 header! </h3>
        ... etc.

  • HORIZONTAL RULES

        The text "hr" will be horizontally spaced with a 1px thick black line.
    
        Your blog text.
        <hr>
        ...next text.

  • HYPERLINKS
        <a href="url this link goes to">Link text</a>
        The following text <a href="http://google.com">go to Google</a>.

  • IMAGES
        <img src="./assets/img/myimage.png" class="style" alt="my image">

  • LINE BREAKS
        <p>Some text <br/> spanning two lines </p>

  • LINKS
        <link type="text/css" rel="stylesheet" href="styles.css" />

  • LISTS

        * Lists
    
        <ul>
          <li>Cras justo odio</li>
          <li>Dapibus ac facilis in</li>
          <li>Morbi leo risus</li>
          <li>Ac consectetur ac port</li>
          <li>Vestibulum at eros</li>
        </ul>

    can also be described as:

    ```
    <div class="col-md-12" >
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a>
        <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilysis in</a>
        <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
        <a href="#" class="list-group-item list-group-item-action">Ac consectetur ac port</a>
        <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
      </div>
    </div>
    ```

  • PARAGRAPHS
        <p>This is paragraph text! </p>

  • SEMANTIC FORMATTING
        <p> <strong> Warning: Acid can cause severe burns </strong> </p>

  • TABLES
           <table class="table">
              <head>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Handle</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>

  • TAGS & ELEMENTS
        <tag attribute='value'>content</tag>

  • TITLE
        <title>My Article</title>

Artikel berkaitan

Leave comment

Artikel

Send reply
388405 seen

- of 0

Reply to this discussion

You can't edit posts or create replies: You should be logged in before you can post.