Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

Posted in HTML Tutorial
Updated on Sep 13, 2024
By Mari Selvan
👁️ 32 - Views
⏳ 4 mins
💬 0
HTML Basic

Photo Credit to CodeToFun

Introduction

HTML (HyperText Markup Language) is the foundation of web development, used to structure content on the web. It allows you to create web pages by defining elements like headings, paragraphs, links, images, and more.

Understanding HTML is essential for anyone interested in web development, as it forms the backbone of every website.

What Is HTML?

HTML is a markup language used to create web pages. It uses tags to structure text, multimedia, and other elements on a page. HTML documents are interpreted by web browsers, which render the content for users to see.

Basic HTML Document Structure

An HTML document consists of elements that form the structure of a webpage. Here’s the basic layout:

HTML
Copied
Copy To Clipboard
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>
  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html>: The root element of the document.
  • <head>: Contains meta-information like the title and links to stylesheets.
  • <body>: Contains the content visible to users, such as text, images, and links.

HTML Elements and Tags

HTML uses tags to define elements. Most elements have an opening tag (e.g., <p>) and a closing tag (e.g., </p>). The content goes between the opening and closing tags.

Some elements, such as <img> and <br>, are self-closing and don’t require a closing tag.

Attributes in HTML

Attributes provide additional information about an element and are included in the opening tag. For example, the src attribute in an <img> tag specifies the image source:

  • src: Specifies the URL of the image.
  • alt: Provides alternative text for accessibility.

Common HTML Tags

Here are some common HTML tags you’ll use frequently:

  1. Headings:

    <h1> to <h6> for different heading levels.

    HTML
    Copied
    Copy To Clipboard
    <h1>Main Heading</h1>
    <h2>Subheading</h2>
  2. Paragraphs:

    <p> for paragraphs of text.

    HTML
    Copied
    Copy To Clipboard
    <p>This is a paragraph of text.</p>
  3. Lists:

    <ul> for unordered lists, <ol> for ordered lists, and <li> for list items.

    HTML
    Copied
    Copy To Clipboard
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  4. Divisions and Spans:

    <div> for block-level elements, <span> for inline elements.

    HTML
    Copied
    Copy To Clipboard
    <div>This is a block of content.</div>
    <span>This is inline text.</span>

HTML Links and Images

Links and images are integral to any web page. Use the <a> tag to create hyperlinks and the <img> tag to display images.

  1. Link:

    Creates a clickable link.

    HTML
    Copied
    Copy To Clipboard
    <a href="https://example.com">Visit Example</a>
  2. Image:

    Embeds an image in the page.

    HTML
    Copied
    Copy To Clipboard
    <img src="image.jpg" alt="An example image">

Best Practices

  • Use Semantic HTML: Tags should represent their content meaningfully (e.g., use <header>, <footer>, <article>).
  • Validate Your HTML: Ensure that your HTML is properly structured by using tools like the W3C Markup Validator.
  • Accessibility: Always provide alternative text (alt) for images and consider using ARIA roles for enhanced accessibility.
  • Keep it Clean: Use comments (<!-- Comment -->) and indentation for better readability and maintainability of your HTML code.

Example

Here’s a simple HTML example demonstrating the basic structure of a webpage:

HTML
Copied
Copy To Clipboard
<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a basic HTML example.</p>

  <h2>Things I Like:</h2>
  <ul>
    <li>Coding</li>
    <li>Web Development</li>
    <li>Coffee</li>
  </ul>

  <p>Visit my <a href="https://example.com">website</a> for more information.</p>
</body>
</html>

Conclusion

HTML is the foundation of web development, providing the structure and layout for web pages. Mastering basic HTML tags and their attributes is the first step toward becoming a web developer. Once comfortable with HTML, you can dive deeper into styling with CSS and adding interactivity with JavaScript.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy