How To Speak HTML

Home /

Table of Contents

The only thing standing in your way of getting on the Web is learning the lingo: HyperText Markup Language, or HTML for short. Prepare for some language lessons. After this lesson, you will not only understand some basic HTML elements, but you will also be able to speak HTML with a little flair.

The Web’s entire foundation is hypertext. In the previous tutorial, we tested HyperText and discovered it to be a useful tool (the ‘HT’ in HTML) for organizing documents. Now we’ll look at the ‘ML‘ in HTML, or Markup Language, which will allow us to structure the documents.

In order to create and publish hypertext documents on the World Wide Web, one must learn the HyperText Markup Language (HTML), which is the standard markup language used for creating web pages. HTML consists of a set of elements and tags that provide the structure and content of a web page. By learning HTML, one can create and edit web pages, add text, images, links, and other multimedia elements, and control the layout and formatting of a web page. After learning the basics of HTML, one can start experimenting and adding their own unique style to their web pages. HTML is a simple language to learn, but it takes practice and experimentation to master.

This tutorial will not teach you everything there is to know about HTML. In this tutorial, we will only cover the most fundamental HTML concepts so that you can keep up with us.

There are many resources available for learning HTML, including books, online tutorials, and video courses. There are hundreds of books on HTML that cover a wide range of topics, from beginner-friendly introductions to advanced techniques for experienced developers. These books provide a comprehensive understanding of the language and its various elements, as well as practical examples and exercises for practice. Additionally, there are thousands of online tutorials and videos available, many of which are free and easily accessible, to help you learn and master HTML. We encourage you to check them out and find the resources that best fit your learning style and experience level.

Before we begin discussing HTML, let us first refresh our memories.

Sr8I6sP1ArHzKi5fyvCS2a35Wr4HVErjzMVZSxZCMLo WtjDLvVBqUvpjUikZJG72HkHJNF6ERQ25QB4gXgD8x4uy6ddUCv8MyJI2gfb9rc0ijg 0cdiG05jV2ifKoRrj3mOXYGjT4pFybYMxAqPG Y - How To Speak HTML

What Are Web Servers?

Web servers work around the clock on the Internet, waiting for requests from Web browsers. What kinds of requests? Requests for Web pages, images, sounds, and possibly a movie. When a server receives a request for one of these resources, it locates the resource and returns it to the browser.

How Does A Web Server Work?

You already know how a browser works: you’re surfing the Web and click on a link to go to a specific page. When you click that button, your browser requests an HTML page from a Web server, retrieves it, and displays it in your browser window.

But how does the browser know how to display a page? This is where HTML comes into play. HTML tells the browser everything about the page’s content and structure.

HTML (Hypertext Markup Language) is a markup language that is used to create the structure and content of a webpage. It uses tags, such as <p> for paragraphs and <img> for images, to define the different elements on a page. The browser reads the HTML code and uses it to display the page in a way that makes sense to the user. 

How do you write a HTML page?

So you’ve heard that HTML is essential for getting a browser to display your pages, but what exactly does HTML look like? What exactly does it do? Let’s look at some HTML… imagine you’re making a Web page to promote EnableGeek. In HTML, you’d write something like this:

<html>


    <head>
        <title>EnableGeek</title>
    </head>


    <body>
        <h1>EnableGeek - Start Learning With Us</h1>
        <img src="enablegeek.png" alt=”logo of enablegeek” />
        <p>
            Learn the Basic, Intermediate and Advanced level of <em>Java programming</em> in one place.
        </p>
        <h2>Directions</h2>
        <p>
            Receive email updates on new courses and more
        </p>
    </body>


</html>

What the browser creates…

K1DVlxI6IuILeqMhNbaI5JXZyiy9TwtNE5w6GfyEF7mBlGHGG8k0tXSgiQ1JC1M6A0z Z85zNu060ClLEZees48ThkXzDtBblR0LgCggnWYFgFYJsal d3W8qVyfAM97FsVU9MtQZhaIPRM3 1UnaWY - How To Speak HTML

The tags that surround your text are interpreted by the browser when it reads your HTML. Tags are simply words or characters enclosed in angle brackets, such as <head>, <p>, <h1>, and so on. The tags provide information to the browser about the structure and meaning of your text. Instead of just giving the browser a bunch of text, you can use HTML tags to tell the browser what text is in a heading, what text is a paragraph, what text needs to be emphasized, or even where images should be placed. Let’s see how the browser interprets the EnableGeek tags:

