Pratyush's blog

Getting Started with HTML

Getting Started with HTML

pratyush's photo
pratyush
·

2 min read

Table of contents

No heading

No headings in the article.

As we all know, to make any website or webpages we use HTML as a standard language. HTML stands for Hypertext Markup Language. With a basic knowledge of HTML we can structure the whole website, and with the addition of CSS to it we can add styling to it. To make website interactive we add JavaScript. But without HTML, we won’t be able to add CSS or JavaScript.

Here’s the HTML code:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hello World</title>
    <!-- Name of website or content to display -->
</head>
<body>
    <!-- Main content of website -->
    <h1>Website Name</h1>
<p>A computer science portal for geeks</p>
</body>
</html>

Description of each tag used in the code above :-

  • !DOCTYPE html : This tag is used to tells the HTML version. This currently tells that the version is HTML 5.0.

  • html lang="en" : This syntax tells about the language of the HTML content.

  • Head of the HTML contains the details of the website such as title , any linked file(CSS) and meta tags.

  • Meta tags are used to add responsiveness .

  • Title is given to know the website name and the related content.

  • Body is the main content of the HTML page.This contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.

<body>
<h1>Heading </h1>
<p>Paragraph</p>
</body>
  • Different tags used in body elements are as follows:-
<body>
<h1></h1> ,<h2></h2> ,<h3></h3>, <h4></h4>,<h5></h5>,<h6></h6> 
<p></p>
<div></div>
<ul></ul>,<ol></ol>
</body>
  • Other Important tags which are used widely are :
<a href="url">link text</a>
<img src="" alt="">
<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

We can make static web pages using all these elements as required. In order to add style to the webpage we link CSS with it.

CSS can be linked in following ways:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

With the help of CSS and its properties we can make the whole website look more attractive.

Conclusion

The above elements and tags are the first step towards developing any website. By practicing these and doing hand on with the following syntax one can get started with the HTML learnings.

HTML5Web Development