Although, HTML is a very popular web technology and topic, it is still widely misunderstood by a whole lot of developers who are not patient enough to grab the fundamentals or intending developers. Hence, in this article we will look at the meaning of HTML and some concepts surrounding it.
What is HTML?
According to Wikipedia, "The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript." Examples of websites includes: google.com, zuriboard.com, etc
What is the function of HTML?
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. - Wikipedia
What is Semantic HTML?
Semantic HTML or semantic markup is HTML that introduces special meaning to the web page rather than just presentation. For example, a
tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are, and browsers know how to display them. Semantic HTML ensures that contents in the web browsers are interpreted by the users the same way the browsers interprets it.
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. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.
Examples of Semantic HTML tags
Some examples of semantic HTML includes the following tags:
<abbr>- This stands and is used for abbreviation.<acronym>-This stands and is used for acronym<p>- This stands and is used for paragraph<sup>- This stands and is used for superscript
Container and Empty tags
Unofficially, the HTML tags are divided into two types:
- Container tags that have separate opening and closing tags
- Empty tags that are immediately closed after their definition
Examples of Container Tags
| Tag | Description |
1. <address> | Used to specify address for author(s) of the document |
2. <dfn> | Used to indicate the term being defined within the context of a definition phrase or sentence. |
3. <blockquote> | Used for long quotation |
4. <code> | Used for code reference |
5. <cite> | Used for citation |
6. <del> | Used to specify a deleted text |
7. <ins> | Used to specify an Inserted text |
8. <em> | Used to lay emphasis on contents |
9. <strong> | Used to lay strong emphasis on contents |
10. <h1> | First-level headline |
11. <h2> | Second-level headline |
12. <h3> | Third-level headline |
13. <h4> | Fourth-level headline |
14. <h5> | Fifth-level headline |
15. <h6> | Sixth-level headline |
16. <q> | Used to specify a short inline quotation |
17. <samp> | Used to specify a Sample output |
18. <ol> | Used to list specify an ordered list |
19. <ul> | Used to list specify an unordered list |
20. <section> | Used to divide the content meaningfully |
Examples of Empty Tags
An empty element is an element from HTML, SVG, or MathML that cannot have any child nodes (i.e., nested elements or text nodes).
| Tag | Description |
1. <area> | Used to define an area inside an image map that has predefined clickable areas. |
2. <base> | Used to specify the base URL to use for all relative URLs in a document. There can be only one element in a document. |
3. <br> | The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant |
4. <col> | The <col> HTML element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element. |
5. <embed> | The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in. |
6. <hr> | The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. |
7. <img> | The <img> HTML element embeds an image into the document. |
8. <input> | The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes. |
9. <link> | The <link> HTML element specifies relationships between the current document and an external resource. |
10. <meta> | The HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title> |
11. <source> | The <source> HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. |
12. <track> | The <track> HTML element is used as a child of the media elements, <audio> and <video>. |
13. <wbr> | The <wbr> HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location. |
14. <param> | The <param> HTML element defines parameters for an <object> element |
15. <keygen> | The HTML element exists to facilitate generation of key material, and submission of the public key as part of an HTML form. |
16. <basefont> | <basefont> is deprecated, it was used sets the default font family, font size, and color of all the text context in an HTML document. |
17. <frame> | <frame> is deprecated. It was used to embed web pages and has been replaced by the <iFrame> tag |
18. <portal> | <portal> is deprecated. The <portal> HTML element enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages. |
19. <slot> | The <slot> HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. |
20. <bgsound> | The <bgsound> HTML element is deprecated. It sets up a sound file to play in the background while the page is used; use <audio> instead. |
Conclusion
HTML is a very impressive technology and it is quite natural to learn more about it.
#thw-web-apps