Commonly Used Syntax

Commonly Used HTML, CSS, and JavaScript Syntax

Category	Syntax
HTML Tags	<tagname>
HTML Attributes	attribute="value"
HTML Elements	Combination of tags and content
HTML Comments	<!-- comment -->
HTML Text Content	<tagname>Text Content</tagname>
HTML Hyperlinks	<a href="url">Link Text</a>
HTML Images	<img src="image.jpg" alt="Description">
HTML Lists	<ul>/<ol>/<li>
HTML Tables	<table>/<tr>/<th>/<td>
HTML Forms	<form>/<input>/<textarea>/<button>
HTML Sections/Containers	<div>/<span>
HTML Media Elements	<audio>/<video>
CSS Text Styles	color, text-align, text-decoration
CSS Background Styles	background-color, background-image
CSS Box Model	width, height, margin, padding
CSS Positioning	position, top, left, right, bottom
CSS Floating	float, clear
CSS Display/Visibility	display, visibility
CSS Animation/Transition	animation, transition
JavaScript Variables	var, let, const
JavaScript Data Types	string, number, boolean, array, object
JavaScript Operators	+, -, *, /, =, ==, ===, &&, `
JavaScript Conditional Statements	if, else if, else
JavaScript Loop Statements	for, while, do...while
JavaScript Functions	function functionName(parameters) { // code }
JavaScript Event Handling	addEventListener('event', function() { // code })
JavaScript Array Operations	push(), pop(), shift(), unshift(), splice()
JavaScript Object Operations	object.property, object['property'], object.method()
JavaScript DOM Manipulation	document.getElementById(), document.querySelector(), element.innerHTML, element.style
JavaScript Asynchronous Operations	setTimeout(), setInterval(), fetch()

        /* Styling first letter of <p> elements inside a <div> 
         Note that this will also affect any <p> elements within <div> elements used by Blogger or other sources.*/
        div p::first-letter {
            font-size: 2em;
            color: red;
        }        
        

Paragraph inside a container.

        /* Styling <p> elements inside elements with class "container" */
        .container p {
            color: blue;
        }        
        

Standalone paragraph with container class.

        /* Styling <p> elements with class "container" */
        p.container {
            color: green;
        }    
  

        // JavaScript code using the ternary operator

        // Example 1: Simple ternary operator
        let age = 18;
        let canVote = (age >= 18) ? "Yes, you can vote." : "No, you cannot vote.";
        console.log(canVote);  // Output: "Yes, you can vote."

        // Example 2: Nested ternary operator for grading
        let score = 85;
        let grade = (score >= 90) ? 'A' :
                    (score >= 80) ? 'B' :
                    (score >= 70) ? 'C' :
                    (score >= 60) ? 'D' : 'F';
        console.log(grade);  // Output: "B"

        // Example 3: Inline conditional for discount
        let isMember = true;
        let discount = isMember ? 0.1 : 0.05;
        console.log(`Discount: ${discount * 100}%`);  // Output: "Discount: 10%"

        // Example 4: Ternary operator with functions
        let user = {
            age: 20
        };

        let message = (user.age >= 21) ? welcomeAdult() : welcomeMinor();

        function welcomeAdult() {
            return "Welcome, adult!";
        }

        function welcomeMinor() {
            return "Welcome, minor!";
        }

        console.log(message);  // Output: "Welcome, minor!"
        

The <a> tag, or anchor tag, is a fundamental element in HTML used to create hyperlinks. Its versatility allows for various applications, enhancing the navigability and interactivity of web content. Employing the <a> tag, web developers can establish links to external resources, such as other websites, documents, or multimedia files, by specifying the URL in the href attribute. Conversely, internal links within the same webpage or website can be created by referencing specific sections or IDs within the document. Additionally, the <a> tag can be utilized to trigger interactive actions, such as JavaScript functions or event handlers, enhancing user engagement and interactivity. When styled using CSS, the <a> tag's appearance can be customized to complement the overall design aesthetic of the website. Applying font-family properties allows for the selection of specific typefaces, such as cursive styles, to evoke a distinct visual identity and tone. Furthermore, adjusting font color, opting for a conspicuous hue, ensures that hyperlinks stand out prominently within the content, facilitating easy navigation and prompting user interaction.

In addition to basic hyperlink creation, the <a> tag offers additional functionality for web developers. One such feature is opening links in a new browser window or tab. This is achieved using the target attribute, with the value "_blank". For example, <a href="http://example.com" target="_blank">Link</a> will open the link in a new browser window when clicked.

Another useful application of the <a> tag is linking to specific sections within the same webpage or website. By using the id attribute, developers can define unique identifiers for different sections of the document. This allows users to navigate directly to a specific part of the page by clicking on the corresponding link. For example, <a href="#section2">Section 2</a> will link to the section of the document with the id attribute set to "section2".

Similarly, it is possible to link to specific sections within another website, provided that the target webpage contains the appropriate id attribute. This allows for seamless navigation between different online resources, improving the overall user experience and facilitating information retrieval. Overall, the <a> tag's versatility and flexibility make it an indispensable tool for creating interactive and navigable web content.