It is important to know that web development consists of many languages, but it is advised to start the journey of learning web development with HTML, CSS, and JavaScript.

Understanding HTML

What is HTML?

The basic language used to create and organize material on the World Wide Web is called HTML, or Hypertext Markup Language. It acts as the foundation for web pages, giving programmers the ability to specify the organization and design of data. HTML employs a tag system, which is denoted by angle brackets, to identify different elements, including headings, paragraphs, links, images, and more.

Description of HTML

<!DOCTYPE>: It defines the document type or instructs the browser about the version of HTML.

<html>: The web document describes the text in between the HTML tags. All other HTML elements are contained within it, with the exception of <!DOCTYPE>.

<head>: It is supposed to be the initial element with document-related information inside the element. A closed one is required before the body tag opens.

<title>: It adds the HTML page title, which shows at the top of the browser window, as its name implies. It needs to be inserted into the head tag and shut right away.

<body>: The body of the page that the user may see is described in the text that appears between the body tags. Content of this HTML document is present in this tag.

<h1>: The webpage's first level heading is described in the text enclosed in a tag.

<p>: The webpage's paragraph is described in the text included in a

tag.

Code is as follows

<!DOCTYPE html> 
<html> 

<head> 
    <!-- Information about the web page -->
    <!--This is the comment tag-->
    <title>First code</title> 
</head> 

<body> 
    <!--Contents of the webpage-->
    <p>This is my first HTML Code.</p> 
</body> 

</html>

Features of HTML

Easy to understand.
It helps to make the page very interesting because we have lots of tags present, making our work simpler and easier.
It can be used on any platform, be it Windows, Linux, or MacOS.
We can embed sounds, videos, and graphics on webpages.
Because HTML is a case-insensitive language, we can use either upper- or lower-case tags.

What are tags in HTML?

There are multiple tags used in HTML and CSS.

Headings
Paragraph
Links
Images
Lists

Headings

In HTML, we are given multiple ways to write our headings. These could be:

Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6.

Headings can be defined in the following way:<h1>Heading goes here</h1>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<!-- ... up to h6 -->

Paragraphs

HTML allows us to enter numerous lines of text for output that can be seen and printed on a screen. We can style them anyway we want to with the use of a paragraph tag.

Paragraphs can be defined in the following way:<p>Text goes here</p>

<p>This is a paragraph</p>

Links

In HTML pages, even links can be embedded that direct us to the next page of a different link.

Links can be defined by the following way:<a href="link">example</a>

<a href="https://www.example.com">Visit Example.com</a>

Images

In HTML pages, photos can also be uploaded easily from the desktop, from Google, or from the site itself.

Images can be defined by the following way:<img src="" alt"">

<img src="image.jpg" alt="Description of the image">

<img>- Tells us that we want to insert an image.
src- Tells us the source of our image name.
alt- We can insert what will appear if the inserted image does not appear to viewers.

Lists

In HTML, we have two different types of lists.

Ordered List
Unordered List

Ordered List:

Creates ordered lists.

Represented by <ol></ol>

<ol>
    <li>First</li>
    <li>Second</li>
</ol>

Unordered List:

Creates unordered lists.

Represented by <ul></ul>

<ul>
    <li>First</li>
    <li>Second</li>
</ul>

Linking to stylesheets

We need to link CSS with our HTML to style our webpage.

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

Nesting of Elements

During the making process, we require the nesting of certain elements to be included during the website development.

<div>
  <h2>Heading</h2>
  <p>Paragraph inside a div.</p>
</div>

Here, the styling of the div will automatically apply to the heading and paragraph.

Conclusion:

In terms of HTML and CSS, we have a lot of things to learn and understand, and we are on our way to learning new things. With these things, you will be able to understand new things and start creating your own web page.

Starting with HTML

Table of contents