HTML (Hypertext Markup Language) – Tutorial into HTML Basics

HTML Tutorial 

HTML, or Hypertext Markup Language, is the backbone of every web page you visit. It’s not a programming language but a markup language used to structure the content on the internet. HTML works by using tags to define elements such as headings, paragraphs, images, and links. These tags are enclosed in angle brackets, and they tell the web browser how to display the content.

HTML Basics

At its core, HTML is all about organizing content. Think of it like a recipe – you have your ingredients (text, images, videos) and your instructions (tags) on how to put everything together. This language provides the structure for the web page, allowing the browser to interpret and display the content in a visually appealing and organized manner.

Semantic HTML Introduction 

Semantic HTML refers to the use of tags and elements in HTML that structure a web page and carry meaning, providing context to the content they surround. It’s like giving your website a language it can speak and understand. 

By using semantic HTML, you can ensure that your web pages are more than just a jumble of text and images. They become a well-organized and structured communication tool, allowing both humans and machines to interpret and navigate your content more effectively.

Think of it as using the right words to convey your thoughts. Just as proper grammar makes your sentences easier to understand, semantic HTML makes your website more accessible, user-friendly, and search engine-friendly.

So, by embracing semantic HTML, you’re not only improving the readability and usability of your website but also building a solid foundation for better SEO and future-proofing your web presence.

Information About HTML Element Names – HTML Elements Are The Building Blocks of The World Wide Web

How To Use HTML Attributes

HTML attributes, like root elements, are incredibly useful tools that can enhance the functionality and appearance of your webpages in a jiffy! Let’s take a tour through a few examples that will surely make your coding experience a breeze.

Need to add a link to your page? Look no further than the “href” attribute, allowing you to easily connect your visitors to other pages or external resources.

And if you want to make your images more accessible, the “alt” attribute comes to the rescue, providing a brief but descriptive text for screen readers.

Want to jazz up your content with some extra emphasis? Just reach for the “style” attribute, granting you the power of CSS magic and enabling you to customize fonts, colors, and more.

 With HTML attributes by your side, there’s no limit to the creativity and functionality you can bring to your web development projects. 

Here are some code examples for some common HTML attributes

1. id Attribute:
   • Assigns a unique identifier to an HTML element.
   <div id="myDiv">This is a div with an ID</div>
2. class Attribute:
   • Assign one or more class names to an HTML element (for styling with CSS).
   <p class="important-text">This is an important paragraph</p>
3. src Attribute:
   • Specifies the source URL of an external resource, such as an image or script.
   <img src="image.jpg" alt="An example image">
4. href Attribute:
   • Specifies the URL of a linked resource, such as a hyperlink.
   <a href="https://www.example.com">Visit Example.com</a>
5. alt Attribute:
   • Provides alternative text for images, displayed when the image cannot be loaded.
   <img src="image.jpg" alt="Description of the image">
6. style Attribute:
   • Defines inline styles for an element (not recommended for large-scale styling).
   <p style="color: red; font-size: 16px;">This paragraph has inline styles</p>
7. disabled Attribute:
   • Disables a form control or button.
   <button disabled>Disabled Button</button>
8. placeholder Attribute:
   • Provides a short hint that describes the expected value of an input field.
   <input type="text" placeholder="Enter your name">

These are just a few examples, and there are many more attributes available in HTML for various elements. Attributes, even in an empty element, provide additional information or settings to enhance the behavior or appearance of HTML elements.

HTML Headings

Headings, represented by through tags, provide hierarchical structure to the content, with being the highest level and being the lowest. By utilising them appropriately, we can convey the importance and organization of the information in a concise and user-friendly manner. So whether it’s creating a well-structured blog post or optimizing your website for SEO, embracing semantic HTML.

HTML provides six levels of headings, from <h1> (the highest level) to <h6> (the lowest level). 

1. <h1> 
   • Represents the main heading of the document.
   htmlCopy code<h1>This is the highest Level 1 used for main title</h1>
2. <h2> 
   • Represents a subsection of the document.
   <h2>This is a Level 2</h2>
3. <h3> 
   • Represents a sub-subsection of the document.
   <h3>This is a Level 3</h3>
4. <h4> 
   • Represents a sub-sub-subsection of the document.
   <h4>This is a Level 4</h4>