Meaning of the tags (how each tag in the HTML maps to what the browser displays):

Tag

<html>
.
.
.
.
.
.
.   
</html>

Browser Renders

4agf1VLMgDoCDkfiBf0Ug ELHSqejb1VM46R - How To Speak HTML

The <html> tag is the root element of an HTML document. It is used to define the structure and content of a web page. All other elements in the document must be contained within the <html> element. The opening <html> tag should be placed at the beginning of the document, and the closing </html> tag should be placed at the end of the document.

It tells the web browser that the document is an HTML document and the browser should use an HTML renderer to display the content.

This tag is required in all HTML documents and must only appear once. All other elements in the document should be contained within the <html> element.

Tag

<head>
    .
    .
    .
</head>

The <head> element is a container for all the head elements of an HTML document. It contains meta information about the document, such as the title of the document, which is displayed in the browser’s title bar or tab, and links to CSS and JavaScript files.

The <head> element should be placed immediately after the opening <html> tag, and before the <body> element. The closing </head> tag should be placed immediately before the opening <body> tag.

The <head> element can contain several sub-elements such as <title>, <meta>, <link>, <script> which provide additional information about the document.

Tag

<title>EnableGeek</title>

Browser Renders…

n7qIl53edreqyYEpAXqGTJ4xmRpk5ajfCqlU44uz7IhCPNgpyiVkAFU2BC0e4WudyBOpzwZ2jwfxFLMJ4yM4rbrLgP 5t2aD2i1URGa 9F cmx6WgYjTa70Sqsj3V08Md0NH Uk5YnRBkZz4DaFgysE - How To Speak HTML

The <title> element is required in the head and is used to set the title of the document, which appears in the browser’s title bar or tab.

Tag

<body>
    .
    .
    .
</body>

Browser Renders…

Xf2AdjuCE0D vafaCl EK6exGdjlYXMyrBd0ZOUR1j5bq4llVJ3UpnLhzmb0YIq iLEECoYIZL GJVmaKC EmnnZOeKwG2YpH - How To Speak HTML

The <body> element is a container for all the visible content of an HTML document. It contains the text, images, and other elements that are displayed in the browser window. The opening <body> tag should be placed immediately after the closing </head> tag, and the closing </body> tag should be placed immediately before the closing </html> tag.

The <body> element can contain a variety of different elements, such as headings, paragraphs, lists, images, and links, which are used to create the structure and content of the web page.

In summary, the <body> tag is used to define the main content of an HTML document, which is displayed in the browser window. It contains all the elements that make up the content of the web page.

Tag

<h1>EnableGeek - Start Learning With Us</h1>

Browser Renders…

ABjfNf qAwmS fgBUBtuAmr SYjSXIEVGO5BbSIOnvJy klUDHsqxl8geT7RCRAbiplb6iu1A9InfNwoI4yDe0S9ytgcJ 5lDI8Y02hHJv7o2JfhZoQT5k7esJE6yJYiYDVsgw4F1js IKWnw N6is - How To Speak HTML

The <h1> tag is used to define a heading in an HTML document. It is used to create a large, bold text that is used to indicate the main content or sections of a web page. The <h1> tag is used for the most important heading on a web page, and there are six levels of headings, from <h1> to <h6>, with <h1> being the most important and <h6> being the least important.

The text contained within the <h1> tag is usually displayed in a larger and bolder font than the surrounding text, and is used to indicate the main content or sections of a web page.

The <h1> tag is also used by search engines to understand the structure and content of a web page, so it is important to use headings appropriately and in a logical order to help search engines understand the content of your web page.

It is recommended to use only one <h1> tag per page, as it represents the main topic of the page.

In summary, the <h1> tag is used to define a heading in an HTML document, and is used to create a large, bold text that is used to indicate the main content or sections of a web page. It is the most important heading level and it is recommended to use it only once per page.

Tag

<img src="enablegeek.png" alt=”logo of enablegeek”/>

Browser Renders…

0OEUOqQBaFaW7gv1khhSvmHZUytnMX5FAN yWnmnU E7K4gdamuhSrxQuzJjhfA2BVr5x2zGa2UqTkr5YGLfacA3Ssr5mr8BIGa7kUiS8BwFqkQUDyDus6m j83aJdpsoVDuEVvLPvHd9t jR G3aaE - How To Speak HTML

The <img> tag is used to embed images in an HTML document. It is a self-closing tag, which means that it does not require a closing tag. The <img> tag is used to display images on a web page, such as photographs, diagrams, and icons.

The <img> tag requires a source attribute, which is used to specify the URL of the image file.

The “src” attribute is used to specify the URL of the image file, and the “alt” attribute is used to provide a text description of the image, which is displayed if the image cannot be loaded or if the user is using a screen reader.

It’s important to note that the <img> tag does not have any content, it’s only used to reference an image file.

In summary, the <img> tag is used to embed images in an HTML document. It requires a “src” attribute to specify the URL of the image file and an “alt” attribute to provide a text description of the image. It also supports some other attributes such as “width”, “height”, “style”, “class” and “id” to specify additional information about the image.

Tag

<p>
Learn the Basic, Intermediate and Advanced level of <em>Java programming</em> in one place.
</p>

Browser Renders:

L9oP oqkJPKAJokDZp9GlKxBxx1sNUCF3rCrR1P2sSGEi2A0Hdpie XpDX3jRPrJ29lX75v6UEgswom1nazT0khuTP1EKqnoZ4J83ohAA0O4ZTPftVzOrgm6EjM1jML1NnC xAbnGtyutJ52Rw5Aa 8 - How To Speak HTML

The <p> tag is used to define a paragraph in an HTML document. The <p> tag is a block-level element, which means that it creates a new block formatting context and takes up the full width of its parent container. The text contained within the <p> tags is usually displayed with a consistent margin above and below the text, which separates it from the surrounding content.

The text within the <p> tags will be treated as a single paragraph and will have a consistent margin above and below it, which separates it from the surrounding content.

Tag:

<em>Java programming</em>

Browser Renders:

PNwtCbbBC 2VImj3N0Uvq8YCiAOaKJUfkgGov731hrFrtYiDRt15mm4dOXbHQldcZImn8IR6uwCVp1oFXBet9uS0bQT syKsB - How To Speak HTML

The <em> tag (short for “emphasis”) is used to indicate text that should be emphasized, typically displayed in italic. This tag is used to indicate text that is important or has special meaning.

Tag: 

<h2>Directions</h2>

Browser Renders:

VzPvlv6JFMelJLMjgfAybpIaNuOby7gHcvVIZP8mQiZxI4Hk7WuQuJp7z3rDrmnNlDR3Dy3 0 NyfJA CeBJLjD P0NCrgGhLJzMSfjm2Czodvb062kL0VtMQTftw6NflUsmslVeAkhXc8qf Kio8Nc - How To Speak HTML

The <h2> tag is used to define a heading in an HTML document. It is used to create a text that is used to indicate sub-sections or subtopics of a web page. The <h2> tag is used for a secondary heading on a web page, and there are six levels of headings, from <h1> to <h6>, with <h1> being the most important and <h6> being the least important.

The text contained within the <h2> tag is usually displayed in a larger and bolder font than the surrounding text, but smaller than <h1>, and is used to indicate the sub-sections or sub-topics of a web page.

Tag

        <p>
            Learn the Basic, Intermediate and Advanced level of <em>Java programming</em> in one place.
        </p>

Browser Renders…

NJ2jsyM bhidCfSHnHU4kVpsVp6LgwbeKcNdxQjAhVVBUDLwRptKC9O8o3tmXrYuL5Zke6PvxmUo9QbFKQ35aDvb89uy1iv0rqAQ9yFhcutQiU PUGZowtGCL1HMhJc07PRvpDT EIwvLOlufCbro0 - How To Speak HTML

The <p> tag has already been described.

That’s all there is to HTML for now. HTTP will be covered in the following tutorial. In a later tutorial, we will discuss how to get this web page onto the Web Server so that anyone with a web browser can access it.

Before we move on to the next tutorial we want to discuss a tag called <a>.

The <a> tag, also known as the “anchor” tag, is used to create hyperlinks in an HTML document. Hyperlinks allow users to navigate to other web pages or different parts of the same web page, by clicking on text or images.

The <a> tag requires a “href” attribute, which is used to specify the URL of the page or resource that the link should navigate to. For example:

<a href=”https://www.enablegeek.com/”>This is a link</a>

When the text “This is a link” is clicked, the user will be taken to the website “https://www.enablegeek.com/”.

People often confuse a element with a tag. An element is the opening tag, plus the content, plus the closing tag.

ELEMENT = <OPENING-TAG> CONTENT </CLOSING TAG>

Content can be another element or text or whatever.

Share The Tutorial With Your Friends
Twiter
Facebook
LinkedIn
Email
WhatsApp
Skype
Reddit
Other Recommended Article