HTML Basic Coding & Tags – Today We will learn HTML Basic.

HTML (HyperText Markup Language) is the standard markup language used to create web pages. Here’s a basic introduction to HTML coding and some of the fundamental tags used to structure and present content on the web.

Basic Structure of an HTML Document

An HTML document has a defined structure with specific tags that enclose different parts of the content:

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <a href="https://www.example.com">This is a link</a> </body> </html>

Fundamental HTML Tags

Here are some of the basic tags used in HTML:

  1. <!DOCTYPE html>: Declares the document type and version of HTML.
  2. <html>: The root element that encloses all the HTML content.
  3. <head>: Contains meta-information about the document, such as the title and links to stylesheets.
  4. <title>: Sets the title of the webpage, which appears in the browser tab.
  5. <body>: Contains the content of the HTML document, such as text, images, links, etc.
  6. <h1> to <h6>: Heading tags, with <h1> being the highest level and <h6> the lowest.
  7. <p>: Paragraph tag for blocks of text.
  8. <a>: Anchor tag for creating hyperlinks. The href attribute specifies the URL of the link.
  9. <img>: Image tag for embedding images. The src attribute specifies the path to the image file, and alt provides alternative text.
  10. <ul> and <ol>: Unordered and ordered lists, respectively. List items are enclosed in <li> tags.
  11. <div>: Division tag used as a container for other elements. Useful for CSS styling and layout.
  12. <span>: Inline container used to wrap text for styling purposes without introducing a line break.
  13. <table>, <tr>, <td>: Tags for creating tables. <table> is the container, <tr> defines a table row, and <td> defines a table cell.

Example of Basic HTML Tags in Use

Here’s an example of how these tags can be combined in a simple HTML document:

<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Welcome to My Webpage</h1> <p>This is a paragraph with some <strong>bold</strong> and <em>italic</em> text.</p> <h2>My Favorite Websites</h2> <ul> <li><a href="https://www.example.com">Example</a></li> <li><a href="https://www.google.com">Google</a></li> <li><a href="https://www.wikipedia.org">Wikipedia</a></li> </ul> <h2>Images</h2> <img src="image.jpg" alt="Description of the image"> <h2>Table</h2> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table> </body> </html>

Self-Closing Tags

Some HTML tags do not require a closing tag. These are known as self-closing tags. Examples include:

  • <img>: Embeds an image.
  • <br>: Inserts a line break.
  • <hr>: Inserts a horizontal rule (a line).

Attributes

HTML tags can have attributes that provide additional information about the elements. Attributes are always included in the opening tag and usually come in name/value pairs like this: name="value". Common attributes include:

  • href: Specifies the URL for an anchor tag.
  • src: Specifies the source file for an image tag.
  • alt: Provides alternative text for an image.
  • title: Adds a tooltip for an element.
  • id: Assigns a unique identifier to an element.
  • class: Assigns one or more class names to an element for CSS styling.

Understanding these basic concepts and tags is essential for creating and working with HTML documents.