DEV Community

dss99911
dss99911

Posted on • Originally published at dss99911.github.io

HTML Complete Guide

#frontend #common #html #web

Meta Tags

Charset

Specifies character encoding for the HTML document:

<meta charset="utf-8">
Enter fullscreen mode Exit fullscreen mode

Viewport

Gives the browser instructions on how to control the page's dimensions and scaling. Adjusts to browser screen size:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

Forms

Basic Form Structure

All fields should be wrapped in fieldset:

<form method="post">
    <fieldset>
        <label>Description</label>
        <input name="desc"/>
    </fieldset>
    <button type="submit">add</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Form Attributes

Attribute Description
action URI to submit to
method get or post
enctype Content type for submission

The enctype attribute specifies the content type used to submit the form to the server (when method is "post"):

  • Default: application/x-www-form-urlencoded
  • For file uploads: multipart/form-data

File Upload Form 

<form action="http://127.0.0.1:8081/file_upload" method="POST"
      enctype="multipart/form-data">
    <input type="file" name="file" size="50" />
    <br />
    <input type="submit" value="Upload File" />
</form>
Enter fullscreen mode Exit fullscreen mode

Form Validation

Submit Validation

Return false to prevent submission:

<form name="myForm" action="/action_page_post.php"
      onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>
Enter fullscreen mode Exit fullscreen mode

novalidate Attribute

Disables browser validation (e.g., email format check for type='email'):

<form novalidate>
Enter fullscreen mode Exit fullscreen mode

required Attribute 

<input type="text" name="fname" required>
Enter fullscreen mode Exit fullscreen mode

min, max Attributes 

<input id="id1" type="number" min="100" max="300" required>
Enter fullscreen mode Exit fullscreen mode

Select Tag 

<select class="form-control" ng-model="messageCollect.receiveType" required>
    <option value="1">USSD</option>
    <option value="2">SMS</option>
    <option value="3">BOTH</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Semantic HTML Tags

Navigation Bar 

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

Mark Tag

Highlights text:

<mark>highlighted text</mark>
Enter fullscreen mode Exit fullscreen mode

Abbreviation Tag

Shows full text on hover:

<abbr title="World Health Organization">WHO</abbr>
Enter fullscreen mode Exit fullscreen mode

Blockquote Tag

With Bootstrap, styling is automatically applied:

<blockquote>
    <p>For 50 years, .... 5 million globally.</p>
    <footer>From WWF's website</footer>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

Data URI Images (Embedded Images)

Reference: CSS-Tricks Data URIs

Embed images directly in HTML using Base64 encoding:

<img width="16" height="16" alt="star"
     src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVS..." />
Enter fullscreen mode Exit fullscreen mode

Format:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
Enter fullscreen mode Exit fullscreen mode

Useful Snippets

Position Elements at Left and Right Ends 

<p style="text-align:left;">
    <button>OK</button>
    <span style="float:right;"><button>Cancel</button></span>
</p>
Enter fullscreen mode Exit fullscreen mode

Originally published at https://dss99911.github.io

Top comments (0)