HTML Essentials for Successful Blogging in just 10 minutes: A Beginner's Guide

on
In today's digital age, blogging has become an incredibly popular platform for expressing ideas, sharing knowledge, and building online communities. As a blogger, having a basic understanding of HTML (Hypertext Markup Language) can greatly enhance your blogging experience and take your content to the next level. HTML serves as the foundation of web development, enabling you to structure and format your blog posts effectively. In this article, we will explore the essential aspects of HTML that every blogger should know. From creating headings and paragraphs to adding links, images, and formatting techniques, we will provide you with practical insights and tips to leverage HTML for a visually appealing and engaging blog. Get ready to enhance your blogging journey by unlocking the power of HTML.  

Introduction to HTML:  

HTML stands for Hyper Text Markup Language. Html is the main language that is needed to develop any website or even a single web page. Html is used to define structure of the webpage and to define the position of each component present in the webpage. 

Versions: HTML5 is the latest version of Html that we will learn in this article.

Simple HTML Page:

Html language contains elements enclosed within brackets called as html tags. For example : <html>, <title>,  <body>, <head>, <p>. Each element in Html has a opening tag and a closing tag, however, there are some exceptions too. We will see each tag one by one.

Below is the simple html code.

Simple HTML Code

  • <!DOCTYPE html>: This tag defines the document type and version of this file i.e HTML5 document.
  • <html>:      This is the main tag of html. All the html code is contained within this tag.
  • <head>:      This tag defines document header. It includes <title>, <link>, <meta> tags.
  • <title>:       This tag defines the title of the document.
  • <body>:     This tag contains main body of the web page.

This code will create a blank webpage having a title as ‘Document’.

Note: The Html file must be saved with .html extension.


Headings :

To add a heading to your web page <h1>, <h2>,<h3>, <h3>, <h4>, <h5> and <h6> tags are used. These tags display headings with different sizes. The <h1> tag displays main heading while the <h6> tag defines the less important heading.

Code:

Headings

Output:

Headings


Paragraphs and Comments :

Paragraphs in html are defined with <p> tags. A browser automatically leaves some space between a paragraph and other contents.

Comments are explanatory text placed in a code to help other users to understand the code. Comments are defined within <!--  -->. Text in the comment will not be shown on the webpage.

Code:

          Paragraphs and Comments

Output:

            Paragraphs and Comments

As you can see in the above output, whatever text we have added in the comments is not visible in the webpage and that text is called a comment.



Horizontal Line, Line Break, Italic, Bold, Underline

  • <br>:  By using this tag we can break a line and go the new line. This tag has no closing tag.
  • <hr>:  By using this tag we can add a horizontal line in the page. This tag has no closing tag.
  • <i>:     To change the font style of any text into italic we use this tag.
  • <b>:    To make the text bold we use this tag.
  • <u>:    This tag is used add underline to the text.

Code:

Horizontal Line, Line Break, Italic, Bold, Underline

Output:

Horizontal Line, Line Break, Italic, Bold, Underline



Links:

Links are basically the hyperlinks which are used to redirect user to another page or website. We use anchor tag <a> to make any text a link. 

Code:

Links

In the above code, in the place of “#” we can place url of any website or webpage to where we want our user to redirect after clicking on the link.

Output:

Links



Lists: 

Lists allows us to create a set of items. There are two types of lists : ordered and unordered lists.

  • <ol>:  It is used to create ordered lists.
  • <ul>:  It is used to create ordered lists.
  • <li>:   It is used to define list items.

Code:

Lists

Output:

Lists




Table:

Html also allows us to display data in tabular form. 

Table

  • <tr>: It is used to define table rows.
  • <th>: It is used to define table headers.
  • <td>: It is used to define each cell in the table i.e. table data.

Output:

Table



Images, Audios and videos:

We can also add media items in our webpage like images, videos, audios.

  • <img>:      This tag is used to add image in the webpage.
  •  src:           src attribute is used to define source path.
  • <video>:    This tag is used to add video in the webpage.
  • Controls:   This attribute is used to add controls to videos and audios like play, speed, autoplay.
  • <audio>:    This tag is used to add audio in the webpage.

Code:

Images, Audios and videos

Output:

Images, Audios and videos

So, here I have included all the basic tags of Html that you need to make their first blog.


Comments

Post a Comment

If there are specific topics you'd like articles on, please don't hesitate to inform me. I'll gladly publish content tailored to your preferences.