What is HTML? comprehensive guide to HTML.

9 min readApr 4, 2024

HyperText Markup Language, or HTML, is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.

HTML is a combination of hypertext and markup language. Hypertext is used to display the relationship or link between webpages.A markup language is used to define the text document within the tag to define the structure of web pages.

But how does a web browser understand HTML?

The branch of computer science that deals with parsing is known as compiler theory. Basically, the web browser has a set of rules programmed into it for parsing HTML. When it receives an HTML document, it parses it, converts it to a web page, and then returns the web page

lets dive in a bit

the above image is about how the system behind a web browser works but it is not that important

Parsing: When a web browser receives an HTML file, it goes through a process called parsing. During parsing, the browser’s parsing engine reads the HTML code from top to bottom, interpreting each element and its attributes.

2. Document Object Model (DOM): As the browser parses the HTML, it creates a structured representation of the document called the Document Object Model (DOM). The DOM represents the document as a tree structure, where each element in the HTML corresponds to a node in the tree.

3. Rendering: After parsing and constructing the DOM, the browser proceeds to render the web page. Rendering involves laying out the elements on the screen according to their styles and properties, such as size, position, color, and font.

lets learn html

The jargon we need to know are tags and attributes.and HTML is Not case-sensitive.

What are tags ?

HTML elements are the building blocks of HTML pages.HTML elements are delineated by tags, written using angle brackets. Tags such as <img> and <input> directly introduce content into the page. Other tags, such as <p> and,</p> surround and provide information about document text and may include sub-element tags. Browsers do not display the HTML tags but use them to interpret the content of the page

every tag is a pair of two; one determines the starting tag and one determines the ending tag .An HTML element is defined by a start tag, some content, and an end tag.

<tagname> Content goes here... </tagname>

<h1>My First Heading</h1> ← — — — this is a tag

<p>My first paragraph.</p>

The HTML element is everything from the start tag to the end tag

what are attributes?

HTML attributes provide additional information about HTML elements.

such as src to specify the location or path to an image

the HTML structure

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

To observe this in action, launch Notepad or any text editor. Copy the HTML code into the editor, paste it there, and save the file with a “.html” extension. Then, open this saved file using Chrome or any other web browser of your choice.

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

<a href="https://www.w3schools.com">This is a link</a>

HTML Images

HTML images are defined using the <img> tag.

The source file (src) is an attribute used to specify the path or location of the image; alternative text (alt), widthand height are provided as attributes

<img src="medium.jpg" alt="medium.com" width="104" height="142">
<img src="img_girl.jpg" width="500" height="600">

HTML Image Tags

Tag Description

<img>Defines an image

<map>Defines an image map

<area>Defines a clickable area inside an image map

<picture>Defines a container for multiple image resources

How To Add a Favicon in HTML

Favicon are added in the head tag since we put all the meta data in it. It supports many image formats, such as PNG, GIF, JPEG and SVG

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
 <!--favicon declaration-->
  <link rel="icon" type="image/x-icon" href="/path/to/image.ico">
</head>
<body>

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

</body>
</html>

this can produce the following output:

Adding a page title

page title is also added to the head portion of the page

<title>My Page Title</title>

HTML Lists

HTML lists allow web developers to group a set of related items into lists.

list can be of two types: ordered and unordered

ordered is a way you can serialize the items in the list.

The tag <li ></li> stands for list item; whatever you pass in between these tags is considered an item in the list.

<h2>An ordered HTML list</h2>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

this can produce the following output

changing the : <ol><ol> to <ul></ul>and can make your output an unordered list

HTML Block and Inline Elements

every html element has the nature of displaying either a block or inline

A block-level element begins on a new line and is automatically given margin space by browsers both before and after the element.

It occupies the entire available width, extending from left to right as much as possible. Two frequently used block elements are: <p> for defining paragraphs and: <div> for defining divisions or sections within an HTML document.

An inline-level element does not begin on a new line. It occupies only as much width as necessary for the content within the element. frequently used inline elements are <span>tag

the `<div>` element

The <div > element is commonly utilized as a container for various HTML elements. While it does not have mandatory attributes, optional arguments such as style, class, and id are frequently used. It functions as a divider or container for elements within a web page.

<div>
<h2>Taj mahal</h2>
<p>is the most beautiful place on earth. most people visit this place regularly
</p>
</div>

the <span >element

The <span> element in HTML is an inline-level element used to apply styling or markup to a specific section of text or inline content within a larger block of content. Unlike block-level elements like <div>, which create a new block-level container, <span> does not create a new line or block; instead, it wraps around the content it applies to.

a common example would be supposed if you want to style a specific word in a paragraph you enclose that word between span tags and style the span tags

<p>This is a <span style="color: red; font-weight: bold;">highlighted</span> text.</p>

classes and id’s in HTML

classes and IDs are attributes used to apply styles or identify specific elements for scripting purposes

classes:

Classes are used to group HTML elements together and apply the same styles to multiple elements.
Multiple elements can have the same class, allowing you to define a set of styles that can be applied to different parts of your webpage.an element can have multiple classes
Classes are defined using the class attribute in HTML elements. For example:

<p class="highlighted">This paragraph has a highlighted style.</p>
<div class="container">Content inside this div is styled as a container.</div>

now suppose you want to style these elements using css or you need to access them from a program you can easily target them using the classes

2. IDs:

IDs are used to uniquely identify a specific HTML element on a webpage.
Unlike classes, each element should have a unique ID within the HTML document.
IDs are defined using the id attribute in HTML elements. For example:

<div id="header">This is the header section.</div>
<p id="intro">This is the introduction paragraph.</p>

IDs are often used for scripting purposes to target specific elements for manipulation or interaction.
In CSS, you can target elements with a specific ID using a hash (#) followed by the ID name.

what are iframes?

An <iframe> (short for inline frame) in HTML is used to embed another HTML document within the current document. This allows you to display content from another source, such as a different webpage or a video, directly within your webpage. Here are the key points about iframes:

Embedding Content: The <iframe> element is used to embed external content within a webpage. It creates a rectangular area in the document where the content of another HTML document can be displayed.
syntax:<iframe src="url_to_external_documen"></iframe>

Attributes:

src: Specifies the URL of the content to be displayed within the iframe.
width and height: Define the width and height of the iframe.
name: Assigns a name to the iframe, which can be used as the target for links or form submissions.
frameborder: Specifies whether or not to display a border around the iframe (deprecated in HTML5, use CSS for styling borders).
sandbox: Defines a sandbox environment for the iframe's content, restricting certain capabilities like form submission or script execution.

script tags in HTML

The <script> tag in HTML is used to define and embed client-side scripts within an HTML document. Client-side scripts are programs that run on the user's web browser, as opposed to server-side scripts that run on the web server. Here are the key aspects of the <script> tag:

<script>
    // JavaScript code goes here
</script>

<script src="script.js"></script>

<script>
    alert('Hello, World!');
</script>

The HTML <head> Element

The HTML <title> Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

The HTML <link> Element

The <link> element defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets:

<link rel="stylesheets"href="mystyle.css">

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

this part one stay tuned for part two of blog on more indepth of html

thank you

What is HTML? comprehensive guide to HTML.

But how does a web browser understand HTML?

lets dive in a bit

lets learn html

What are tags ?

what are attributes?

the HTML structure

HTML Documents

HTML Headings

HTML Paragraphs

HTML Links

HTML Images

HTML Image Tags

How To Add a Favicon in HTML

Adding a page title

HTML Lists

HTML Block and Inline Elements

the `<div>` element

the <span >element

classes and id’s in HTML

what are iframes?

script tags in HTML

The HTML <head> Element

The HTML <title> Element

The HTML <link> Element

Setting The Viewport

Written by codetolive

No responses yet

What is HTML? comprehensive guide to HTML.

But how does a web browser understand HTML?

lets dive in a bit

lets learn html

What are tags ?

what are attributes?

the HTML structure

HTML Documents

HTML Headings

HTML Paragraphs

HTML Links

HTML Images

HTML Image Tags

How To Add a Favicon in HTML

Adding a page title

HTML Lists

HTML Block and Inline Elements

the <div> element

the <span >element

classes and id’s in HTML

what are iframes?

script tags in HTML

The HTML <head> Element

The HTML <title> Element

The HTML <link> Element

Setting The Viewport

Written by codetolive

No responses yet

the `<div>` element