Beginner HTML

Basic HTML Elements

Anchor element (<a>)

The <a> tag is used to create a link to another page or website. It uses the 'href' attribute to specify the URL of the page.

                                
<!-- Text link example -->
<a href="http://example.com">Go to Example</a>

<!-- Image link example -->
<a href="http://example.com">
  <img src="image.jpg" alt="Example Image">
  Click on this image to go to Example
</a>

Head element (<head>)

The <head> element contains information about the webpage, such as the title of the page (shown in the browser tab) and links to stylesheets or scripts.

                                
<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
</html>

Target attribute

The 'target' attribute specifies where to open the linked document. If set to '_blank', it opens the link in a new tab or window.

                                
<a href="https://example.com" target="_blank">Open Example in a new tab</a>

HTML structure and indentation

HTML code should be organized with proper indentation to make it more readable. Each level of nested tags should be indented.

                                
<div>
  <h1>Main Heading</h1>
  <p>This is a paragraph.</p>
</div>

Internal page links

Links can also be used to jump to different sections of the same page using the 'id' attribute.

                                
<div>
  <p id="section1">This is Section 1</p>
</div>
<a href="#section1">Jump to Section 1</a>

HTML element (<html>)

The <html> element is the root element of an HTML page and contains all the content of the webpage.

                                
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p>This is a webpage content.</p>
  </body>
</html>

Comments in HTML

Comments are used to add notes in the HTML code. They are ignored by browsers and do not affect the webpage's content.

                                
<!-- This is a single-line comment -->
<p>This is visible on the webpage.</p>
<!--
  This is a multi-line comment
  It can span multiple lines.
-->

Whitespace in HTML

Extra spaces and line breaks in HTML code are usually ignored by browsers. Use whitespace to format code for better readability.

                                
<p>First paragraph.</p>

<p>Second paragraph directly below without extra space.</p>

Title element (<title>)

The <title> element defines the title of the webpage, which appears on the browser tab or window title bar.

                                
<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage Title</title>
  </head>
</html>

Using file paths

File paths can be absolute (full URL) or relative (file path from the current location).

                                
<a href="https://www.example.com">Absolute Path Example</a>
<a href="./about.html">Relative Path Example</a>

Document type declaration

The <!DOCTYPE html> declaration defines the document type and version of HTML. It should be the first line in an HTML document.

                                
<!DOCTYPE html>

Content in HTML elements

HTML elements contain content between their opening and closing tags, such as text or other elements.

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

List item element (<li>)

The <li> element is used to define items in a list, which can be ordered (numbered) or unordered (bulleted).

                                
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Video element (<video>)

The <video> element is used to embed video content on a webpage. The 'controls' attribute adds play, pause, and other controls.

                                
<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

Emphasis element (<em>)

The <em> element is used to emphasize text, usually displayed in italics.

                                
<p>This is a normal sentence with <em>emphasized text</em>.</p>

Ordered list element (<ol>)

The <ol> element creates an ordered (numbered) list.

                                
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Div element (<div>)

The <div> element is a container used to group other HTML elements together for styling or layout purposes.

                                
<div>
  <h2>Section Heading</h2>
  <p>Section content goes here.</p>
</div>

Creating Tables

Table head element (<thead>)

The <thead> element is used to group the header content in a table. It usually contains rows with <th> elements.

                                
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
</table>

Table body element (<tbody>)

The <tbody> element groups the main content of the table, typically containing multiple rows of data.

                                
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>

Table header element (<th>)

The <th> element defines a header cell in a table, usually displayed in bold and centered.

                                
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
</table>

Table row element (<tr>)

The <tr> element represents a row in a table, which can contain header (<th>) or data (<td>) cells.

                                
<table>
  <tbody>
    <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>
  </tbody>
</table>

Table data element (<td>)

The <td> element defines a standard cell in a table, used to display data.

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

Programming Cheatsheets: Quick Reference for Productivity

Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.

ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.

Online Training
Q4 2024

Beginner HTML

Topics

Basic HTML Elements

Anchor element (<a>)

Head element (<head>)

Target attribute

HTML structure and indentation

Internal page links

HTML element (<html>)

Comments in HTML

Whitespace in HTML

Title element (<title>)

Using file paths

Document type declaration

Content in HTML elements

List item element (<li>)

Video element (<video>)

Emphasis element (<em>)

Ordered list element (<ol>)

Div element (<div>)

Creating Tables

Table head element (<thead>)

Table body element (<tbody>)

Table header element (<th>)

Table row element (<tr>)

Table data element (<td>)

Programming Cheatsheets: Quick Reference for Productivity

Recent Releases

Blogs

Learn

Tools

Online Training Q4 2024

Beginner HTML

Topics

Basic HTML Elements

Anchor element (<a>)

Head element (<head>)

Target attribute

HTML structure and indentation

Internal page links

HTML element (<html>)

Comments in HTML

Whitespace in HTML

Title element (<title>)

Using file paths

Document type declaration

Content in HTML elements

List item element (<li>)

Video element (<video>)

Emphasis element (<em>)

Ordered list element (<ol>)

Div element (<div>)

Creating Tables

Table head element (<thead>)

Table body element (<tbody>)

Table header element (<th>)

Table row element (<tr>)

Table data element (<td>)

Programming Cheatsheets: Quick Reference for Productivity

Recent Releases

Blogs

Learn

Tools

Online Training
Q4 2024