DEV Community

Sheikh Mohammad Nazmul H.
Sheikh Mohammad Nazmul H.

Posted on

HTML Overview: Basic HTML concepts

What Is HTML

H T M L
Hyper Text Markup Language
Reference/Link Data/Information Predefined/ Marked Communication

Today we are learning the tags

Tag Name What is it used for? Example
Defines a paragraph.

This is some text in a paragraph.
used to embed an image in an HTML page. Girl in a jacket
defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
HTML Elements Reference
|
| | represents the root of an HTML document. | <!DOCTYPE html> |
|
| inserts a single line break. |

To force
line breaks
in a text,
use the br
element.

|
| | inline container used to mark up a part of a text, or a part of a document. |

My mother has blue eyes.

|
|
  • | defines a list item. The tag is used inside ordered lists (
      ) and unordered lists (
        |
        1. Coffee
        2. Tea
        3. Milk
        | |
          | defines an unordered (bulleted) list. |
          • Coffee
          • Tea
          • Milk
          | |
            | defines an ordered list. An ordered list can be numerical or alphabetical. |
            1. Coffee
            2. Tea
            3. Milk
            | | | defines a hyperlink, which is used to link from one page to another. | Visit my website |

            HTML Structure definition

            • Doctype: give information to the browser about the document type and version.
            • HTML: represents the root of an HTML document. It is a container for all the html elements except. for the Doctype.
            • Head: a container for metadata and is placed between the tag and the tag.
            • Meta: defines metadata about an HTML document. Metadata is data (information) about data.
            • Title: tag defines the title of the document.
            • body: caontins all the contens of an HTML document.
            • comment: a section of text that is not processed by the web browser. Comments are enclosed in <!— this is the comment—>

            2 types of HTML tags: block and inline

            List of block level elements:

            • p
            • h1, h2, h3, h4, h5, h6
            • ol, ul
            • pre
            • address
            • blockquote
            • dl
            • div
            • fieldset
            • form
            • hr
            • noscript
            • table

            List of inline elements:

            • b, big, i, small, tt
            • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
            • a, bdo, br, img, map, object, q, script, span, sub, sup
            • button, input, label, select, textarea

            Practice task

            Practice Task 1

            Create a basic HTML page structure with the doctype, html, head, meta, title and body tags

            The title will be "My Travel Blog"

            Add comments to the code to explain each section. For example, "this is the head section

            Practice Task 2

            Create a heading tag that will have the text "My

            Travel Blog"

            Format the text in your heading tag using italic

            Practice Task 3

            Create a div and inside the div create a paragraph.

            Write about your experience.

            Add a button having the text "Read More"

            Practice Task 4

            Create a span tag which will be outside the div. It will have the text "What I bought"

            Format the text in your span tag bold.

            Create an ordered list of things you bought from the place you visited

            Create another span tag with the text "My favorite food" and make it bold

            Create an unordered list of your favourite food you

            ate in that place

            Practice Task 5

            Insert an image of your favourite food using the img tag and add the src, alt, width, and height attributes to it.

            Practice Task 6

            Create a link to your favourite song you listened to while travelling using the anchor tag and add the href and target attributes to it. Copy the URL link from YouTube.

            Use line breaks
            where necessary

    •

    Top comments (0)