Doctype Declaration:
The doctype declaration (<!DOCTYPE html>) is placed at the very beginning of an HTML document. It informs the browser about the version of HTML being used, which is HTML5 in this case. This declaration ensures that the document is rendered correctly.
HTML Tag:
The <html> tag serves as the root element of an HTML document. It encompasses the entire content of the page and provides the base for all other elements.
Head Section:
The <head> section comes after the opening <html> tag and before the <body> tag. It contains meta information about the document, such as the page title, character encoding, CSS stylesheets, JavaScript files, and other metadata.
The content within the <head> section is not directly visible on the page but is crucial for search engines and browsers to understand and process the document correctly.
Title Tag:
The </code> tag is placed within the <code><head></code> section. It defines the title of the web page, which is displayed on the browser's title bar or in search engine results. The text enclosed within the <code><title></code> tags is a concise description of the page's content and should accurately represent its purpose.</p>
<h3><strong>Body Section:</strong></h3>
<p>The <code><body></code> tag contains the visible content of the web page. It includes text, images, <a href="https://verpex.com/blog/website-tips/how-to-build-backlinks-to-your-website">links</a>, and interactive elements like <a href="https://verpex.com/blog/website-tips/free-alternatives-to-google-forms">forms</a> or buttons. Everything between the opening <code><body></code> tag and the closing <code></body></code> tag is considered the body content.</p>
<p>Here is a basic HTML template that illustrates the standard structure:
html</p>
<pre><code><!DOCTYPE html>
<html>
<head> <title>Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the content of my web page.</p>
<a href="https://www.testing.com">Visit Example</a>
<!-- Additional elements and content go here →
</body>
</html>
</code></pre>
<p>In the example above, the <code><title></code> tag sets the page title, and within the <code><body></code> section, we have a heading <code><h1></code>, a paragraph <code><p></code>, and a link <code><a></code> to the website "www.testing.com". This template is a starting point, and you can add more <a href="https://verpex.com/blog/website-tips/what-are-the-elements-of-a-website">elements</a> and content within the <code><body></code> section to build your web page.</p>
<p>Remember, this is a basic representation of the HTML structure. As you progress in web development, you will encounter more complex elements and tags to enhance the functionality and <a href="https://verpex.com/blog/website-tips/minimalist-website-design">design</a> of your web pages.</p>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_10" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139308_10_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<h3 class="vpx-display is-size-2 has-margin-bottom-100 has-text-primary"><strong>Essential HTML Tags</strong></h3>
<div class="content has-text-dark"><hr>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_11" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139309_11_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<div class="content has-text-dark"><h3><strong>Heading Tags</strong></h3>
<p>Heading tags, from <code><h1></code> to <code><h6></code>, are used to define headings and subheadings in a web page. They play a crucial role in organizing and structuring content. The higher the number in the heading tag, the less significant the heading is. Here is an example:</p>
<p><strong>html</strong></p>
<p><code><h1>This is the Main Heading</h1></code></p>
<p><code><h2>This is a Subheading</h2></code></p>
<p>Heading tags not only provide <a href="https://verpex.com/blog/website-tips/visual-hierarchy-in-web-design">visual hierarchy</a> but also contribute to search engine optimization (SEO) by signalling the importance of content to search engines</p>
<h3><strong>Paragraph and Break Tags</strong></h3>
<p>The <code><p></code> tag is used to define paragraphs of text. It is a block-level element that creates a new paragraph. Here is an example:</p>
<p><strong>html</strong></p>
<p><code><p>This is a paragraph of text.</p></code></p>
<p><code><p>Another paragraph of text.</p></code></p>
<p>If you want to create a line break within a paragraph, you can use the <code><br></code> tag, which is an empty element. Here is an example:</p>
<p><strong>html</strong></p>
<pre><code><p>This is the first line.<br>
This is the second line.</p>
</code></pre>
<h3><strong>Anchor Tags</strong></h3>
<p>The <code><a></code> tag is used to create hyperlinks. It allows you to link to other web pages, documents, or specific parts of a page. The href attribute specifies the <a href="https://verpex.com/blog/hosting-service-explained/website-url-explained">URL</a> of the destination. Here is an example:</p>
<p><strong>html</strong></p>
<p><code><a href="https://www.example.com">Visit Example</a></code></p>
<p>You can also use the target attribute to control how the link opens. For example, <code>target="_blank"</code> opens the link in a new browser tab:</p>
<p><strong>html</strong></p>
<p><code><a href="https://www.example.com" target="_blank">Visit Example</a></code></p>
<h3><strong>Image Tags</strong></h3>
<p>The <code><img></code> tag is used to <a href="https://verpex.com/blog/website-tips/how-to-create-an-embed-code-for-your-website">embed</a> images in a web page. The src attribute specifies the image source (file URL or path). The alt attribute provides <a href="https://verpex.com/blog/website-tips/image-title-vs-alt-text">alternative text</a> that describes the image for accessibility purposes. Here is an example:</p>
<p><strong>html</strong></p>
<p><code><img src="image.jpg" alt="Description of the image" title="Image Title"></code></p>
<p>You can also use the title attribute to provide additional information about the image when the user hovers over it:
html</p>
<p><code><img src="image.jpg" alt="Image Description" title="Additional Information"></code></p>
<h3><strong>List Tags</strong></h3>
<p>HTML provides two types of lists: unordered lists <code>(<ul>)</code> and ordered lists <code>(<ol>)</code>. The <code><li></code> tag is used to define individual list items within these lists. Here is an example:</p>
<p><strong>html</strong></p>
<pre><code><ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
</code></pre>
<h3><strong>Table Tags</strong></h3>
<p>Tables are used to present data in a structured format. The <code><table></code> tag creates the table, while the <code><tr></code> tag defines table rows. Within each row, we use the <code><td></code> tag to define table cells. The <code><th></code> tag is used for table <a href="https://verpex.com/blog/wordpress-hosting/how-to-design-an-effective-wordpress-header">headers</a>. Here is an example:</p>
<p><strong>html</strong></p>
<pre><code><table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</code></pre>
<h3><strong>Div and Span Tags</strong></h3>
<p>The <code><div></code> tag is used for grouping elements together and applying styles or <a href="https://verpex.com/blog/website-tips/18-javascript-frameworks-to-consider-for-web-development">JavaScript</a> to them. The <code><span></code> tag is used for inline styling or targeting specific parts of the text. Here is an example:</p>
<p><strong>html</strong></p>
<pre><code><div> <p>This is a group of elements.</p>
<span style="color: blue;">This text is styled differently.</span> </div>
</code></pre>
<h3><strong>Form Tags</strong></h3>
<p>The <code><form></code> tag is used to create a web form. The <code><input></code> tag represents various input types such as text fields, checkboxes, radio buttons, etc. The <code><textarea></code> tag is used for multi-line text input, and the <code><button></code> tag represents a clickable button. Here is an example.</p>
<p><strong>html</strong></p>
<pre><code><form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea> <br>
<button type="submit">Submit</button>
</form>
</code></pre>
<p>These examples demonstrate the usage of the essential HTML tags discussed.</p>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_12" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139310_12_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<h3 class="vpx-display is-size-2 has-margin-bottom-100 has-text-primary"><strong>Styling HTML with CSS</strong></h3>
<div class="content has-text-dark"><hr>
</div>
</div>
</div></div>
</div>
</div>
<div class="section vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="vpx-blogImage is-relative ">
<picture><source
type="image/webp"
class="lazyload"
width="888" height="444"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/transforms/_888x499_crop_center-center_82_line/Styling-HTML-with-CSS.webp.webp?v=1691761759 888w, https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/transforms/_768x432_crop_center-center_60_line/Styling-HTML-with-CSS.webp.webp?v=1691761760 768w"
alt="Styling HTML with CSS"
/><img
class="lazyload"
width="888" height="444"
data-src="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/Styling-HTML-with-CSS.webp?v=1691760958"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/Styling-HTML-with-CSS.webp?v=1691760958"
alt="Styling HTML with CSS"
onerror="this.onerror = null;this.parentNode.children[0].srcset = this.parentNode.children[1].srcset = this.src;"
/>
</picture>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_14" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139312_14_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<div class="content has-text-dark"><p>CSS (Cascading Style Sheets) is a stylesheet language that defines the visual appearance and layout of HTML elements on a web page. It provides a powerful and flexible way to customize the presentation of web content. CSS works by applying rules and styles to HTML elements, allowing developers to control aspects such as colours, <a href="https://verpex.com/blog/wordpress-hosting/how-to-host-google-fonts-locally-in-wordpress">fonts</a>, sizes, spacing, and positioning.</p>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_15" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139313_15_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<div class="content has-text-dark"><h3><strong>Different Methods of Adding CSS Styles to HTML Documents</strong></h3>
<p>Inline CSS, Internal CSS, and External CSS are three different methods of <a href="https://www.w3schools.com/css/css_howto.asp" target="_blank">adding CSS styles</a> to HTML documents:</p>
<h4><strong>Inline CSS:</strong></h4>
<p><a href="https://www.simplilearn.com/tutorials/css-tutorial/inline-css" target="_blank">Inline CSS</a> involves adding style rules directly to HTML elements using the style attribute. It provides a quick way to apply specific styles to individual elements. Here is an example:</p>
<p><strong>html</strong></p>
<p><code><p style="color: blue; font-size: 18px;">This is a paragraph with inline CSS.</p></code>
In the above example, the style attribute is added to the <code><p></code> tag to set the colour to blue and the font size to 18 pixels.</p>
<h4><strong>Internal CSS:</strong></h4>
<p>Internal CSS is defined within the <code><style></code> tag, which is placed in the <code><head></code> section of an HTML document. It allows you to apply styles to multiple elements within the same HTML file. Here's an example:</p>
<p><strong>html</strong></p>
<pre><code><head>
<style>
p
{ color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal CSS.</p>
</body>
</code></pre>
<h4><strong>External CSS:</strong></h4>
<p>External CSS allows you to keep your styles separate from your HTML document. Styles are defined in an external CSS file and linked to the HTML document using the <code><link></code> tag. This approach is recommended for larger projects as it promotes better organization and reusability of styles. Here is an example:</p>
<p><strong>html</strong></p>
<pre><code><head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body> <p>This is a paragraph with external CSS.</p>
</body>
</code></pre>
<p><strong>CSS file (styles.css):</strong></p>
<p><strong>css</strong></p>
<pre><code>p
{ color: blue;
font-size: 18px;
}
</code></pre>
<p>Using external CSS files allows for easy maintenance and modification of styles across multiple web pages. It also promotes consistency and separation of concerns between HTML structure and visual presentation.</p>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_16" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139314_16_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<h3 class="vpx-display is-size-2 has-margin-bottom-100 has-text-primary"><strong>Best Practices in HTML Coding</strong></h3>
<div class="content has-text-dark"><hr>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_17" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139315_17_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<div class="content has-text-dark"><p>Following coding standards is essential for <a href="https://verpex.com/blog/website-tips/javascript-clean-code">clean</a>, maintainable, and efficient HTML code. Consistent and well-structured code improves readability, makes collaboration easier, and minimizes errors. Some best practices to consider include:</p>
<p><strong>Indentation and Formatting:</strong> Use consistent indentation and proper formatting to enhance <a href="https://verpex.com/blog/website-tips/dynamic-code-analysis-tools">code readability</a>. This helps you and other developers understand the structure of the HTML document more easily.</p>
<p><strong>Naming Conventions:</strong> Use descriptive and meaningful names for HTML elements, classes, and IDs. This improves code clarity and makes it easier to understand the purpose of each element.</p>
<p><strong>Avoid Inline Styles:</strong> Inline styles should be used sparingly. Instead, consider using external or internal CSS to separate styling from HTML structure, promoting better organization and <a href="https://verpex.com/blog/website-tips/website-maintenance-checklist-21-crucial-tasks-you-shouldnt-skip">maintainability</a>.</p>
<p><strong>Semantic HTML:</strong> Utilize semantic HTML elements <code>(e.g., <header>, <nav>, <section>, <article>, <footer>)</code> to convey the structure and meaning of the content. Semantic HTML improves accessibility, search engine optimization, and overall <a href="https://verpex.com/blog/website-tips/why-code-review-is-required-in-software-engineering">code quality</a>.</p>
<p><strong>Consistent Tag Naming:</strong> Stick to lowercase tag names to ensure consistency and compatibility across different browsers and versions.</p>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_18" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139316_18_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<h3 class="vpx-display is-size-2 has-margin-bottom-100 has-text-primary"><strong>Importance of Comments</strong></h3>
<div class="content has-text-dark"><hr>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_19" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139317_19_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<div class="content has-text-dark"><p>Comments in HTML serve as helpful documentation, providing context, explanations, and reminders for yourself and other developers. They can be used to:</p>
<p><strong>Describe Intent:</strong> Comment on the purpose of specific sections or elements within the HTML code to help others understand your intentions.</p>
<p><strong>Temporary Disabling:</strong> Use comments to temporarily disable certain code blocks without removing them entirely. This allows for easier debugging or <a href="https://verpex.com/blog/website-tips/6-ways-to-test-the-ui-of-a-website">testing</a>.</p>
<p><strong>Collaboration and Documentation:</strong> Comments facilitate collaboration by providing insights into the code's logic, potential issues, or workarounds. They also serve as a form of documentation, making it easier to maintain and update the codebase in the future.</p>
<p>To add comments in HTML, use the <code><!-- Comment goes here --></code> syntax. The content within the comment tags will not be rendered by the browser.</p>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_20" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139318_20_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<h3 class="vpx-display is-size-2 has-margin-bottom-100 has-text-primary"><strong>Proper Tag Closure</strong></h3>
<div class="content has-text-dark"><hr>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_21" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139319_21_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<div class="content has-text-dark"><p>Properly closing HTML tags is crucial for maintaining the integrity of the document structure. Each opening tag should have a corresponding closing tag. For example:</p>
<p><strong>html</strong></p>
<pre><code><div>
<p>This is a paragraph.</p>
</div>
</code></pre>
<p>For self-closing tags, such as <code><img></code> or <code><br></code>, the closing slash is optional in HTML5. However, it is good practice to include it for consistency and compatibility across different versions of HTML.</p>
<p>Incorrect tag closure can lead to unexpected rendering issues and can make the HTML difficult to debug. Use proper indentation and visually <a href="https://verpex.com/blog/website-tips/best-code-review-practices-establishing-an-efficient-team">check your code</a> to ensure all tags are correctly closed.</p>
<p>By adhering to proper tag closure, you ensure that the HTML document maintains its structure, making it easier to read, maintain, and debug.</p>
</div>
</div>
</div></div>
</div>
</div>
<div id="vpx-discountTicketRibbon873389_0_blog" class="section is-clipped vpx-ribbon vpx-discountTicketRibbon vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="columns is-centered">
<div class="column is-12-tablet">
<div class="vpx-discountTicket has-rounded-border is-relative has-background-secondary">
<div class="vpx-discountTicketEdge">
<svg class="is-hidden-mobile" xmlns="http://www.w3.org/2000/svg" width="8" height="436" viewBox="0 0 8 436">
<g id="Group_10" data-name="Group 10" transform="translate(-435 -184)">
<path id="Path_35" data-name="Path 35" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 52.5)" class="semi-circle"/>
<path id="Path_36" data-name="Path 36" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 72.5)" class="semi-circle"/>
<path id="Path_37" data-name="Path 37" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 92.5)" class="semi-circle"/>
<path id="Path_38" data-name="Path 38" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 112.5)" class="semi-circle"/>
<path id="Path_39" data-name="Path 39" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 132.5)" class="semi-circle"/>
<path id="Path_40" data-name="Path 40" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 152.5)" class="semi-circle"/>
<path id="Path_41" data-name="Path 41" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 172.5)" class="semi-circle"/>
<path id="Path_42" data-name="Path 42" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 192.5)" class="semi-circle"/>
<path id="Path_43" data-name="Path 43" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 212.5)" class="semi-circle"/>
<path id="Path_44" data-name="Path 44" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 232.5)" class="semi-circle"/>
<path id="Path_45" data-name="Path 45" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 252.5)" class="semi-circle"/>
<path id="Path_46" data-name="Path 46" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 272.5)" class="semi-circle"/>
<path id="Path_47" data-name="Path 47" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 292.5)" class="semi-circle"/>
<path id="Path_48" data-name="Path 48" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 312.5)" class="semi-circle"/>
<path id="Path_27" data-name="Path 27" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -107.5)" class="semi-circle"/>
<path id="Path_28" data-name="Path 28" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -87.5)" class="semi-circle"/>
<path id="Path_29" data-name="Path 29" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -67.5)" class="semi-circle"/>
<path id="Path_30" data-name="Path 30" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -47.5)" class="semi-circle"/>
<path id="Path_31" data-name="Path 31" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -27.5)" class="semi-circle"/>
<path id="Path_32" data-name="Path 32" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -7.5)" class="semi-circle"/>
<path id="Path_33" data-name="Path 33" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 12.5)" class="semi-circle"/>
<path id="Path_34" data-name="Path 34" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 32.5)" class="semi-circle"/>
</g>
</svg>
<svg class="is-hidden-tablet" xmlns="http://www.w3.org/2000/svg" width="876" height="8" viewBox="0 0 876 8">
<g id="Group_11" data-name="Group 11" transform="translate(-74 -57)">
<path id="Path_5" data-name="Path 5" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-217.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_6" data-name="Path 6" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-197.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_7" data-name="Path 7" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-177.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_8" data-name="Path 8" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-157.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_9" data-name="Path 9" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-137.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_10" data-name="Path 10" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-117.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_11" data-name="Path 11" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-97.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_12" data-name="Path 12" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-77.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_13" data-name="Path 13" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-57.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_14" data-name="Path 14" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-37.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_15" data-name="Path 15" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-17.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_16" data-name="Path 16" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(2.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_17" data-name="Path 17" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(22.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_18" data-name="Path 18" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(42.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_19" data-name="Path 19" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(62.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_20" data-name="Path 20" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(82.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_21" data-name="Path 21" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(102.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_22" data-name="Path 22" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(122.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_23" data-name="Path 23" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(142.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_24" data-name="Path 24" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(162.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_25" data-name="Path 25" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(182.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_26" data-name="Path 26" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(202.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_49" data-name="Path 49" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(222.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_50" data-name="Path 50" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(242.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_51" data-name="Path 51" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(262.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_52" data-name="Path 52" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(282.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_53" data-name="Path 53" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(302.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_54" data-name="Path 54" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(322.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_55" data-name="Path 55" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(342.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_56" data-name="Path 56" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(362.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_57" data-name="Path 57" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(382.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_58" data-name="Path 58" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(402.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_59" data-name="Path 59" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(422.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_60" data-name="Path 60" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(442.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_61" data-name="Path 61" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(462.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_62" data-name="Path 62" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(482.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_63" data-name="Path 63" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(502.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_64" data-name="Path 64" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(522.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_65" data-name="Path 65" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(542.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_66" data-name="Path 66" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(562.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_67" data-name="Path 67" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(582.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_68" data-name="Path 68" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(602.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_69" data-name="Path 69" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(622.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_70" data-name="Path 70" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(642.5 829.5) rotate(-90)" class="semi-circle"/>
</g>
</svg>
</div>
<div class="columns is-desktop is-relative is-zIndex-1">
<div class="column is-6-desktop is-7-widescreen is-8-fullhd vpx-discountTicketBlog-leftColumn">
<div class="vpx-discountTicket-content vpx-discountTicketBlog-content"><div class="is-flex has-content-justified-center">
<picture><img
class="image"
src="https://dc47ezw0257n1.cloudfront.net/uploads/images/discounts/90-off_2021-03-30-101202.svg?v=1675258840"
alt="90%"
onerror="this.onerror = null;this.parentNode.children[0].srcset = this.parentNode.children[1].srcset = this.src;"
/>
</picture>
</div>
<div class="vpx-discountTicket-bar content has-text-centered has-rounded-border has-text-white has-padding-75 has-margin-top-200 vpx-paragraph is-size-6 is-uppercase vpx-weight-bold"><p>💸 90% OFF YOUR FIRST MONTH WITH ALL VERPEX WORDPRESS HOSTING PLANS</p>
</div>
</div>
</div>
<div class="column is-6-desktop is-5-widescreen is-4-fullhd has-text-white has-text-centered">
<div class="vpx-discountTicket-content vpx-discountTicketBlog-content">
<div>
<p class="is-size-6">with the discount code</p>
<div class="vpx-discountTicket-code has-rounded-border has-padding-y-50 has-padding-x-100 has-margin-y-100">
<h4 class="is-uppercase">MOVEME</h4>
</div>
</div>
<a href="https://verpex.com/wordpress-hosting" target="_blank" title="Grab the Discount" class="button is-fullwidth-mobile is-rounded is-stretched is-medium "><span class="is-size-4">Grab the Discount</span>
</a>
</div>
</div>
</div>
<div class="vpx-discountTicketEdge end">
<svg class="is-hidden-mobile" xmlns="http://www.w3.org/2000/svg" width="8" height="436" viewBox="0 0 8 436">
<g id="Group_10" data-name="Group 10" transform="translate(-435 -184)">
<path id="Path_35" data-name="Path 35" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 52.5)" class="semi-circle"/>
<path id="Path_36" data-name="Path 36" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 72.5)" class="semi-circle"/>
<path id="Path_37" data-name="Path 37" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 92.5)" class="semi-circle"/>
<path id="Path_38" data-name="Path 38" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 112.5)" class="semi-circle"/>
<path id="Path_39" data-name="Path 39" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 132.5)" class="semi-circle"/>
<path id="Path_40" data-name="Path 40" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 152.5)" class="semi-circle"/>
<path id="Path_41" data-name="Path 41" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 172.5)" class="semi-circle"/>
<path id="Path_42" data-name="Path 42" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 192.5)" class="semi-circle"/>
<path id="Path_43" data-name="Path 43" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 212.5)" class="semi-circle"/>
<path id="Path_44" data-name="Path 44" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 232.5)" class="semi-circle"/>
<path id="Path_45" data-name="Path 45" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 252.5)" class="semi-circle"/>
<path id="Path_46" data-name="Path 46" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 272.5)" class="semi-circle"/>
<path id="Path_47" data-name="Path 47" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 292.5)" class="semi-circle"/>
<path id="Path_48" data-name="Path 48" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 312.5)" class="semi-circle"/>
<path id="Path_27" data-name="Path 27" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -107.5)" class="semi-circle"/>
<path id="Path_28" data-name="Path 28" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -87.5)" class="semi-circle"/>
<path id="Path_29" data-name="Path 29" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -67.5)" class="semi-circle"/>
<path id="Path_30" data-name="Path 30" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -47.5)" class="semi-circle"/>
<path id="Path_31" data-name="Path 31" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -27.5)" class="semi-circle"/>
<path id="Path_32" data-name="Path 32" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 -7.5)" class="semi-circle"/>
<path id="Path_33" data-name="Path 33" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 12.5)" class="semi-circle"/>
<path id="Path_34" data-name="Path 34" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-329.5 32.5)" class="semi-circle"/>
</g>
</svg>
<svg class="is-hidden-tablet" xmlns="http://www.w3.org/2000/svg" width="876" height="8" viewBox="0 0 876 8">
<g id="Group_11" data-name="Group 11" transform="translate(-74 -57)">
<path id="Path_5" data-name="Path 5" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-217.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_6" data-name="Path 6" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-197.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_7" data-name="Path 7" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-177.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_8" data-name="Path 8" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-157.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_9" data-name="Path 9" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-137.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_10" data-name="Path 10" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-117.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_11" data-name="Path 11" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-97.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_12" data-name="Path 12" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-77.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_13" data-name="Path 13" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-57.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_14" data-name="Path 14" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-37.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_15" data-name="Path 15" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(-17.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_16" data-name="Path 16" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(2.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_17" data-name="Path 17" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(22.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_18" data-name="Path 18" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(42.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_19" data-name="Path 19" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(62.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_20" data-name="Path 20" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(82.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_21" data-name="Path 21" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(102.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_22" data-name="Path 22" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(122.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_23" data-name="Path 23" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(142.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_24" data-name="Path 24" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(162.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_25" data-name="Path 25" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(182.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_26" data-name="Path 26" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(202.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_49" data-name="Path 49" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(222.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_50" data-name="Path 50" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(242.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_51" data-name="Path 51" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(262.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_52" data-name="Path 52" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(282.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_53" data-name="Path 53" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(302.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_54" data-name="Path 54" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(322.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_55" data-name="Path 55" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(342.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_56" data-name="Path 56" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(362.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_57" data-name="Path 57" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(382.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_58" data-name="Path 58" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(402.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_59" data-name="Path 59" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(422.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_60" data-name="Path 60" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(442.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_61" data-name="Path 61" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(462.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_62" data-name="Path 62" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(482.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_63" data-name="Path 63" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(502.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_64" data-name="Path 64" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(522.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_65" data-name="Path 65" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(542.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_66" data-name="Path 66" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(562.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_67" data-name="Path 67" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(582.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_68" data-name="Path 68" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(602.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_69" data-name="Path 69" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(622.5 829.5) rotate(-90)" class="semi-circle"/>
<path id="Path_70" data-name="Path 70" d="M764.5,291.5a8,8,0,0,1,0,16" transform="translate(642.5 829.5) rotate(-90)" class="semi-circle"/>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_23" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139321_23_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<h3 class="vpx-display is-size-2 has-margin-bottom-100 has-text-primary"><strong>Conclusion</strong></h3>
<div class="content has-text-dark"><hr>
</div>
</div>
</div></div>
</div>
</div>
<div class="is-relative">
<a data-anchor="blogSection_24" class="vpx-anchor"></a>
</div>
<div id="vpx-textRibbon1139322_24_blog" class="section vpx-ribbon vpx-textRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns ">
<div class="column is-12 has-text-left">
<div class="content has-text-dark"><p>Learning HTML is best reinforced through practice. Encourage yourself to apply the knowledge gained in this article by building small web pages or projects. Experiment with different HTML tags and CSS styles to create visually appealing and well-structured <a href="https://verpex.com/blog/wordpress-hosting/introduction-to-gutenberg-the-wordpress-content-editor">web content</a>. Remember to refer to online resources, documentation, and practice-based tutorials to further refine your skills.</p>
<p>By practising and exploring advanced topics, you will gradually become more proficient in <a href="https://verpex.com/blog/website-tips/ai-in-web-development">web development</a> and be able to create engaging and interactive <a href="https://verpex.com/blog/website-tips/worlds-first-website">websites</a>.</p>
<p>Happy coding!</p>
</div>
</div>
</div></div>
</div>
</div>
<div id="vpx-faqsRibbon1138262_0_blog" class="section vpx-ribbon vpx-faqsRibbon _blog vpx-has-padding-top-200 vpx-has-padding-bottom-200">
<div class="container">
<div class="">
<div class="columns is-centered has-margin-bottom-150">
<div class="column is-10 has-text-centered">
<h3 class="vpx-display is-size-2 has-text-primary"><strong>Frequently Asked Questions</strong></h3>
</div>
</div>
<faq-component inline-template>
<div
itemscope itemprop="mainEntity"
itemtype="https://schema.org/Question"
class="has-border-top"
:class="{ 'has-background-light': isOpen }"
>
<div class="has-padding-x-100 has-padding-y-50">
<div @click="isOpen = !isOpen" aria-controls="faqContent 1138263" class="columns is-mobile is-vcentered has-content-justified-between has-margin-y-0 has-cursor-pointer">
<div class="column">
<h3 itemprop="name" class="vpx-paragraph is-size-4 vpx-weight-medium has-text-primary"><strong>What are the different types of lists that can be created using HTML?</strong></h3>
</div>
<div class="column is-narrow">
<div v-if="isOpen">
<span class="icon has-text-primary">
<i class="fas fa-times-circle"></i>
</span>
</div>
<div v-else>
<span class="icon has-text-primary">
<i class="fas fa-plus-circle"></i>
</span>
</div>
</div>
</div>
<b-collapse
aria-id="faqContent 1138263"
:open.sync="isOpen"
>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="content has-margin-bottom-75 has-text-grey">
<div itemprop="text">
<p>HTML provides two main types of lists: unordered lists <code>(<ul>)</code> and ordered lists <code>(<ol>)</code>. Unordered lists display list items with bullet points, while ordered lists display list items with numbers or letters. Additionally, nested lists can be created by placing a list inside another list.</p>
</div>
</div>
</b-collapse>
</div>
</div>
</faq-component>
<faq-component inline-template>
<div
itemscope itemprop="mainEntity"
itemtype="https://schema.org/Question"
class="has-border-top"
:class="{ 'has-background-light': isOpen }"
>
<div class="has-padding-x-100 has-padding-y-50">
<div @click="isOpen = !isOpen" aria-controls="faqContent 1138265" class="columns is-mobile is-vcentered has-content-justified-between has-margin-y-0 has-cursor-pointer">
<div class="column">
<h3 itemprop="name" class="vpx-paragraph is-size-4 vpx-weight-medium has-text-primary"><strong>How do I use div and span tags in HTML?</strong></h3>
</div>
<div class="column is-narrow">
<div v-if="isOpen">
<span class="icon has-text-primary">
<i class="fas fa-times-circle"></i>
</span>
</div>
<div v-else>
<span class="icon has-text-primary">
<i class="fas fa-plus-circle"></i>
</span>
</div>
</div>
</div>
<b-collapse
aria-id="faqContent 1138265"
:open.sync="isOpen"
>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="content has-margin-bottom-75 has-text-grey">
<div itemprop="text">
<p>The <code><div></code> and <code><span></code> tags are used for grouping elements and applying styles. The <code><div></code> tag is a block-level element used for grouping sections of content, while the <code><span></code> tag is an inline element used for grouping smaller portions of text or elements. You can apply CSS classes or IDs to style or manipulate these elements.</p>
</div>
</div>
</b-collapse>
</div>
</div>
</faq-component>
<faq-component inline-template>
<div
itemscope itemprop="mainEntity"
itemtype="https://schema.org/Question"
class="has-border-top"
:class="{ 'has-background-light': isOpen }"
>
<div class="has-padding-x-100 has-padding-y-50">
<div @click="isOpen = !isOpen" aria-controls="faqContent 1138267" class="columns is-mobile is-vcentered has-content-justified-between has-margin-y-0 has-cursor-pointer">
<div class="column">
<h3 itemprop="name" class="vpx-paragraph is-size-4 vpx-weight-medium has-text-primary"><strong>How can I add multimedia content, such as audio and video, in my HTML page?</strong></h3>
</div>
<div class="column is-narrow">
<div v-if="isOpen">
<span class="icon has-text-primary">
<i class="fas fa-times-circle"></i>
</span>
</div>
<div v-else>
<span class="icon has-text-primary">
<i class="fas fa-plus-circle"></i>
</span>
</div>
</div>
</div>
<b-collapse
aria-id="faqContent 1138267"
:open.sync="isOpen"
>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="content has-margin-bottom-75 has-text-grey">
<div itemprop="text">
<p>To add multimedia content in HTML, you can use the <code><audio></code> and <code><video></code> tags. The src attribute specifies the URL of the audio or <a href="https://verpex.com/blog/wordpress-hosting/how-to-embed-a-youtube-video-in-wordpress">video</a> file, while additional attributes control playback options, appearance, and accessibility. Here is an example of adding a video:
html</p>
<p><code><video src="video.mp4" controls></video></code></p>
</div>
</div>
</b-collapse>
</div>
</div>
</faq-component>
<faq-component inline-template>
<div
itemscope itemprop="mainEntity"
itemtype="https://schema.org/Question"
class="has-border-top"
:class="{ 'has-background-light': isOpen }"
>
<div class="has-padding-x-100 has-padding-y-50">
<div @click="isOpen = !isOpen" aria-controls="faqContent 1138269" class="columns is-mobile is-vcentered has-content-justified-between has-margin-y-0 has-cursor-pointer">
<div class="column">
<h3 itemprop="name" class="vpx-paragraph is-size-4 vpx-weight-medium has-text-primary"><strong>What are HTML entities and how are they used?</strong></h3>
</div>
<div class="column is-narrow">
<div v-if="isOpen">
<span class="icon has-text-primary">
<i class="fas fa-times-circle"></i>
</span>
</div>
<div v-else>
<span class="icon has-text-primary">
<i class="fas fa-plus-circle"></i>
</span>
</div>
</div>
</div>
<b-collapse
aria-id="faqContent 1138269"
:open.sync="isOpen"
>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="content has-margin-bottom-75 has-text-grey">
<div itemprop="text">
<p>HTML entities are special character codes used to represent characters that have special meanings in HTML. For example, the <code><</code> entity represents the less-than symbol <code>(<)</code>, and & represents the ampersand <code>(&)</code>. Entities are useful when you need to display reserved characters, symbols, or characters with special encoding. For example:
html</p>
<pre><code><p>< represents less than</p>
<p>& represents ampersand</p>
</code></pre>
</div>
</div>
</b-collapse>
</div>
</div>
</faq-component></div>
</div>
</div>
<div class="section has-padding-y-200">
<div class="vpx-bioContainer has-rounded-border has-padding-150 has-margin-bottom-100 has-background-light" itemprop="author" itemscope itemtype="https://schema.org/Person">
<div class="columns is-mobile has-margin-bottom-0">
<div class="column is-narrow vpx-lazyload-rounded vpx-avatar-container">
<figure class="image is-96x96">
<picture><source
type="image/webp"
class="vpx-roundedAvatar is-rounded lazyload"
width="96" height="96"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/avatars/transforms/_170x170_crop_center-center_82_line/verpex-talk-picture-of-Yetunde2.jpg.webp?v=1682674932 170w, https://dc47ezw0257n1.cloudfront.net/uploads/images/avatars/transforms/_260x260_crop_center-center_82_line/565119/verpex-talk-picture-of-Yetunde2.png.webp?v=1682674932 260w"
alt="Yetunde Salami"
itemprop="image"
/> <img
class="vpx-roundedAvatar is-rounded lazyload"
width="96" height="96"
data-src="https://dc47ezw0257n1.cloudfront.net/uploads/images/avatars/verpex-talk-picture-of-Yetunde2.jpg?v=1677665037"
alt="Yetunde Salami"
onerror="this.onerror = null;this.parentNode.children[0].srcset = this.parentNode.children[1].srcset = this.src;"
itemprop="image"
/>
</picture>
</figure>
</div>
<div class="column">
<div class="vpx-authorName">
<span class="vpx-paragraph is-size-5 is-inline-block">About the Author</span>
<h5 class="vpx-paragraph is-size-4 has-text-primary" itemprop="name">Yetunde Salami</h5>
<div class="is-flex has-margin-left-25 has-margin-top-50">
<div>
<a href="https://www.linkedin.com/in/yetunde-salami/" target="_blank" class="is-inline-block" itemprop="url">
<span class="icon has-text-primary">
<i class="fab fa-linkedin fa-2x"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div><p class="vpx-paragraph is-size-5 is-hidden-desktop">
<show-more-component
id="0"
text="Yetunde Salami is a seasoned technical writer with expertise in the hosting industry. With 8 years of experience in the field, she has a deep understanding of complex technical concepts and the ability to communicate them clearly and concisely to a wide range of audiences. At Verpex Hosting, she is responsible for writing blog posts, knowledgebase articles, and other resources that help customers understand and use the company's products and services. When she is not writing, Yetunde is an avid reader of romance novels and enjoys fine dining."
excerpt-length="200"
style-classes="is-size-5"
></show-more-component>
</p>
<p class="vpx-paragraph is-size-5 is-hidden-touch" itemprop="description">Yetunde Salami is a seasoned technical writer with expertise in the hosting industry. With 8 years of experience in the field, she has a deep understanding of complex technical concepts and the ability to communicate them clearly and concisely to a wide range of audiences. At Verpex Hosting, she is responsible for writing blog posts, knowledgebase articles, and other resources that help customers understand and use the company's products and services. When she is not writing, Yetunde is an avid reader of romance novels and enjoys fine dining.</p>
<a class="is-inline-block has-margin-top-100" href="https://verpex.com/blog/author/yetunde-salami" itemprop="url"><span class="is-size-5 is-uppercase">View all posts by Yetunde Salami</span></a>
</div>
<div class="has-padding-150"><div id="disqus_thread"></div>
<script data-cfasync="false" type="text/javascript">
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
if (typeof disqus_config !== 'undefined') {
var _old_disqus_config = disqus_config;
}
var disqus_config = function() {
if (typeof _old_disqus_config !== 'undefined') {
_old_disqus_config.apply(this);
}
this.page.url = 'https://verpex.com/blog/website-tips/basic-html-codes-for-websites';
this.page.identifier = 'basic-html-codes-for-websites';
this.page.title = 'Basic HTML Codes for Websites';
this.page.category_id = '';
this.language = '';
};
// Lazy load the Disqus JavaScript as per https://www.samclarke.com/lazy-loading-disqus/
(function (doc, win) {
var script;
var isLoaded;
var element;
var eventCallback;
var threashold = win.innerHeight * .75;
if (element) {
addEventListener('scroll', eventCallback);
addEventListener('resize', eventCallback);
}
function throttle(fn, delay) {
var lastCalled = 0;
var timeout;
return function () {
var now = +new Date;
var remaining = delay - (now - lastCalled);
var args = arguments;
clearTimeout(timeout);
if (remaining > 0) {
timeout = setTimeout(function () {
lastCalled = now;
fn.apply(null, args);
}, remaining);
} else {
lastCalled = now;
fn.apply(null, args);
}
};
}
function isPassedThreashold() {
var top = element.getBoundingClientRect().top;
return top - win.innerHeight <= threashold;
}
function lazyLoad() {
if (!isLoaded && isPassedThreashold()) {
removeEventListener('scroll', eventCallback);
removeEventListener('resize', eventCallback);
script = doc.createElement('script');
script.async = true;
script.src = '//https-verpex-com-1.disqus.com/embed.js'; // IMPORTANT: Replace EXAMPLE with your forum shortname!
script.setAttribute('data-timestamp', +new Date());
element.innerHTML = 'Loading comments...';
(doc.head || doc.body).appendChild(script);
isLoaded = true;
}
}
win.disqusLazy = function (opts) {
opts = opts || {};
eventCallback = throttle(lazyLoad, opts.throttle || 100);
element = opts.element || doc.getElementById('disqus_thread');
threashold = opts.threashold || win.innerHeight * .75;
if (element) {
addEventListener('scroll', eventCallback);
addEventListener('resize', eventCallback);
}
};
}(document, window));
disqusLazy();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
</div>
</article>
</div>
<div class="column is-3 is-hidden-mobile has-padding-bottom-400">
<div class="vpx-sticky is-clipped">
<div class="has-padding-y-100">
<h4 class="vpx-display is-size-5 has-text-primary has-margin-bottom-50"><strong>On This Page</strong></h4>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_1" target="_self" title="What is HTML?" class="vpx-label is-size-6 is-block has-margin-bottom-50">What is HTML?</a>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_3" target="_self" title="Importance of HTML" class="vpx-label is-size-6 is-block has-margin-bottom-50">Importance of HTML</a>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_6" target="_self" title="Basic HTML Structure" class="vpx-label is-size-6 is-block has-margin-bottom-50">Basic HTML Structure</a>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_10" target="_self" title="Essential HTML Tags" class="vpx-label is-size-6 is-block has-margin-bottom-50">Essential HTML Tags</a>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_12" target="_self" title="Styling HTML with CSS" class="vpx-label is-size-6 is-block has-margin-bottom-50">Styling HTML with CSS</a>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_16" target="_self" title="Best Practices in HTML Coding" class="vpx-label is-size-6 is-block has-margin-bottom-50">Best Practices in HTML Coding</a>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_18" target="_self" title="Importance of Comments" class="vpx-label is-size-6 is-block has-margin-bottom-50">Importance of Comments</a>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_20" target="_self" title="Proper Tag Closure" class="vpx-label is-size-6 is-block has-margin-bottom-50">Proper Tag Closure</a>
<a href="#" @click="scrollPageLink($event);" data-scroll-identifier="blogSection_23" target="_self" title="Conclusion" class="vpx-label is-size-6 is-block has-margin-bottom-50">Conclusion</a>
</div>
<div class="vpx-discountTicket has-rounded-border has-background-secondary">
<div class="is-relative is-zIndex-1">
<div class="vpx-discountTicket-leftColumn">
<div class="vpx-discountTicket-content"><picture><source
type="image/webp"
class="image lazyload"
width="230" height="100"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/discounts/transform/_325x87_crop_center-center_82_line/20-percent-off.png.webp?v=1675270525 325w"
alt="Discount"
/><img
class="image lazyload"
width="230" height="100"
data-src="https://dc47ezw0257n1.cloudfront.net/uploads/images/discounts/transform/_325x87_crop_center-center_82_line/20-percent-off.png?v=1675270525 325w"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/discounts/transform/_325x87_crop_center-center_82_line/20-percent-off.png?v=1675270525 325w"
alt="Discount"
onerror="this.onerror = null;this.parentNode.children[0].srcset = this.parentNode.children[1].srcset = this.src;"
/>
</picture>
<div class="vpx-paragraph is-size-6 vpx-discountTicket-bar content has-rounded-border has-text-white has-padding-75 has-margin-top-100"><p>💸 20% OFF ALL VERPEX CLOUD WEB HOSTING PLANS</p>
</div>
</div>
</div>
<div class="has-text-white has-text-centered">
<div class="vpx-discountTicket-content">
<div>
<p class="vpx-paragraph is-size-5">with the discount code</p>
<div class="vpx-discountTicket-code has-rounded-border has-padding-y-50 has-padding-x-100 has-margin-y-100">
<h4 class="vpx-paragraph is-size-4 is-uppercase">AWESOME</h4>
</div>
</div>
<a href="https://verpex.com/cloud-web-hosting" target="_blank" title="Save Now" class="button is-fullwidth-mobile is-rounded is-stretched is-medium "><span class="is-size-4">Save Now</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section vpx-watermark is-relative has-background-secondary-lighter has-padding-y-250">
<div class="container">
<div class="columns">
<div class="column is-3">
<p class="has-text-primary is-size-5 is-uppercase has-margin-bottom-25">Popular Articles</p>
<h3 class="has-text-primary is-size-4"><strong>You may also like</strong></h3>
</div>
<div class="column is-9">
<div class="columns is-multiline">
<div class="column is-8-tablet is-4-desktop vpx-blogExceptCardContainer">
<div class="vpx-blogExceptCard vpx-roundedCorners">
<a href="https://verpex.com/blog/website-tips/css-shapes-the-ribbon" class="has-text-dark has-background-white">
<div class="is-space-between is-full-height">
<div>
<div class="card-image is-relative">
<figure class="image">
<picture><source
type="image/webp"
class="lazyload"
width="326" height="184"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/transforms/_326x183_crop_center-center_82_line/ribbon-shape.jpg.webp?v=1694690939 326w"
alt="CSS Shapes: The Ribbon"
/><img
class="lazyload"
width="326" height="184"
data-src="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/transforms/_326x183_crop_center-center_82_line/ribbon-shape.jpg?v=1694690939 326w"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/transforms/_326x183_crop_center-center_82_line/ribbon-shape.jpg?v=1694690939 326w"
alt="CSS Shapes: The Ribbon"
/>
</picture>
</figure>
</div>
<div class="card-content content">
<h4 class="has-text-weight-bold is-size-5">CSS Shapes: The Ribbon</h4>
<p class="is-size-6">Create a CSS-only ribbon shape using modern CSS tricks</p>
</div>
</div>
<div class="card-date content">
<div class="is-flex has-content-justified-between has-items-aligned-center">
<div>
<span class="has-text-grey is-size-6">Temani Afif</span>
</div>
<div>
<time class="has-text-grey is-size-6" datetime="September 16, 2023">September 16, 2023</time>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="column is-8-tablet is-4-desktop vpx-blogExceptCardContainer">
<div class="vpx-blogExceptCard vpx-roundedCorners">
<a href="https://verpex.com/blog/website-tips/what-is-serverless-architecture" class="has-text-dark has-background-white">
<div class="is-space-between is-full-height">
<div>
<div class="card-image is-relative">
<figure class="image">
<picture><source
type="image/webp"
class="lazyload"
width="326" height="184"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/transforms/_326x183_crop_center-center_82_line/What-is-Serverless-Architecture.webp.webp?v=1694784234 326w"
alt="What is Serverless Architecture?"
/><img
class="lazyload"
width="326" height="184"
data-src="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/What-is-Serverless-Architecture.webp?v=1694784225"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/What-is-Serverless-Architecture.webp?v=1694784225"
alt="What is Serverless Architecture?"
/>
</picture>
</figure>
</div>
<div class="card-content content">
<h4 class="has-text-weight-bold is-size-5">What is Serverless Architecture?</h4>
<p class="is-size-6">Interested in serverless architecture for application develo…</p>
</div>
</div>
<div class="card-date content">
<div class="is-flex has-content-justified-between has-items-aligned-center">
<div>
<span class="has-text-grey is-size-6">Brenda Barron</span>
</div>
<div>
<time class="has-text-grey is-size-6" datetime="September 15, 2023">September 15, 2023</time>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="column is-8-tablet is-4-desktop vpx-blogExceptCardContainer">
<div class="vpx-blogExceptCard vpx-roundedCorners">
<a href="https://verpex.com/blog/website-tips/comprehensive-beaver-builder-review" class="has-text-dark has-background-white">
<div class="is-space-between is-full-height">
<div>
<div class="card-image is-relative">
<figure class="image">
<picture><source
type="image/webp"
class="lazyload"
width="326" height="184"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/transforms/_326x183_crop_center-center_82_line/Comprehensive-Beaver-Builder-Review.webp.webp?v=1694441395 326w"
alt="Comprehensive Beaver Builder Review"
/><img
class="lazyload"
width="326" height="184"
data-src="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/Comprehensive-Beaver-Builder-Review.webp?v=1694441392"
data-srcset="https://dc47ezw0257n1.cloudfront.net/uploads/images/blog/Comprehensive-Beaver-Builder-Review.webp?v=1694441392"
alt="Comprehensive Beaver Builder Review"
/>
</picture>
</figure>
</div>
<div class="card-content content">
<h4 class="has-text-weight-bold is-size-5">Comprehensive Beaver Builder Review</h4>
<p class="is-size-6">In the market for a WordPress page builder? Learn about Beav…</p>
</div>
</div>
<div class="card-date content">
<div class="is-flex has-content-justified-between has-items-aligned-center">
<div>
<span class="has-text-grey is-size-6">Nile Flores</span>
</div>
<div>
<time class="has-text-grey is-size-6" datetime="September 11, 2023">September 11, 2023</time>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer-component inline-template>
<footer>
<div class="footer vpx-footer has-background-primary has-padding-y-200 is-zIndex-1 is-relative">
<div class="container">
<div class="columns">
<div class="column is-4">
<div class="has-margin-bottom-100">
<a href="https://verpex.com">
<img class="lazyload" width="124" height="36" data-src="/assets/interface/verpex-logo-white.svg" alt="Verpex" width="124" height="35" />
</a>
</div>
<div class="columns is-multiline is-mobile is-vcentered has-padding-top-150">
<div class="column is-6-mobile is-narrow-tablet">
<div class="vpx-paymentProvider-block is-flex has-items-aligned-center">
<img class="lazyload" width="60" height="40" alt="Visa" data-src="/assets/interface/payment-providers/visa.svg" />
</div>
</div>
<div class="column is-6-mobile is-narrow-tablet">
<div class="vpx-paymentProvider-block is-flex has-items-aligned-center">
<img class="lazyload" width="60" height="40" alt="Mastercard" data-src="/assets/interface/payment-providers/mastercard.svg" />
</div>
</div>
<div class="column is-6-mobile is-narrow-tablet">
<div class="vpx-paymentProvider-block is-flex has-items-aligned-center">
<img class="lazyload" width="60" height="40" alt="Discover" data-src="/assets/interface/payment-providers/discover.svg" />
</div>
</div>
<div class="column is-6-mobile is-narrow-tablet">
<div class="vpx-paymentProvider-block is-flex has-items-aligned-center">
<img class="lazyload" width="60" height="40" alt="Amex" data-src="/assets/interface/payment-providers/amex.svg" />
</div>
</div>
<div class="column is-6-mobile is-narrow-tablet">
<div class="vpx-paymentProvider-block is-flex has-items-aligned-center">
<img class="lazyload" width="60" height="40" alt="Jcb" data-src="/assets/interface/payment-providers/jcb.svg" />
</div>
</div>
<div class="column is-6-mobile is-narrow-tablet">
<div class="vpx-paymentProvider-block is-flex has-items-aligned-center">
<img class="lazyload" width="60" height="40" alt="Maestro" data-src="/assets/interface/payment-providers/maestro.svg" />
</div>
</div>
<div class="column is-6-mobile is-narrow-tablet">
<div class="vpx-paymentProvider-block is-flex has-items-aligned-center">
<img class="lazyload" width="60" height="40" alt="Diners Club International" data-src="/assets/interface/payment-providers/diners-club-international.svg" />
</div>
</div>
<div class="column is-6-mobile is-narrow-tablet">
<div class="vpx-paymentProvider-block is-flex has-items-aligned-center">
<img class="lazyload" width="60" height="40" alt="Paypal" data-src="/assets/interface/payment-providers/paypal.svg" />
</div>
</div>
</div>
</div>
<div class="column is-8">
<div class="columns is-mobile is-multiline">
<div class="column is-6-mobile is-3-tablet">
<p class="vpx-footerHeader has-text-white vpx-label is-size-4"><strong>Product</strong></p>
<p><a href="https://verpex.com/unlimited-reseller-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Reseller Hosting</a></p>
<p><a href="https://verpex.com/cloud-web-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Cloud Web Hosting</a></p>
<p><a href="https://verpex.com/wordpress-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Wordpress Hosting</a></p>
<p><a href="https://verpex.com/managed-cloud-servers" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Managed Cloud Servers</a></p>
<p><a href="https://verpex.com/managed-wordpress" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Managed WordPress Servers</a></p>
<p><a href="https://verpex.com/magento-servers-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Managed Magento Servers</a></p>
<p><a href="https://verpex.com/lms-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">LMS Hosting</a></p>
<p><a href="https://verpex.com/saas-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">SaaS Hosting</a></p>
<p><a href="https://verpex.com/crm-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">CRM Hosting</a></p>
<p><a href="https://verpex.com/social-network-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Social Media Hosting</a></p>
<p><a href="https://verpex.com/developers-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Web Development Hosting</a></p>
<p><a href="https://verpex.com/ecommerce-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">eCommerce Hosting</a></p>
<p><a href="https://verpex.com/woocommerce-hosting" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">WooCommerce Hosting</a></p>
</div>
<div class="column is-6-mobile is-3-tablet">
<p class="vpx-footerHeader has-text-white vpx-label is-size-4"><strong>Domain</strong></p>
<p><a href="https://verpex.com/domain-registration" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Domain Registration</a></p>
<p><a href="https://verpex.com/domain-transfer" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Domain Transfer</a></p>
</div>
<div class="column is-6-mobile is-3-tablet">
<p class="vpx-footerHeader has-text-white vpx-label is-size-4"><strong>Information</strong></p>
<p><a href="https://verpex.com/about" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">About Verpex</a></p>
<p><a href="https://verpex.com/blog" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Blog</a></p>
<p><a href="https://kb.verpex.com/" target="_blank" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Knowledge Base</a></p>
<p><a href="https://verpex.com/our-technology" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Our Technology</a></p>
<p><a href="https://verpex.com/pricing" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Pricing</a></p>
<p><a href="https://affiliates.verpex.com/affiliates/" target="_blank" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Affiliate Program</a></p>
</div>
<div class="column is-6-mobile is-3-tablet">
<p class="vpx-footerHeader has-text-white vpx-label is-size-4"><strong>Legal</strong></p>
<p><a href="https://verpex.com/privacy-policy" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Privacy Policy</a></p>
<p><a href="https://verpex.com/terms-conditions" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Terms & Conditions</a></p>
<p><a href="https://verpex.com/sitemap" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Sitemap</a></p>
<p><a href="javascript:void(0)" @click="triggerGDPRModal()" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Privacy Manager</a></p>
<p><a href="https://verpex.com/affiliates-terms-conditions" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Affiliates Terms & Conditions</a></p>
<p><a href="https://verpex.com/abuse" target="_self" class="is-inline-block has-text-white has-margin-top-50 vpx-label is-size-5">Abuse</a></p>
</div>
</div>
</div>
</div>
<div class="has-text-centered has-margin-bottom-150">
<a class="is-inline-block" href="https://www.facebook.com/VerpexHosting/" target="_blank"><img class="lazyload has-margin-right-25" width="35" height="35" alt="Facebook" data-src="/assets/interface/social-networks/facebook.svg" /></a>
<a class="is-inline-block" href="https://www.youtube.com/@VerpexHosting" target="_blank"><img class="lazyload has-margin-right-25" width="35" height="35" alt="Youtube" data-src="/assets/interface/social-networks/youtube.svg" /></a>
<a class="is-inline-block" href="https://www.linkedin.com/company/verpexhosting/" target="_blank"><img class="lazyload has-margin-right-25" width="35" height="35" alt="LinkedIn" data-src="/assets/interface/social-networks/linkedin.svg" /></a>
<a class="is-inline-block" href="https://twitter.com/verpexhosting" target="_blank"><img class="lazyload" width="35" height="35" alt="Twitter" data-src="/assets/interface/social-networks/twitter.svg" /></a>
</div>
<div class="vpx-legal has-padding-top-150 is-block-mobile is-flex-tablet has-content-justified-between">
<p class="vpx-legal-text vpx-label is-size-6 has-text-white has-text-centered-mobile">©2019-2023 Verpex hosting LTD. All Rights Reserved.</p>
<div class="vpx-legal-text has-text-white vpx-basic-line-height">
<a class="has-text-white vpx-label is-size-6" href="https://verpex.com/sitemap">Useful Links</a> |
<a class="has-text-white vpx-label is-size-6" href="https://verpex.com/terms-conditions">Terms of Service</a> |
<a class="has-text-white vpx-label is-size-6" href="https://verpex.com/privacy-policy">Privacy</a> |
<a class="has-text-white vpx-label is-size-6" href="javascript:void(0)" @click="triggerGDPRModal()">Cookies</a> |
<a class="has-text-white vpx-label is-size-6" href="https://verpex.com/company-details">Company Details</a> |
<a class="has-text-white vpx-label is-size-6" target="_blank" href="https://www.icann.org/resources/pages/responsibilities-2014-03-14-en">Registrants R & R</a>
</div>
<p class="vpx-legal-text vpx-label is-size-6 has-text-white has-text-centered-mobile">Prices are listed without VAT</p>
</div>
</div>
</div>
</footer>
</footer-component> <welcome-component inline-template>
<div class="modal vpx-welcomeModal" :class="{ 'is-active': showModal }">
<div class="modal-background" @click="showModal = !showModal"></div>
<div class="modal-card">
<section class="modal-card-body">
<div class="container">
<div>
<img class="has-margin-bottom-50" width="120" height="28" src="/assets/interface/verpex-logo-color.svg" alt="Verpex" />
<h3 class="vpx-display is-size-2 has-text-primary has-margin-bottom-100"><strong>Welcome all {{ brandName }} customers</strong></h3>
<p class="vpx-paragraph is-size-5 has-text-dark has-margin-bottom-100">We are delighted to welcome {{ brandName }} customers to the Verpex family. Existing {{ brandName }} users can log in to the new Verpex client area to manage their services with their previous credentials.</p>
<button @click="showModal = !showModal" class="button is-rounded is-fullwidth-mobile is-medium is-primary"><span class="is-size-4">Get Started</span></a>
</div>
</div>
</section>
</div>
</div>
</welcome-component><a id="jivo-live-chat-toggle" class="jivo-live-chat" href="javascript:void(0);" @click="triggerLiveChat()"><img alt="Jivo Live Chat" width="75" height="75" src="/assets/interface/live-chat.svg" /></a> </div>
<iframe
id="moonshot_vt"
title="moonshot_vt"
width="0"
height="0"
>
</iframe><script type="module" src="/assets/js/vpx.main.3c8fa300e96dae194185.js"></script>
<script src="/assets/js/vpx.main.3c8fa300e96dae194185.js" nomodule></script>
<script type="module" src="/assets/js/vpx.vendors.7f2f1a4efeb3928eb424.js"></script>
<script src="/assets/js/vpx.vendors.7f2f1a4efeb3928eb424.js" nomodule></script>
</body>
</html>
