sriparthu
Basics of HTML

Basics of HTML

sri parthu's photo
sri parthu
·

3 min read

Table of contents

What is HTML?

  • HTML stands for Hyper Text Markup Language, used to create and describe the structure of a webpage. It consists of a series of elements that tell the browser how to display the content, such as <h1>, <p>, <img>, etc.

What is an HTML heading?

  • The HTML heading tag is used to create a heading on the webpage. This tag is typically placed in the <body> tag. HTML offers 6 heading types, <h1> to <h6>, and it displays the heading in different font sizes.
<h1>This is heading(h1)</h1>
<h2>This is heading(h2)</h2>
<h3>This is heading(h3)</h3>
<h4>This is heading(h4)</h4>
<h5>This is heading(h5)</h5>
<h6>This is heading(h6)</h6>

What are the HTML paragraph and break elements?

  • The paragraph tag is a block-level element denoted with <p> and is used to write a statement on the webpage. It has opening and closing tags <p>…</p>.

  • The break tag is an inline element denoted with <br> and is used to break the line in the text, causing the content that follows to appear on a new line. It has no closing tag.

<h2>Paragraph</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione qui
      distinctio sapiente. Saepe eaque quam, pariatur eveniet dolore, laborum
      dolorum sunt voluptas repudiandae quia quaerat! Iste quo sed ut reiciendis
      optio laudantium odit dolor beatae aperiam officiis, consectetur amet
      voluptates nesciunt blanditiis aliquid quidem praesentium consequuntur?
      Eveniet beatae nostrum facilis?
    </p>
    <h2>Break</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br />Ratione
      qui distinctio sapiente. Saepe eaque quam, pariatur eveniet dolore,<br />
      laborum dolorum sunt voluptas repudiandae quia quaerat! <br />Iste quo sed
      ut reiciendis optio laudantium odit dolor beatae aperiam officii0s,
      consectetur amet voluptates nesciunt <br />blanditiis aliquid quidem
      praesentium consequuntur? <br />Eveniet beatae nostrum facilis?
    </p>

What are the HTML horizontal line and image tags?

  • The horizontal line is a block-level element denoted with the <hr> tag, used to divide the page into sections that span from left to right on the page, and it doesn’t have any closing tag.

  • The image tag is an inline element denoted with <img>, used to insert an image in the webpage. It has some attributes like src for the source or path of the image and alt for alternative text for the image.

<h2>Paragraph</h2>
      <p>This is paragraph</p>
      <p>This is paragraph</p>
      <p>This is paragraph</p>
      <p>This is paragraph</p>
    <hr />
      <p>This is another paragraph</p>
      <p>This is another paragraph</p>
      <p>This is another paragraph</p>
      <p>This is another paragraph</p>
    <h2>Image</h2>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvQGjUrOasR5mMim25PuznWsFotbTBZGY0tw&s"alt="smile"/>

What is HTML Layout?

  • HTML layout is the backbone of the webpage achieved through some elements like <header>, <nav>, <section>, <article>, <aside>, <footer>.

    • <header>: Defines the header section of the webpage

    • <nav>: Defines the navigation bar of the webpage, like a menu list on the webpage.

    • <section>: Defines a section in the document.

    • <article>: Defines independent self-contained content.

    • <aside>: It holds additional information or advertisements and is not always necessary to add to the page.

    • <footer>: Defines the footer for the document or a section.

What are HTML Comments?

  • HTML comments are text in an HTML document that is not displayed in the browser. They leave a note and provide an explanation or direction for the code. We denote them with an exclamation mark (!) and double dash symbols (--), but at the end, we use only double dashes (--). All of this is enclosed in angle brackets (<>) like this: <!--...-->.
<!-- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex, error incidunt inventore ut dicta aliquid obcaecati illo nisi aperiam aliquam!</p> -->

Note: All HTML elements in angular braces (<>) should be in lowercase.

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥

HTML5CSS3JavaScriptReactBootstrapJavaSpringNode.jsMySQLFrontend Developmentbackend