DEV Community

dss99911
dss99911

Posted on • Originally published at dss99911.github.io

HTML Fundamentals - Building Web Pages

#frontend #javascript #html #web

HTML (HyperText Markup Language) is the standard markup language for creating web pages. This guide covers essential HTML concepts.

Meta Tags

Character Encoding 

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

Viewport

The viewport meta tag controls page dimensions and scaling on mobile devices:

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

Semantic Tags

Navigation 

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

Mark (Highlight) 

<p>This is <mark>highlighted</mark> text.</p>
Enter fullscreen mode Exit fullscreen mode

Abbreviation 

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

Hovering over the abbreviation shows the full title.

Blockquote 

<blockquote>
    <p>For 50 years, WWF has been protecting...</p>
    <footer>From WWF's website</footer>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

Forms

Basic Form Structure 

<form method="post" action="/submit">
    <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 URL to submit form to
method HTTP method (get/post)
enctype Encoding type (default: application/x-www-form-urlencoded)

File Upload 

<form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" size="50"/>
    <input type="submit" value="Upload File"/>
</form>
Enter fullscreen mode Exit fullscreen mode

Form Validation 

<!-- Required field -->
<input type="text" name="fname" required>

<!-- Min/Max values -->
<input type="number" id="id1" min="100" max="300" required>

<!-- Custom validation -->
<form name="myForm" onsubmit="return validateForm()" method="post">
    <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

<!-- Disable validation -->
<form novalidate>...</form>
Enter fullscreen mode Exit fullscreen mode

Select Dropdown 

<select class="form-control" name="type" required>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Data URIs

Embed images directly in HTML using base64 encoding:

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

Format: data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Layout Snippets

Float Elements to Edges 

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

HTML provides the structure for web content. Combined with CSS for styling and JavaScript for interactivity, it forms the foundation of modern web development.

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

Top comments (0)