HTML is one of the core web technologies, along with CSS and JavaScript

HTML is a markup language that we web developers can use to structure and describe the entire content of any webpage.

 

in HTML, we do describe content using elements. So we have different elements that we can use to describe different types of content like Paragraph, links, heading, images and videos

 

web browsers, such as Google Chrome, do essentially understand HTML code and can render it as a final website,

 

An HTML element is usually made up of three parts. An Opening Tag, Conent and Closing Tag

 

 

Basic HTML Elements

Doct Type

  • <!DOCTYPE html>
  • Tell the browser that this document uses html. all browsers will then know that they should use the HTML type specification to render this html.

Head Element

  • The primary use of the head element is for content that does not display in the user's browser window. The title of the page, some descriptive text, and any links to external CSS files or other resources will all be located in this head.

Html

  • <html lang="en">
  • Specify language for this HTML page. Specify languge code. 
  • Specify the character set that is used in the document.

Body

  • is actually for all the elements that will be visible on the page.

 

 

 

Text Elements

Headings - to break up big blocks of text into more logical sections, There are actually 6 different headings building hierarcy of heading.  

Every page should only have one H1 heading.

<h1>The Basic Language of the Web: HTML</h1>

<h2>The Basic Language of the Web: HTML</h2>

<h3>The Basic Language of the Web: HTML</h3>

<h4>The Basic Language of the Web: HTML</h4>

<h5>The Basic Language of the Web: HTML</h5>

<h6>The Basic Language of the Web: HTML</h6>

Paragraph- a generic element that we use to mark up bigger blocks of text.

<p>Posted by <strong>Deepak</strong> on Monday, may 5th 2025</p>

Comment- a way of writing some code that will not be visible in the browser.

    <!--   …  -->

bold and italic text.

  • we should always use the strong element instead of B. The reason for that is that B doesn't have any so-called semantic meaning,
  • Strong element means that this is really an important element that we want to stand out from the page.
  • In order to make this semantic HTML, we should no longer use the I element, but the EM element, which stands for emphasize.

<em>fundamental</em>

 

 

List Elements

An Ordered List, it should render it as a list of ordered numbers. So 1, 2, 3.

<ol>
   <li>The opening tag</li>
   <li>The closing tag</li>  
</ol>

An Unorder list, without numbers

<ul>
   <li>To be able to use the fundamental web dev language</li>
   <li>To build web applications</li> 
</ul>

 

 

Images and Attribute

<img src="img/user.jpg" alt="User Name" height="50" width="50" />

  • alt- 
    • it will allow search engines such as Google Chrome, to actually know what is in the image because without this description
    • by specifying the description of the image we can also allow blind people to use a website. So users who use a screen reader will not see the image but instead they will have the screen reader read the alternative text, so the description to them.

Meta Attribute


So meta data means data about the data.

  • The character set should be UTF8,
    • <meta charset="UTF-8" />
    • Simple characters that we use in the English language.

 

 

Hyperlinks

  • links that point to other pages within our own website
    • <a href="blog.html">Blog</a>
  • links that point to outside of our website.
    • <a href="www.google.com">Challenges</a>
  • in "HTML" we use the "A" element which stands for, "anchor". So technically a “hyperlink”

 

  • Attributes
    • target - it's useful to keep the page open and simply open the "URL" in a new tab. And we can do that by specifying the "target" attribute

 

  • Bookmark
    • Interlinked different part of current page

 


Related Question