DEV Community

Nanthini Ammu
Nanthini Ammu

Posted on

HTML Part 1

#webdev #beginners #tutorial #html

What is HTML ?

  • HTML stands for Hyper Text Markup Language.
  • HTML is the standard markup language for creating Web pages.
  • HTML describes the structure of a Web page.
  • HTML consists of a series of elements.
  • HTML elements tell the browser how to display the content.

Example : 

html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

What is Tag :

  • Keyword inside a angle brackets.

Example : 

<p>
</p>
<h1>
Enter fullscreen mode Exit fullscreen mode

Types of tags:

  • Opening tag <p>.
  • Closing tag </p>.
  • Self closing tag <br>.

What is Element :

  • It is a complete structure.
  • It includes opening tag, closing tag and content.

<p>This is a paragraph</p>

Special case Empty Elements:

<br>
<hr>

  • These are still elements, but they don’t have closing tags.

What is Attributes :

  • It providex extra information about an element. They are written inside the opening tag come in name="value" pairs.

Example :
id - Unique Identifier. It can't be reused among the elements. Only one id per element
class - Group Identifier. It can be reused among the elements. Multiple classes per element

<h1 id="main-title" class="highlight">Title 1</h1>
<h2 id="intro" class="highlight">Title 2</h2>

Multiple classes per element :
<h2 id="header" class="highlight bold large red">Title 2</h2>

<!DOCTYPE html> : It defines this document is an HTML5 document.
<html> : Root element of an HTML page.
<head> : This element contains meta information about the HTML page. The content inside this is not displayed on the webpage.It provides information about the page to the browser and search engines.
<title> : This element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
<body> : This element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images.

HTML provides 6 levels of headings : 

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Smaller Heading</h4>
<h5>Very Small Heading</h5>
<h6>Smallest Heading</h6>
Enter fullscreen mode Exit fullscreen mode

Other Tags :

<p> : It defines paragraph in HTML. It adds automatic spacing above and below the paragraph.

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

<b> : It is used to make text bold. It is only for visual styling with no special meaning.

<p>This is <b>bold text</b> inside a paragraph.</p>

<strong> : It marks text as semantically important. It makes text bold visually and tells browsers, search engines, and screen readers that the content is critically important.

<p>Please <strong>save your work</strong> before closing.</p>

<em> : It makes text italic visually and tells browsers, search engines, and screen readers that the content has emphatic stress — changing the meaning of the sentence.

<p>I <em>love</em> programming.</p>

<i> : It is used to make text italic. Does not add meaning.

<p>The word <i>schadenfreude</i> is German.</p>

<br> : It is used to move the text to next line. It is a self closing tag. It has no closing tag.

<p>Hello<br>World</p>

<hr> : It is used to create a horizontal line. It is a self closing tag. It has no closing tag.

<p>Section 1</p>
<hr>
<p>Section 2</p>

Block level Element:
Inline level Element:
Semantic Tags:

Top comments (0)