IQCode's HTML Cheat Sheet for 2023: A Comprehensive Guide to HTML Syntax and Tags.

INTRODUCTION TO HTML

HTML, which stands for Hypertext Markup Language, is a standardized system used to create web pages. It utilizes tags to structure a web page and mark up its content.

WHY DO WE USE HTML?

HTML is essential to ensure proper formatting of text and images on web pages so that they can be displayed accurately by internet browsers. Without HTML, browsers would not be able to interpret and display page elements effectively. HTML also provides a foundational structure for web pages which can be customized using Cascading Style Sheets (CSS).

One could think of HTML as the bones (structure) of a web page, while CSS is its skin (appearance).

THE BASIC STRUCTURE OF HTML:


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Page</title>
  </head>
  <body>
    Body contents here
  </body>
</html>

CONCEPT AND SYNTAX OF HTML:

HTML documents consist of plaintext formatted using elements. HTML elements are enclosed by opening and closing tags, which are represented by angle brackets ( < and > ). Certain tags, such as <br>, <img>, etc. are void and do not contain any text. HTML tags can also be assigned attributes that provide additional information to the browser about how to display page elements.

HTML files are saved with either the .htm or .html extension. They are provided by web servers and can be viewed using any web browser.

LEARN HTML: BASICS TO ADVANCED CONCEPTS

  1. ROOT ELEMENT IN HTML

Sectioning the Root with HTML Elements

When designing a website, it is important to properly structure your HTML code using sectioning elements. This not only helps with the organization and readability of your code, but also improves the accessibility and SEO of your website.

<header>

- This element is used to define the header section of your website, typically containing the website's logo, navigation menu, and other introductory content.

<main>

- This element is used to define the main content of your website, such as articles, blog posts, or product listings.

<section>

- This element is used to group related content within the

<main>

section.

<article>

- This element is used to define a self-contained block of content, such as a blog post or news article.

<aside>

- This element is used to define content that is related to the main content but not an integral part of it, such as a sidebar.

<footer>

- This element is used to define the footer section of your website, typically containing copyright information, contact details, and other relevant information.

By using these sectioning elements, you can create a clear and organized structure for your website, making it easier for both humans and search engines to navigate your content.

Sectioning Content in HTML

HTML offers several elements to section and organize content within a webpage. These elements include:

  • <header>

    : used for introductory content or navigational links at the top of a section or webpage.

  • <nav>

    : contains navigation links to other parts of the webpage or external links.

  • <main>

    : contains the primary content of a webpage.

  • <section>

    : groups related content together within a webpage.

  • <article>

    : contains standalone content such as blog posts, news articles, or user comments.

  • <aside>

    : contains supporting or related content that is not the primary focus of the webpage.

  • <footer>

    : used for concluding content or contact information at the bottom of a section or webpage.

Using these elements can improve the structure and accessibility of your webpage, making it easier for both users and search engines to understand and navigate your content.

<!--Example usage of section and article elements-->


Adding Text Content to HTML Elements

When it comes to adding text to an HTML element, there are a few different ways to do it.


  <p>This is some text added using the paragraph element.</p>
  
  <div>Here is some text added using a div element.</div>
  
  <span>Text added using a span element</span>

Additionally, it's possible to add text content using JavaScript.


  let element = document.getElementById("myElement");
  element.innerHTML = "This text was added using JavaScript";

It's important to remember to use semantic HTML and choose the appropriate element for the type of content being added.

Adding Images and Multimedia with HTML

When creating a website, it's important to include visual elements such as images and multimedia to enhance the user experience. Here are some HTML tags you can use to add these elements:

<img src="image.jpg" alt="description">

The

<img>

tag is used to display an image on a webpage. The

src

attribute specifies the URL of the image file, and the

alt

attribute provides a text description of the image for accessibility purposes.

<video src="video.mp4" controls></video>

The

<video>

tag is used to embed a video on a webpage. The

src

attribute specifies the URL of the video file, and the

controls

attribute adds playback controls to the video player.

<audio src="audio.mp3" controls></audio>

The

<audio>

tag is used to embed an audio file on a webpage. The

