DEV Community

HTML ( HyperText Markup Language )

WHAT IS HTML ?
HTML stands for HyperText Markup Language. HTML is the standard markup language for creating Web pages. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.

HISTORY OF HTML
The first version of HTML was written by Tim-Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999. Another version, XHTML, was a rewrite of HTML as an XML language.

HTML has a lot of use cases, namely:
Web development. Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files.
Internet navigation. Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks.
Web documentation. HTML makes it possible to organize and format documents, similarly to Microsoft Word.
STRUCTURE OF HTML

<!DOCTYPE> <html> , <head> , <title> and <body> .
Enter fullscreen mode Exit fullscreen mode

COMMON TAGS IN HTML

<p>: Used for paragraphs of text.
<h1> to <h6>: Used for headings of different sizes.
<a>: Used for hyperlinks.
<img>: Used for displaying images.
<ul> and <ol>: Used for creating unordered and ordered lists.
<div>: Used for grouping and styling elements.
<input>: Used for creating input fields.
Enter fullscreen mode Exit fullscreen mode

The basic elements of an HTML page are:

A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
A paragraph, denoted using the <p> tag.
A horizontal ruler, denoted using the <hr> tag.
A link, denoted using the <a> (anchor) tag.
A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
An image, denoted using the <img> tag
A divider, denoted using the <div> tag
A text span, denoted using the <span> tag
The next few pages will give an overview of these basic HTML elements.
Each element can also have attributes - each element has a different set of attributes relevant to the element. There are a few global elements, the most common of them are:
id - Denotes the unique ID of an element in a page. Used for locating elements by using links, JavaScript, and more.
class - Denotes the CSS class of an element. Explained in the CSS Basics tutorial.
style - Denotes the CSS styles to apply to an element. Explained in the CSS Basics tutorial.
data-x attributes - A general prefix for attributes that store raw information for programmatic purposes. Explained in detailed in the Data Attributes section.
Text headers and paragraphs
There are six different types of text header you can choose from, h1 being the topmost heading with the largest text, and h6 being the most inner heading with the smallest text. In general, you should have only one h1 tag with a page, since it should be the primary description of the HTML page.
As we've seen in the last example, a paragraph is a block of text separated from the rest of the text around it.
Enter fullscreen mode Exit fullscreen mode
Let's see an example of the <h1>, <h2> and <p> tags in action:
Enter fullscreen mode Exit fullscreen mode
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>My First Page</h1>
        <p>This is my first page.</p>
        <h2>A secondary header.</h2>
        <p>Some more text.</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Horizontal rulers

A horizontal ruler <hr> tag acts as a simple separator between page sections.
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>My First Page</h1>
        <p>This is my first page.</p>
        <hr>
        <p>This is the footer - all rights are reserved to me.</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CONCLUSION
HTML remains the foundation of web development, providing the structure, semantics, and functionality necessary for creating modern websites. Its integration with CSS allows for attractive and responsive designs, while its support for multimedia and interactive content enhances user engagement. Moreover, HTML's emphasis on accessibility and SEO ensures that web pages are inclusive and easily discoverable. As web technologies continue to evolve, HTML continues to be a vital tool for developers, enabling them to build dynamic and accessible web experiences for users across the globe.

Top comments (0)