Build An Old Style Blog site using HTML

Naman KumarNaman Kumar
4 min read

Most people know what HTML is, but some people don't. In beginning, We talk about,

What Is HTML?

HTML Stands for "Hypertext Markup Language"

HTML stands for Hypertext Markup Language. It is a standard markup language used to create and structure web pages. HTML consists of a series of elements and tags that are used to define the structure and content of a webpage. These elements and tags are then interpreted by web browsers, which display the webpage to users. HTML is used in conjunction with other languages such as JavaScript and CSS to create dynamic and interactive web pages.

If I Say in Simple Word " If a website is a body then HTML is skeleton.HTML elements tell the browser how to display the content. So, using HTML, define headers, paragraphs, links, images, and more, so your browser knows how to structure the web page."

Heading Tag

In HTML, heading tags (<h1>-<h6>) are used to create headings and subheadings on a webpage. t is a block-level element. The <h1> the tag represents the most important heading on the page, while <h2>-<h6> tags represent subheadings of decreasing importance

Heading tags are important for both accessibility and SEO. Screen readers, used by visually impaired users, can use the headings to help users navigate the page. Search engines also use headings to understand the structure of the page and its content.

For example, the following code:

<h1> This is Main Heading</h1>
<h2> This is subheading</h2>
<h3> This is sub-subheading</h3>
<h4> This is sub-sub-subheading</h4>
<h5> This is sub-sub-sub-subheading</h5>
<h6> This is sub-sub-sub-sub-subheading</h6>

Will be displayed like this:

This is Main Heading

This is subheading

This is sub-subheading

This is sub-sub-subheading

This is sub-sub-sub-subheading

This is sub-sub-sub-sub-subheading

It's important to use headings in a logical order and avoid skipping heading levels, as it can make the webpage harder to understand.

These times we use only h1 to h3 tags while making websites. we use CSS to increase and decrease the font size.

Paragraphs

In HTML, the <p> tag is used to create a paragraph. It is a block-level element, which means that it creates a separate block for the content it contains. The content within the <p> tags will be displayed as a separate paragraph on the webpage, with a default margin above and below the text. For example, this HTML code creates a paragraph with the text "This is a paragraph":

For example, the following code:

<p> This is a paragraph </p>

Will be displayed like this:

This is a paragraph

pre-formatted text (<pre> )

The <pre> tag in HTML stands for "pre-formatted text". It is used to display text in a fixed-width font and preserves whitespace, including spaces and line breaks. This means that any extra spaces or line breaks in the code will be displayed as they are in the final output.

For example, the following code:

<pre>
    This is a pre-formatted text.
    It preserves spaces and line breaks.
</pre>

Will be displayed like this:

This is a pre-formatted text.

It preserves spaces and line breaks.

Text Formatting

There are several text formatting tags in HTML that can be used to change the appearance of text on a webpage. Some of the most commonly used tags include:

  • <b>: creates bold text

      <p>This is a <b>bold</b> word </p>
    

    output:- This is a bold word

  • <i>: creates italic text

      <p>This is an <i>italic</i> word </p>
    

    output:- This is an italic word

  • <u>: creates underlined text

      <p>This is an <u>italic</u> word </p>
    

    output:- This is an underline word

  • <strike> : creates strike-through text

  • <sup> : creates superscript text

  • <sub> : creates subscript text

  • <mark> : creates highlighted text

  • <small> : creates the small text

  • <strong> : creates important text

  • <em> : creates emphasized text

  • <abbr> : creates an abbreviation

  • <q> : creates a short quotation

  • <blockquote> : creates a block quotation

It's important to note that these tags are mainly used for presentational purposes, for semantic tags HTML5 has introduced new tags like <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time> etc.

we talk about those tags in upcoming blogs.

Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. by using Lorem, we get the auto-generated text for your website. if write "lorem25" then with help of the Emment you got 25 words generated Sentence.

By uses of these tags, we make simple web pages.

0
Subscribe to my newsletter

Read articles from Naman Kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Naman Kumar
Naman Kumar

student, Coder, Programmer