src

attribute specifies the URL of the audio file, and the

controls

attribute adds playback controls to the audio player.

Make sure to properly size and compress your images and multimedia files for optimal webpage load times.

Adding Semantic Text Elements in HTML


<!-- Defining a paragraph with the 'p' tag -->
<p>This is a paragraph.</p>
 
<!-- Defining a heading with the 'h1' tag -->
<h1>This is a heading.</h1>
 
<!-- Defining emphasized text with the 'em' tag -->
<p>This is <em>emphasized</em> text.</p>
 
<!-- Defining strong text with the 'strong' tag -->
<p>This is <strong>strong</strong> text.</p>
 
<!-- Defining a hyperlink with the 'a' tag -->
<p>Visit <a href="https://www.example.com">example.com</a> for more information.</p>

Adding proper semantic text elements in HTML makes it easier for search engines, screen readers, and other systems to understand and interpret the content on a website correctly. Semantic elements help in improving the accessibility, SEO, and overall usability of a webpage.

Adding Scripting to HTML Elements


//Create a button element
var myButton = document.createElement("button");

//Add text to the button
myButton.innerHTML = "Click me";

//Add an event listener to the button
myButton.addEventListener("click", function(){
  //Do something when the button is clicked
  alert("Button was clicked!");
});

//Add the button to the HTML document
document.body.appendChild(myButton);

In this example, we create a button element using JavaScript. We then add text to the button and attach an event listener to it, which will trigger an alert message when the button is clicked. Finally, we append the button to the HTML document, so it will be displayed on the page.

Interactive Elements in HTML

HTML offers a variety of interactive elements that can be used to create dynamic and engaging web pages. These elements include:

<a>

: Used to create links to other web pages or resources.

<button>

: Used to create buttons that perform an action when clicked.

<input>

: Used to create various types of form controls including text fields, checkboxes, and radio buttons.

<select>

: Used to create dropdown lists.

<textarea>

: Used to create multi-line text input areas.

By using these interactive elements, web developers can enhance the user experience and create more sophisticated web applications.

HTML Elements for Denoting Edits


  <del> - Used for deleted content</del><br>
  <ins> - Used for inserted content</ins><br>
  <s> - Used for content that has been marked as no longer accurate or relevant</s><br>
  <mark> - Used for highlighting or emphasizing content</mark><br>

HTML provides various elements for defining different types of edits. These elements help in clearly indicating the changes made to the content on a website. The

<del>

tag is used for deleted content. The

<ins>

tag is used for inserted content. The

<s>

tag is used for content that has been marked as no longer accurate or relevant. Finally, the

<mark>

tag is used for highlighting or emphasizing content. By using these tags, website owners can ensure that the changes made are easily visible to their visitors.

HTML Elements: Tables

In HTML, tables are used to display data in rows and columns. The basic structure of a table includes the following elements:

<table>

: This element is used to create a table.

<tr>

: This element is used to create a row within the table.

<td>

: This element is used to create a cell within a row.

Here's an example of how to create a simple table:

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

This code would display a table with two rows and two columns, where the top left cell would contain the text "Row 1, Cell 1" and the bottom right cell would contain the text "Row 2, Cell 2".

HTML Forms

HTML forms are used to collect user input data on a website. They typically consist of various input fields, such as textboxes, dropdown lists, checkboxes, and radio buttons.

To create a form in HTML, the

<form>

tag is used. Within the form tag, input fields are added using various other HTML tags such as

<input>

,

<select>

, and

<textarea>

.

Once the user has filled out the form, it can be submitted using the

<button>

or

<input>

tags with the

type="submit"

attribute.

The data collected from the user can be sent to a server for processing using various methods such as GET or POST. The method is specified in the

<form>

tag using the

method

attribute.

Overall, HTML forms are a powerful tool for collecting user data and interacting with server-side scripts.

Technical Interview Guides

Here are guides for technical interviews, categorized from introductory to advanced levels.

View All

Best MCQ

As part of their written examination, numerous tech companies necessitate candidates to complete multiple-choice questions (MCQs) assessing their technical aptitude.

View MCQ's
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.