Syntax_Examples
html syntax follows a rule of an opening and closing with content in between.
headings are h1 - h6, the lower the number the more important the heading.
Example:
\
Most Important heading\
....
....
\
Least important heading\
Closing heading has a / within the brackets.
Comments in html are made with opening and closing indicators as well. \<!-- comment in here -->
The main element in html code should be unique to the page and not repeated throughout the document or websites.
Example: Some more important content...\
\
\Most important content of the document\
\
\
Example code above is an example of nesting and should be used with html for better readability. The nested items (h1 and p elements) are indented between the main elements. Indentation should be 2 spaces.
\ element is used to insert images into websites. img is a "void element" because it doesn't have a closing element just an opening.
Attributes - special words used inside of opening elements that control the element. src is an attribute that controls where the source of an image comes from for example.
Example:
\
All img elements should have an alt attribute. The alt attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load.
Example:
\
Use the anchor element (a) to link to another page.
Example:
\\
Custom text for a link needs to be placed between the opening and closing anchor (a) elements
Example:
\A link to free code camp\
Any text can be turned into a link using anchors (a) and href elements
Example:
\
I think \freeCodeCamp\ is great.\
To open links in a new tab, you can use the target attribute on the anchor (a) element.
The target attribute specifies where to open the linked document. target="_blank" opens the linked document in a new tab or window.
Anchor element can be used to link anything, even images, making them clickable
The Section content...\section element is used to define sections in a document, such as chapters, headers, footers, or any other sections of the document. It is a semantic element that helps with SEO and accessibility.
Example:
\
\Section Title\
\
\
The figure element represents self-contained content and will allow you to associate an image with a caption. A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element.
Example:
\
\
\
\
To place emphasis on a specific word or phrase, you can use the em element.
The strong element is used to indicate that some text is of strong importance or urgent.
The form element is used to get information from a user like their name, email, and other details.
The action attribute indicates where form data should be sent.
Here is an example of a form element with an action attribute:
Example Code
\
In the example,
action="/submit-url" tells the browser that the form data should be sent to the path /submit-url.The
input element allows you several ways to collect data from a web form. Like img elements, input elements are a void element and do not need closing tags. input attributes take multiple different attributes, like text, name, just to mention a few.text - Add a text to the pagename - name the fieldplaceholder - something used to queue the user into what is expected
input element, text attribute, named catphotourl with a placeholder of cat photo URL
To prevent a user from submitting your form when required information is missing, you need to add the required attribute to an input element. There's no need to set a value to the required attribute. Instead, just add the word required to the input element, making sure there is space between it and other attributes.
To create a clickable button, use the button element and add text to name it.
Example:
\ <- this should be default behavior however using type you can be sure it submits as desired
\
label elements are used to help associate the text for an input element with the input element itself (especially for assistive technologies like screen readers).
The id attribute is used to identify specific HTML elements. Each id attribute's value must be unique from all other id values for the entire page.
Multiple radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a name attribute with the same value.
Example:
\
\
If you select the Indoor radio button and submit the form, the form data for the button is based on its name and value attributes. Since your radio buttons do not have a value attribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.
The fieldset element is used to group related inputs and labels together in a web form. fieldset elements are block-level elements, meaning that they appear on a new line.
Example:
\
legend element acts as a caption for the content
input element with a type attribute set to checkbox creates a checkbox.
Like radio buttons, form data for selected checkboxes are name / value attribute pairs. While the value attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page
All pages should begin with <!DOCTYPE html>. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications.
<!DOCTYPE html> tells browsers that the document is an HTML5 document which is the latest version of HTML.
Inside the head element, nest a meta element with an attribute named charset. Set to the value to utf-8 which tells the browser how to encode characters for the page.
Example webpage:
\<!DOCTYPE html> See more \
\
\
\
\
\
\
\
\CatPhotoApp\
\
\Cat Photos\
\
\
\
\
\Cat Lists\
\Things cats love:\
\
\
\
\
\
\
\
\
\
\Top 3 things cats hate:\
\
\
\
\
\
\
\
\
\
\
\
\Cat Form\
\
\
\
\
\
\
\
\
\
\
\