html
HTML
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
"Hypertext" refe rs to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.
https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
</body>
</html>
HTML ELEMENTS
An HTML element is a building block of an HTML page.
<p>This is a paragraph.</p>
PARAGRAPH
In HTML, the <p> tag defines a paragraph. It's used to structure text on a web page into distinct blocks, visually separated by blank lines or indentation. Browsers automatically add spacing before and after the <p> element. The closing </p> tag is technically optional but good practice to include.
Key Notes:
-
Paragraphs are block-level elements, which means each
<p>starts on a new line. -
Browsers automatically add space (margin) before and after paragraphs for readability.
-
You should not nest block elements (like another
<p>) inside a paragraph.
In HTML, headings are structural elements that indicate the importance of content on a webpage. They range from
<h1> (most important) to <h6> (least important). Headings help organize content, improve readability, and are crucial for accessibility and SEO.<h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block.| Tag | Meaning | Typical Use Case |
|---|---|---|
<h1> |
Main title | Page title or main heading of the document |
<h2> |
Section heading | Subsection of <h1> |
<h3> |
Subsection heading | Subsection of <h2> |
<h4> |
Deeper subsection | Subsection of <h3> |
<h5> |
Minor subsection | Subsection of <h4> |
<h6> |
Least important heading | Usually used sparingly or for deeply nested sections |
<h1>, followed by <h2> and so on.| Part | Purpose |
|---|---|
<!DOCTYPE html> |
Declares HTML5 and helps browsers render the page correctly |
<html lang="en"> |
Specifies the language for accessibility and SEO |
<meta charset="UTF-8"> |
Ensures proper character encoding |
<meta name="viewport"> |
Makes the page responsive on all devices |
<title> |
Title shown in browser tab |
<link rel="stylesheet"> |
Links to external CSS |
<script src="..."> |
Links to JavaScript file at the end for better loading |
Emmet is a powerful toolkit for web developers that allows for rapid HTML and CSS coding. It is integrated into many popular code editors, including Visual Studio Code, and can also be installed as an extension in other editors1. Emmet significantly speeds up the coding process by providing shorthand syntax for generating HTML and CSS code snippets.
Key Features of Emmet
HTML Abbreviations
Emmet allows you to create HTML elements quickly using abbreviations. For example, typing h1 and pressing Enter will generate <h1></h1>. You can also create elements with classes and IDs by using the dot (.) and hash (#) symbols respectively. For instance, div.wrapper will generate <div class="wrapper"></div>, and div#hero will generate <div id="hero"></div>2.
Nested Elements
You can create nested elements using the greater-than symbol (>). For example, div>p will generate <div><p></p></div>. You can also create sibling elements using the plus symbol (+). For instance, section+section will generate <section></section><section></section>2.
Multiplication and Numbering
Emmet allows you to generate multiple elements at once using the asterisk symbol (*). For example, ul>li*5 will generate a list with five list items. You can also number items in sequence using the dollar sign ($). For instance, ul>li{Item $}*3 will generate <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>2.
Attributes and Content
You can specify attributes for elements using square brackets ([]). For example, img[src="cat.jpg"][alt="Cute cat pic"] will generate <img src="cat.jpg" alt="Cute cat pic" />. To include content within an element, use curly braces ({}). For instance, p{This is a paragraph} will generate <p>This is a paragraph</p>2.
CSS Abbreviations
Emmet also supports CSS abbreviations. For example, typing pos will generate position:relative;, and d:n will generate display:none;. This feature helps in writing CSS properties quickly and efficiently2.
Boilerplate Code
Emmet can generate boilerplate code for HTML documents. Typing ! and pressing Enter will create a basic HTML structure, including the <!DOCTYPE html>, <html>, <head>, and <body> tags2.
Wrapping with Tags
Emmet allows you to wrap existing code with tags. You can highlight the code, open the command palette, and search for "Emmet: Wrap with Abbreviation" to wrap the selected code with the desired tag2.
Lorem Ipsum
Emmet can generate placeholder text using the lorem abbreviation. Typing lorem10 will generate 10 words of random text, which is useful for filling in content during development2.
Emmet is a valuable tool for web developers, enhancing productivity and efficiency by providing a shorthand syntax for writing HTML and CSS code. Its integration with popular code editors makes it accessible and easy to use.
FORM
The <form> HTML element represents a document section containing interactive controls for submitting information.An HTML form is created using the <form> element, which groups various input elements like text fields, buttons, checkboxes, and more. These elements enable users to provide information that can be submitted to a server for processing.
<form action="/submit" method="POST" enctype="multipart/form-data" autocomplete="on">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="profilePic">Profile Picture:</label>
<input type="file" id="profilePic" name="profilePic"><br><br>
<input type="submit" value="Register">
</form>
<input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.Form <input> types
How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attributes is not specified, the default type adopted type is text.
The available types are as follows:
button: A push button with no default behavior.checkbox: A check box allowing single values to be selected/deselected.color: HTML5 A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (more info).date: HTML5 A control for entering a date (year, month, and day, with no time).datetime-local: HTML5 A control for entering a date and time, with no time zone.email: HTML5 A field for editing an e-mail address.file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.hidden: A control that is not displayed but whose value is submitted to the server.image: A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.month: HTML5 A control for entering a month and year, with no time zone.number: HTML5 A control for entering a number.password: A single-line text field whose value is obscured. Use the maxlength attribute to specify the maximum length of the value that can be entered.radio: A radio button, allowing a single value to be selected out of multiple choices.range: HTML5 A control for entering a number whose exact value is not important.reset: A button that resets the contents of the form to default values.search: HTML5 A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.submit: A button that submits the form.tel: HTML5 A control for entering a telephone number. Line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as pattern and maxlength to restrict values entered in the control. The:validand:invalidCSS pseudo-classes are applied as appropriate.text: A single-line text field. Line-breaks are automatically removed from the input value.time: HTML5 A control for entering a time value with no time zone.url: HTML5 A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. You can use attributes such as pattern and maxlength to restrict values entered in the control. The:validand:invalidCSS pseudo-classes are applied as appropriate.week: HTML5 A control for entering a date consisting of a week-year number and a week number with no time zone.
<textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.Define a range control (like a slider control):
<label for="points">Points (between 0 and 10):</label>
<input type="range" id="points" name="points" min="0" max="10">The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).
Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below.
<p>Audio settings:</p>
<div>
<input type="range" id="volume" name="volume" min="0" max="11" />
<label for="volume">Volume</label>
</div>
<div>
<input
type="range"
id="cowbell"
name="cowbell"
min="0"
max="100"
value="90"
step="10" />
<label for="cowbell">Cowbell</label>
</div>
The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <option> tags inside the <select> element define the available options in the drop-down list.
RADIO
The <input type="radio"> defines a radio button.
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.
Note: The radio group must share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.
Note: The value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button that was selected.
<!DOCTYPE html>
<html>
<body>
<h1>Display Radio Buttons</h1>
<form action="/action_page.php">
<p>Please select your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
<br>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Display Radio Buttons
<article> tag in HTML5 is a semantic element used to define independent, self-contained content that can be distributed or reused separately from the rest of the site. It's ideal for content like blog posts, news articles, forum posts, or user comments.The <article> tag is suitable for:
-
Blog entries
-
News articles
-
User comments
-
Forum posts
-
Product reviews
-
Discussions or tutorials
<article class="film_review">
<h2>Jurassic Park</h2>
<section class="main_review">
<h3>Review</h3>
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<h3>User reviews</h3>
<article class="user_review">
<h4>Too scary!</h4>
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-16 19:00">May 16</time>
by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<h4>Love the dinos!</h4>
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-17 19:00">May 17</time>
by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>
Jurassic Park
Review
Dinos were great!
User reviews
Too scary!
Way too scary for me.
Love the dinos!
I agree, dinos are my favorite.
Comments
Post a Comment