ParthaSarathi's Blog

Welcome to HTML

Photo by Jackson Sophat on Unsplash

Welcome to HTML

Parthasarathi M's photo
Parthasarathi M
·

5 min read

HTML(Hyper Text 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(CSS) or functionality(JavaScript).HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. This article will give a basic understanding of HTML and its functions.

An element is a part of a webpage. In HTML, an element may contain a data item or a text or an image, or perhaps nothing. A element includes an opening tag with some attributes, enclosed text content, and a closing tag.

Attributes contain extra information about the element that will not appear in the actual content. For example let explore a element below

<p> This is a paragraph.</p>
<p class="nice" > This is a paragraph.</p>

In the first example we have used <p> element, which represent a paragraph. Here, we can see <p> is the opening tag followed by text content followed by </p>,closing tag. In the second line, we can see that in the opening tag we have used a class, which is an attribute. Attributes provide the extra information about the content but not appear in the actual content. Here, class is the attribute name, and "nice" is the value of the attribute. The class attribute allow to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things.

HTML elements can be nested (this means that elements can contain other elements). For example:

<p> Lorem ipsum <br> dolor sit amet, consectetur adipisicing elit. Eaque eum, neque quis incidunt voluptates libero dolor quas laboriosam officiis delectus!</p>

Here in the above example we can see that <br> element is used inside <p> element. The <br> element will provide a line after "Lorem ipsum".

Note: we can use Emmet Abbreviation such as "Lorem" . For more details about Emmet follow the documentation of Emmet (https://docs.emmet.io/abbreviations/)

Let's see the basic structure of HTML

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <h1></h1>
    <p></p>

</body>
</html>

Here, we have the following:

  • <!DOCTYPE html>: It is pointing the version of HTML.

  • <html> </html>: The <html> element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.

  • <head> </head>: The <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.

  • <meta charset="utf-8">: This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.

  • <meta name="viewport" content="width=device-width">: This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.

  • <title></title>: The <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.

  • <body></body>: The <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Note: The content of the < head > will not visible in browser ie for end user. The only visible part is <title>, and we can add icon, which is also visible to end user.

Note: In the body section ie within the <body> we can use different kind of elements. For example the <img> for inserting images (we can provide different attribute inside the opening tag of the element, for more control).For example the <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. And so on.

Image

HTML supports various multimedia resources such as images, audio, and video. The <img> HTML element embeds an image into the document. 

<img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=726&q=80" alt="MacBook">

the above example shows usage of the <img> element.

  • The src attribute is required, and contains the path of the image that to be inserted/embeded.

  • The alt attribute holds a text description of the image. It is not mandatory but is very useful for accessibility — this provides an meaningful information about the image to the screen readers. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.

There are many other attributes to achieve various purposes:

<img src="" alt="" sizes="" srcset="">
  • Use both width and height to set the size of the image, before it actually loads.
  • Use sizes and srcset for responsive hints.
HTML5