5. <h5> 
   • Represents a sub-sub-sub-subsection of the document.
   <h5>This is a Level 5</h5>
6. <h6>
   • Represents a sub-sub-sub-sub-subsection of the document.
   <h6>This is a Level 6</h6>

Remember: Headings are used to structure the content of a webpage and provide semantic meaning to different sections. It’s important to use headings in a hierarchical order to maintain a logical structure for accessibility and SEO purposes.

HTML Paragraphs

Here are examples of HTML code for paragraphs and spans:

1. Paragraph (<p>):
   • Represents a paragraph of text.
   <p>This is a simple paragraph of text. It can contain multiple sentences or lines.</p>
2. Span (<span>):
   • Represents an inline portion of text and is often used for styling or scripting.
   <p>This is a <span style="color: blue;">blue</span> word within a paragraph.</p> In the example above, the <span> element is used to apply a specific style (in this case, changing the color) to the word “blue.”

You can use the <p> element to structure larger blocks of text, and the <span> element for smaller inline elements where you need to apply specific styling or scripting. The style attribute in the <span> example is just one way to apply styles; it’s often preferable to use external CSS for more organized and maintainable styling.

HTML Lists etc

Here are examples of HTML code that include paragraphs with bold text, italics, numbered lists, and unordered lists:

1. Paragraph with Bold Text (<strong>):
   • Represents important text, typically displayed in bold.
   <p>This is a paragraph with <strong>bold text</strong>.</p>
2. Paragraph with Italics (<em>):
   • Represents emphasized text, typically displayed in italics.
   <p>This is a paragraph with <em>italicized text</em>.</p>
3. Unordered List (<ul> and <li>):
   • Represents an unordered (bulleted) list.
   <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
4. Numbered List (<ol> and <li>):
   • Represents an ordered (numbered) list.
   <ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol>

You can mix and match these elements as needed within your HTML document to create well-structured content with bold, italicized, and list elements.

HTML Media

Here are examples of HTML code for including images and videos:

1. Image (<img>):
   • Embeds an image into the HTML document.
   <img src="image.jpg" alt="Description of the image"> Replace "image.jpg" with the actual path or URL of your image file, and provide a descriptive "alt" attribute for accessibility.
2. Video (<video>):
   • Embeds a video into the HTML document.
   <video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> Replace "video.mp4" with the actual path or URL of your video file. The controls attribute adds video controls (play, pause, volume, etc.), and the <source> element allows you to specify multiple video formats for broader browser compatibility.

Remember to replace the file paths and URLs with your actual image and video file locations. Additionally, consider providing alternative content or messages within the tags for cases where the content cannot be displayed or played.

HTML Tables

Now, when it comes to HTML tables, semantic HTML encourages the use of appropriate table tags, such as <table> (outer shell), <thead> (table head that contains the column headings), <tr> short for table row, <th> (short for table header and contains the header of each column) and <td> (which is short for table data), to create well-organized and accessible data tables.

As with all tags, you show that the tag has ended by using the </example> version of the tag. so to start a table row you use <tr> at the start and </tr> at the end of the row and in between you add either the <th>table header</th> or <td> table data</td> for each column in that row.

By utilizing these semantic tags, we can make it easier for both humans and assistive technologies, like screen readers, to understand the purpose and structure of the table. So, with semantic HTML, we not only ensure a more user-friendly experience but also enhance the accessibility and search engine optimization of our webpages.

HTML Code example for a table

<h2>Buttons Example</h2>

    <!-- Standard Button -->
    <button type="button">Click me</button>

    <!-- Button with an ID for JavaScript -->
    <button type="button" id="myButton">Click me too</button>

    <!-- Submit Button in a Form -->
    <form action="/submit_form" method="post">
        <button type="submit">Submit Form</button>
    </form>

    <!-- Reset Button in a Form -->
    <form action="/reset_form" method="post">
        <button type="reset">Reset Form</button>
    </form>

   

HTML Comments

HTML comments are an awesome tool that can help you leave notes or reminders within your code without them being visible on your website.

Think of comments as your trusty sidekick, allowing you to communicate with yourself or other developers who may be working on the same project.

Whether you want to explain your thought process, temporarily disable a section of code, or just leave a friendly reminder, HTML comments have got your back! Just wrap your comments within tags, and voila!

These little gems will be hidden from the site visitors but always there to lend a helping hand to you and your fellow developers. 

