home What is HTML? Semantics HTML Important HTML tags Creating a table in HTML Semantic tags for table Forms Document object model(DOM) Accessibility MetaTags

HTML (HyperText markup language) Basics

What is HTML?

Semantics HTML:

  • Does HTML make sense without a browser ? When we code the html we need a way to understand how tags are grouped ? Are they really grouped as we wanted ?
  • Semantic markup is important because tags provide the content structure not the layout or style.
Tag Meaning
  • <article></article>
  • To write different articles , check this example
  • https://www.w3schools.com/tags/tag_article.asp
  • <section></section>
  • Thematic grouping of content.
  • The <section> tag defines a section in a document.
  • https://www.w3schools.com/tags/tag_section.asp
  • <header></header>
  • Introductory, has sub tags h1, h2, h3
  • <main></main>
  • Example which shows article , section , header and main
  • https://www.w3schools.com/tags/tag_main.asp
  • <nav></nav>
  • To have a set of navigation links
  • https://www.w3schools.com/tags/tag_nav.asp
  • <aside></aside>
  • The <aside> tag defines some content aside from the content it is placed in.
  • https://www.w3schools.com/tags/tag_aside.asp
  • <footer></footer>
  • https://www.w3schools.com/tags/tag_footer.asp

Important HTML tags:

Tag Meaning
  • <p> Hello world </p>
  • Paragraph tag, not only text we can add images between the open and closing tag
  • <h1> primary heading </h1>
  • Headings. There are also <h2> , <h3> , <h4>,<h5>, <h6>
  • <img src = “cat.png” alt = “dogText” />
  • Image tag has an src attribute which takes the path of the image. If that image is not there it will print the alternate text provided in the alt attribute.
  • Relative Path: If the image is on our system
  • Absolute Path: this is actual path of image
  • The alt attribute can also be used to provide text to image when the internet is slow or the image is not able to load with the internet speed. We show this text to the user.
  • <ol>
  • <li> list item 1 </li>
  • <li> list item 2 </li>
  • </ol>
  • Ordered list. <ol>
  • Will contain <li> tag for every row, simply it is a list item. </li>
  • By default, browser will show bullet list for <ol> </ol>
  • <ul>
  • <li> list item 1 </li>
  • <li> list item 2 </li>
  • </ul>
  • UnOrdered list. <ul>
  • Will contain <li>tag for every row
  • By default, browser will show number list for <ul>
  • <br/>
  • Line break in the page
  • It is also called as self closing tag
  • <hr/>
  • Horizontal line - it is a thematic break and has semantic meaning.
  • Browsers will draw a line between two different components to differentiate them.
  • <a href = “https:google.com” > Google </a>
  • Used to create the link
  • Anchor tag, it has href attribute which stores the url. Used to provide urls
  • Target attribute - allows user to open the window in a new page
  • target=”_blank” - open in a new tab.
  • <p> This is <em> important </em> dude </p>
  • Text font style
  • Emphasis tag shows the text inside with italics
  • <p> This is <bold> important </bold> dude </p>
  • Text font style
  • bold tag highlights the text in it.

Creating a table in HTML

Tag Meaning
  • <table>Table</table>
  • <tr>Table row tag</tr>
  • <th>Table header tag</th>
  • <td>Table data tag</td>
    • Attributes: for table header
  • Scope <th span =”row’’>This becomes the
    heading of the tabel row <th></th>
  • ColSpan
  • Table
  • Table row
  • Table header
  • Table data
    • Attributes: for table header
  • Defines the heading for row / col for proper alignment
  • Defines for how many columns this heading is for ?

Semantic tags for table:

Tag Meaning
  • <thead><tr><th>NAME</th></tr>
  • </thead>
  • <tbody><tr><td>nitya</td></tr>
  • <tfoot><tr><th span = “row”>Total</th><td>100</td></tr>
  • <caption></caption>
  • <colgroup></colgroup>
  • Similar to the <th> tag, which is used in the standard semantic grouping tag’s
  • This contains the main body or the table items within a table like <td></td>
  • To represent the total or something like showing total we use <tfoot></tfoot>
  • This is a caption or title for table
  • This is used to group the columns

Forms:

Tag Meaning
  • <form></form>

  • <input></input>

  • <label></label>

  • <button></button>

  • <fieldset></fieldset>

  • <legend></legend>
    • Attributes for input tag:
  • Type: text,button,checkbox…..

  • Id

  • Placeholder
    • Attributes for label tag:
  • For attribute
  • Form: The form tag is the wrapper around all the inputs or widgets

  • Input: This is the generic tag that contains all kinds of inputs that we need

  • Label: This is used to tell the user what kind of input they should type in input

  • Button: Creates the button

  • Fieldset: Gives the section for data mentioned within

  • Legend: Can write the text in between the box line


  • Type: We define what kind of input we want using type attribute

  • Id: To make the input unique and use this id value in the label value to make the browser understand.

  • Placeholder: To make the user understand, what kind of input or input format should look like/ we are expecting.

  • For: This attribute will make the browser understand, for which input tag the particular label belongs to.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
</head>
<body>
<form>
<label for="username"> Username</label>
<input id="username" minlength="6" type="text" name="username" placeholder="Username">
<label for="password"> Password</label>
<input id="password" minlength="6" required="required" type="password" name="password" placeholder="Password">
<input type="date" name="date">
<fieldset>
<legend> Choose your animal</legend>
<label for="dog"> dog</label>
<input type="radio" id ="dog" name="dog" value="dog">
<label for="cat"> car</label>
<input type="radio" id ="cat" name="cat" value="cat">
</fieldset>
<input type="submit" value="Login">
</form>
</body>
</html>

Document object model (DOM):

Accessibility:

MetaTags: