DEV Community

Janu Nirmal
Janu Nirmal

Posted on

HTML - An Introduction

#html

Expansion of HTML: Hypertext markup languages

HTML is a markup language, and it uses a system of tags and elements to annotate text, images, and other content to tell a web browser how to display them.

Alternatives of HTML:

XML – Extensible markup language
XHTML – Extensible hypertext markup language
SGML - Standard Generalised markup language
SVG – Scalable vector Graphics
md - Markdown

Html version

  • Html (1.0)
  • Html (2.0)
  • Html (3.2)
  • Html (4.01)
  • XHtml (1.0)
  • Html (5)

Connection between JS, CSS and Html

HTML ----> Skeleton (Basic structure)
CSS -----> Skin (Styles)
JavaScript ---> Brain (Functions the program)

Save the file
File.html extension

Run the file
Double-click on the file.

Basic structure of Html

<!DOCTYPE html>: This denotes a document as HTML5 document.

: Contains metadata about the document, such as the page title (which appears in the browser tab) and links to external resources like CSS files.

: Contains all the visible content of the web page, such as text, images, and links.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Key Concepts of HTML
Element - Component of HTML. Have a opening tag and closing tag

Attributes - Class, id, style, href, src, alt, width, height, disabled

Core Structure Tags

: Encloses all visible content such as text, images, and links.
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Headings (

to

): Define a hierarchy of titles, with

being the most important.
<!DOCTYPE html>
<html>
<head>
    <!-- Metadata elements go here -->
    <title>Page Title</title>
</head>

Paragraphs (

): Group blocks of text together. Lorem500 will give a paragraph with 500 characters.

<p>Sample data.</p>
Enter fullscreen mode Exit fullscreen mode

Links(): Create hyperlinks to other pages or files using the href attribute.

<a href="url">Link text</a>
Enter fullscreen mode Exit fullscreen mode

Images(): Embed visual media; this is a self-closing tag that does not require a .

<img src="url" alt="description">
Enter fullscreen mode Exit fullscreen mode

Lists(

    ,
      ,
    1. ): Create bulleted (unordered) or numbered (ordered) lists. 
      <ul>
  <li>Chatgpt</li>
  <li>Claude</li>
  <li>Gemini</li>
</ul>

      Divisions(

      ): A generic container used to group elements for styling. 
      <div>
  <h1>Heading</h1>
  <p>Paragraph</p>
</div>

      Forms(

      , , ): Enable user interaction and data submission. 
      <form action="/submit_page.php" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>

      Media(,

      <audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

      Tables (

      , ,
      ): Organise data into rows and columns.
      <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data A</td>
    <td>Data B</td>
  </tr>
</table>

      Semantic tags clearly describe the meaning and purpose of the content they contain to both the browser and the developer.

      Purpose of semantic tags

      Accessibility
      SEO (Search Engine Optimisation)
      Readability and Maintenance

      Standalone tags - Need to discuss

Top comments (0)