You start a html comment like this <!– and then close it like this –>.

For Example:

<!– This is a comment. Don’t forget to use the following to close me or the rest of your code will be commented out –> 

HTML Buttons

With their eye-catching designs and customizable styles, they provide both functionality and aesthetics to web pages. Whether it’s a simple button to navigate to another page or a sophisticated one that triggers a complex function, these HTML buttons are the heroes that make websites come alive.

<h2>Buttons Example</h2>

    <!-- Standard Button -->
    <button type="button">Click me</button>

    <!-- Button with an ID for JavaScript -->
    <button type="button" id="myButton">Click me too</button>

    <!-- Submit Button in a Form -->
    <form action="/submit_form" method="post">
        <button type="submit">Submit Form</button>
    </form>

    <!-- Reset Button in a Form -->
    <form action="/reset_form" method="post">
        <button type="reset">Reset Form</button>
    </form>

   

HTML Forms

With HTML forms, you can create all sorts of interactive elements like text fields, checkboxes, radio buttons, and dropdown menus. These forms allow users to input data, such as their name or email address, and submit it to the server for further processing. Not only do they make websites more engaging, but they also provide a seamless way for users to interact with online content.

<form action="/submit_form" method="post">
        <!-- Text Input -->
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <!-- Email Input -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <!-- Password Input -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>

        <!-- Radio Buttons -->
        <fieldset>
            <legend>Gender:</legend>
            <label for="male">
                <input type="radio" id="male" name="gender" value="male"> Male
            </label>
            <label for="female">
                <input type="radio" id="female" name="gender" value="female"> Female
            </label>
        </fieldset>

        <!-- Checkbox -->
        <label for="subscribe">
            <input type="checkbox" id="subscribe" name="subscribe"> Subscribe to our newsletter
        </label>

        <!-- Textarea -->
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea>

        <!-- Submit Button -->
        <button type="submit">Submit</button>
    </form>

   

In this example:

• The <form> element defines the form and includes an action attribute (URL where the form data should be submitted) and a method attribute (HTTP method, such as “post” or “get”).
• Various form elements like <input>, <textarea>, <select>, etc., are used to collect different types of input.
• Labels are associated with form elements using the for attribute to improve accessibility.
• The required attribute is used to make certain fields mandatory.
• The <fieldset> and <legend> elements are used to group and label related radio buttons.

Basic HTML Boilerplate – A Simple HTML Document

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <!-- Add any additional meta tags, stylesheets, or scripts here -->
</head>

<body>
    <!-- Your content goes here -->

    <!-- Add any scripts or additional content at the end of the body for better performance -->

</body>

</html>

This template includes the standard HTML5 doctype declaration, sets the document’s character set to UTF-8, includes a viewport meta tag for responsiveness on different devices, and provides a basic structure for the head and body sections. You can customize the title and add any additional meta tags, stylesheets, or scripts in the head section, and your main content goes in the body section.

Creating the HTML Structure – Basic HTML Boilerplate with Navigation HTML Element

To start, let’s create the HTML structure for our navbar menu. Open your favorite text editor and create a new HTML file. Begin by adding the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website Title</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

In the above code, we have created a basic HTML structure with a navigation element (<nav>) and an unordered list (<ul>) inside it. Each list item (<li>) contains an anchor tag (<a>) that represents a menu item. Customize the list items and anchor tags according to your website’s sections and pages.

Styling the Navbar Menu with CSS:

Now that we have created the HTML structure, let’s add some CSS to style our navbar menu. Create a new CSS file, name it “styles.css,” and link it to your HTML file as shown in the HTML code above. Add the following CSS code to the “styles.css” file:

nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
li {
  margin-right: 20px;
}
a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

In the CSS code above, we have applied some basic styling to our navbar menu. We set the background color, text color, and padding for the navigation element. The unordered list is displayed as a flex container, which helps in positioning the menu items horizontally. We added some spacing between the list items using the margin-right property. Finally, we styled the anchor tags by setting the color and removing the default underline. On hover, the anchor tags have an underline to indicate interactivity.

Understanding HTML Tags

Tags are the building blocks of HTML. They come in pairs – an opening tag and a closing tag – and they work in unison to enclose the content. For example, the opening tag <p> indicates the start of a paragraph, while the closing tag </p> denotes the end of the paragraph. This simple yet powerful system allows content creators to arrange and format text, images, and other media on a page.

