Edit Translation

Intro to HTML

HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content.

What is HTML?

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.

HTML offers authors the ability to:

  • Publish on-line files with headings, text, tables, lists, photos, etc.
  • Retrieve on-line data through hypertext links, at the click on of a button.
  • Design types for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
  • Include spread-sheets, video clips, sound clips, and different functions directly in their documents.

The Anatomy of HTML

<p>Life is good</p>

  • Opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This is where the element begins or starts to take effect — in this case where the paragraph begins.
  • Closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
  • Content: This is the content of the element, which in this case, is just text.
  • Element: The opening tag, the closing tag, and the content together comprise the element.


HTML document includes tags. They surround content and apply meaning to it.

<!DOCTYPE html>
This is my first web page

The purpose of HTML is to apply meaning, not presentation

  • First line on the top, <!DOCTYPE html> : is a document type declaration and it lets the browser know which flavor of HTML you’re using (HTML5, in this case). It’s very important to stick this in – If you don’t, browsers will assume you don’t really know what you’re doing and act in a very peculiar way.
  • <html> is the opening tag : it kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document.
  • <body> and </body> : is the main content of the document that will appear in the browser window.
  • Closing tags: The </body> and </html> put a close to their respective elements (more on elements in a moment).

Tags that do not wrap around content will close themselves, and will not need a closing tag.

The line-break tag for example, looks like this : <br> – a line break doesn’t hold any content so the tag merrily sits by its lonely self.

But remember: All tags with content between them should be closed, in the format of opening tag → content → closing tag. It isn’t, strictly speaking, always a requirement, but it’s a convention we’re using in these tutorials because it’s good practice that results in cleaner, easier to understand code.

You might come across “self-closing” tags, whereby a br tag, for example, will look like “<br />” instead of simply “<br>”. This is a remnant of XHTML, a form of HTML based on another markup language called XML.



Elements can have attributes


Contain extra information about the element that you don’t want to appear in the actual content.

3 MUSTS for any attribute:

  1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
  2. The attribute name followed by an equal sign.
  3. The attribute value wrapped by opening and closing quotation marks.

Nesting elements

Elements inside other elements. this is called nesting.

If we wanted to state that life is so good, we could wrap the word “so” in a <strong> element, so the word is to be strongly emphasized:

<p>Life is <strong>so</strong> good. </p>

Empty elements

Elements that have no content.

Take the <img> element:

<img src="images/site-icon.png" alt="My site icon">

This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn’t wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.



  • Hyperlinks are clickable.
  • Hyperlinks can be absolute or relative.
  • Hyperlinks may be inbound or outbound.
  • Hyperlinks can be made with text or images.

<a href=”https://osama.fr”>Osama</a>

which you would see as ” Osama

  • a = Anchor.
    It begins the link to another page.
  • HREF = Hypertext Reference.
  • HREF >> URL is being linked to.
  • WEB ADDRESS (URL) is surrounded by quotation marks. Also notice that the address has an equal sign in front of it.
  • ANCHOR TEXT is between the <a> and </a>.
    It is where you write the text you want to appear on the web page.


To link a document or page in the WEB ADDRESS (URL), You can use Absolute or Relative Links to help the browsers understand where you want the link to go to.


A hyperlink that uses an absolute address contains an entire URL. To link to a page that is on another WEBSITE, you have to use an absolute link. It includes:

  1. The protocol: http
  2. The host name
  3. The exact path to the file.

Relative links simply show the path from the current file to the linked file. With a relative link, the browser already knows where the current document is located. If you link to another document in the same directory, you do not need to write out the full URL. Only the file name is necessary.




Link from another website to your website.


Links created on your website directing user to another website.

Image Link

A hyperlink can be an image instead of text. This is simply done by surrounding an image tag with the anchor tags (<a> </a>) in the same way you would surround text.

<img src="images/site-logo.png" alt="My site logo">

It embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

Also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image.

Text Markups

HTML elements for marking up the text.


Heading elements allow you to specify that certain parts of your content are headings — or subheadings. Just like a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1>–<h6>, although, commonly, we use 3 to 4 at most:

<h1>My main title</h1>
<h2>My top-level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Note: You’ll see that your heading level 1 has an implicit style.

Don’t use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO.

Try to create a meaningful sequence of headings on your pages, without skipping levels.


<p> elements are for containing paragraphs of text.

<p>This is a single paragraph</p>


HTML has special elements for lists. Marking up lists always consists of at least 2 elements:

  • Ordered
  • Unordered
Unordered lists

Lists where the order of the items doesn’t matter, such as a shopping list. These are wrapped in a <ul> element.

Ordered lists

are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.
Each item inside the lists is put inside an <li> (list item) element.

For example, look at the following paragraph:

<p>eLamsa services includes design, development and consulting. </p>

We could modify it to be a list

<p>eLamsa Services:</p>

Osama | Artist / Web designer

Osama | Artist / Web designer


Artist/Designer A self-taught artist. Painter, designer, art director and activist. His art focuses on human feelings and sufferings around the globe.


Submit a Comment

Your email address will not be published.

Recent Comments

    [et_pb_wc_related_products _builder_version=”4.9.0″ _module_preset=”default” title_text_color=”#E09900″ title_font_size=”24px” title_letter_spacing=”1px” rating_text_color=”#E09900″ rating_letter_spacing=”4px” product_title_text_color=”#206676″ product_title_font_size=”18px” product_title_line_height=”1.5em” price_text_color=”#206676″ price_letter_spacing=”1px” custom_padding=”0px|10px||10px|false|true” border_width_all_image=”5px” border_color_all_image=”#206676″ border_style_all_image=”double” box_shadow_style_image=”preset3″ box_shadow_vertical_image=”16px” box_shadow_blur_image=”4px” box_shadow_spread_image=”-10px” global_colors_info=”{}” _i=”0″ _address=”″ /]

    Pin It on Pinterest

    Share This