DEV Community

Raja B
Raja B

Posted on

Basic of HTML

#basic #html #raja

What is HTML?

HTML is one of the most widely used markup languages in web design worldwide. Its strengths lie in its uniform, clearly struc­tured syntax, a free open-source approach, and a rapid learning curve. If you want to get a quick start in web design without a lot of effort, HTML is a great way to design a modern, appealing website with in­ter­ac­tive elements.

What does HTML stand for?

HTML stands for “Hypertext Markup Language” and, along with Java and CSS, is one of the most widely used text-based markup languages in the world. Tim Berners-Lee, the inventor of the World Wide Web, laid the foun­da­tion of HTML in 1992 with the first HTML spec­i­fi­ca­tion. The World Wide Web Con­sor­tium (W3C) declared HTML 4.0 to be the official standard in December 1999. Since then, about 63% of all websites are based on HTML code. Currently (as of 2023), the versions XHTML and HTML5 are the most widely used for creating SEO-optimized websites.

Is HTML a pro­gram­ming language?

HTML isn’t a pro­gram­ming language. Unlike pro­gram­ming and scripting languages like PHP or JavaScript, HTML cannot be used to create al­go­rithms, tasks, con­di­tions, or loops due to its lack of command structure. That’s why HTML belongs to the markup languages. While HTML describes and struc­tures a web page with text-based, static syntax, pro­gram­ming languages create dynamic content, complex logical tasks, commands, and al­go­rithms.

HTML: HyperText Markup Language

HTML (HyperText Markup Language)

is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext"

refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses

"markup"

to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>, <ul>, <ol>, <li>and many others.

Basic structure of an HTML document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Example Explained:

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document

  • The element is the root element of an HTML page

  • The <head> element contains meta information about the HTML page

  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

  • The<h1>element defines a large heading

  • The<p>element defines a paragraph

The syntax<!-- This is a comment -->

is used in HTML to add notes, explanations, or to disable code that you do not want the browser to display

Short Key for Comments:

To quickly comment out a line or a selected block of code, use these shortcuts in VS Code, Sublime Text, and many other IDEs:

  • Windows / Linux :

    Ctrl + /

  • macOS :

    Cmd + /

Key Points

What it does :

Allows you to leave notes to yourself or others without the text appearing on the web page.

Debugging :

Useful for hiding code temporarily to find errors.

Alternative :

For CSS/JS, use /* comment */. For Python, use # comment.

Multi-line :

On some platforms, Shift + Alt + A (Windows)
or Shift + Option + A (Mac) can be used for block comments.

Reference :

Top comments (0)