The Role of HTML in Web Development

HTML is the first step in creating a website. It sets the foundation for everything else to come. Without HTML, web browsers wouldn’t know how to structure the information they receive, and the web would be a chaotic jumble of text and images. By learning HTML, you gain the ability to craft and mold your content into a cohesive and visually appealing website.

The Importance of HTML for SEO

Search engines like Google rely heavily on HTML to understand and index the content of a web page. Proper HTML structure, including relevant title tags, meta descriptions, and heading tags, can greatly impact a website’s search engine visibility. By using HTML best practices, you can make your website more discoverable to users searching for your content.

HTML5: The Latest Version of HTML

HTML5 is the current version of HTML and comes with several new features and improvements. It introduces new elements, attributes, and APIs that make it easier to build modern and interactive web pages.

Web Development and Beyond: CSS and JavaScript

While HTML is responsible for the structure and content of a web page, CSS (Cascading Style Sheets) is used for styling and layout. By adding CSS rules, you can control the appearance of your

 HTML elements.

JavaScript, on the other hand, adds interactivity and functionality to your web pages. You can use it to create dynamic content, handle user input, and perform various actions.

Learn HTML with W3Schools – The World Wide Web Consortium

If you’re interested in learning HTML, W3Schools is an excellent resource. They provide comprehensive tutorials, examples, and quizzes to help you grasp the concepts and practice your skills. Whether you’re a beginner or an experienced developer, W3Schools has something for everyone.

Summary:

• HTML is the standard markup language used to structure and format web pages.
• HTML documents consist of a head and a body.
• HTML elements include headings, paragraphs, links, images, lists, and tables.
• HTML5 is the latest version of HTML, offering new features and improvements.
• CSS is used for styling, while JavaScript adds interactivity.
• W3Schools is a valuable resource for learning HTML.

FAQs

Q: What is HTML (Hypertext Markup Language)?

A: HTML, or Hypertext Markup Language, is the standard markup language for creating web pages and web applications. It provides the structure and format of the content on a webpage, including text, images, links, and other elements.

Q: How does HTML work?

A: HTML works by using a set of markup tags to define the structure and format of a web page. These tags are interpreted by web browsers to display the content as intended by the web developer.

Q: What is the role of HTML browser in displaying web pages?

A: An HTML browser, also known as a web browser, is a software application that retrieves and displays HTML documents from the Internet. It interprets the HTML code and renders the web page for users to view and interact with.

Q: How to report an error in an HTML page?

A: To report an error in an HTML page, you can use the developer tools in your web browser to inspect the HTML code, identify any errors or issues, and make necessary corrections to the code.

Q: What is the format of an HTML page?

A: The format of an HTML page is defined by the HTML markup, which includes elements such as the document type declaration, HTML tags, attributes, and content that together structure the layout and design of the web page.

Q: What is the significance of XML in relation to HTML?

A: XML, or Extensible Markup Language, is a complementary standard to HTML that is used for defining and organizing data. While HTML focuses on the display and structure of web content, XML is utilized for defining and representing data elements.

Q: How can I learn to code in HTML?

A: You can learn HTML through online tutorials, courses, and resources available on websites like W3Schools, which provide comprehensive guides and interactive learning materials to help beginners understand the basics of HTML coding.

Q: What are the basics of HTML that I should know?

A: The basics of HTML include understanding the document type declaration, the structure of HTML elements, the concept of opening and closing tags, the use of attributes and values, and the overall organization of an HTML document.

Q: What does HTML stand for?

A: HTML stands for Hypertext Markup Language, which signifies its purpose of using markup tags to structure and format hypertext documents for display on web browsers.

Q: How does HTML define the structure of a web page?

A: HTML defines the structure of a web page through a set of elements that serve as the building blocks for organizing and presenting content. This includes defining headings, paragraphs, lists, images, links, and other components within the web page layout.

Conclusion

In essence, HTML is the language that gives structure and meaning to the content we consume on the web. It’s the scaffolding upon which the entire internet is built. Understanding HTML can empower you to create and curate web experiences that are both aesthetically pleasing and easily discoverable. So, whether you’re a budding web developer or simply curious about how the web works, diving into the world of HTML is a worthwhile endeavor.