HTML In single Post.

Posted by admin at March 4, 2020

html - HTML In single Post.

Introduction to Basic HTML & HTML5

HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading, a paragraph, or a list.

HTML5 Basic structure.

HTML document within the html tags with the head and body elements. Any markup with information about your page would go into the head tag. Then any markup with the content of the page (what displays for a user) would go into the body tag.

Metadata elements, such as linkmetatitle, and style, typically go inside the head element.

Here’s an example of a page’s layout:

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
  </head>
  <body>
    <!-- page contents -->
  </body>
</html>

Heading

First, you’ll start by building a simple web page using HTML. You can edit code in your code editor, which is embedded into this web page.

Do you see the code in your code editor that says <h1>Hello</h1>? That’s an HTML element.

Most HTML elements have an opening tag and a closing tag.

Opening tags look like this:

<h1>

Closing tags look like this:

</h1>

The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.

This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3h4h5 and h6 elements to indicate different levels of subheadings.

Paragraph

p elements are the preferred element for paragraph text on websites. p is short for “paragraph”.

You can create a paragraph element like this:

<p>I'm a p tag!</p>

HTML5 Elements.

HTML5 introduces more descriptive HTML tags. These include mainheaderfooternavvideoarticlesection and others.

These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The main HTML5 tag helps search engines and other developers find the main content of your page.

Example usage, a main element with two child elements nested inside it:

<main> 
  <h1>Hello World</h1>
  <p>Hello Paragraph</p>
</main>

Image (img) tag.

You can add images to your website by using the img element, and point to a specific image’s URL using the src attribute.

An example of this would be:

<img src="https://www.your-image-source.com/your-image.jpg">

Note that img elements are self-closing.


Anchor (a) tag.

You can use a (anchor) elements to link to content outside of your web page.

a elements need a destination web address called an href attribute. They also need anchor text. Here’s an example:

<a href="https:example.org">this links to example.org</a>

List (ul) tag.

HTML has a special element for creating unordered lists, or bullet point style lists.

Unordered lists start with an opening <ul> element, followed by any number of <li> elements. Finally, unordered lists close with a </ul>

For example:

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

List (ol) tag.

HTML has another special element for creating ordered lists, or numbered lists.

Ordered lists start with an opening <ol> element, followed by any number of <li> elements. Finally, ordered lists are closed with the </ol> tag.

For example:

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

Input (input) tag.

input elements are a convenient way to get input from your user.

You can create a text input like this:

<input type="text" value="value">

Note that input elements are self-closing.

Radio button (input type=”radio”) tag.

You can use radio buttons for questions where you want the user to only give you one answer out of multiple options.

Radio buttons are a type of input.

<input type="radio" name="radio">Radio

Form (form) tag.

You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.

For example:

<form action="/url-where-you-want-to-submit-form-data"></form>

Button (button) tag.

Let’s add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form’s action attribute.

Here’s an example submit button:

<button type="submit">this button submits the form</button>


Comments

Write a Reply or Comment