مفهوم تگ در زبان HTML بررسی ساختار تگ در صفحه وب

[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” link_color=”” link_hover_color=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”30″ padding_right=”30″ padding_bottom=”” padding_left=”30″ gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ type=”legacy”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”true” min_height=”” hover_type=”none” link=”” border_sizes_top=”” border_sizes_bottom=”” border_sizes_left=”” border_sizes_right=”” type=”1_1″ first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” font_size=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” line_height=”” letter_spacing=”” text_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

مفهوم تگ در زبان HTML بررسی ساختار تگ در صفحه وب

در این مقاله از سایت آموزی قصد دارم، مفهوم تگ رو در زبان طراحی HTML براتون کامل شرح بدم.

اول باید بدونیم که تگ ها چه هستند؟ و چند نوع تگ داریم؟

در زبان طراحی HTML تگ ها برای کدنویسی المنت های مختلف کاربرد دارند.

دو نوع تگ در HTML داریم : ۱- تگ های باز (Opening Tag) و ۲- تگ های بسته (Closing Tag)

[/fusion_text][fusion_imageframe image_id=”14162″ max_width=”” style_type=”none” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”center” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”مفهوم تگ در زبان HTML بررسی ساختار تگ در صفحه وب – سایت آموزی” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://siteamoozi.com/wp-content/uploads/2017/07/HTML-TAG2.png[/fusion_imageframe][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”#f2f2f2″ background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”30PX” padding_bottom=”” padding_left=”30PX” type=”legacy”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”20pX” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_1″ first=”true”][fusion_text]

برخی المنت ها فقط دارای یک تگ باز هستند. یعنی فقط opening tag رو شامل می شوند.

اما برخی دیگر از elements (المنت ها) شامل هر دو تگ باز (Opening tag) و تگ بسته (Closing Tag) هستند.

حالا در مورد هر کدوم از انواع این تگ ها براتون توضیح میدم.

[/fusion_text][fusion_separator style_type=”shadow” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”” top_margin=”” bottom_margin=”” border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center” /][fusion_section_separator divider_type=”triangle” divider_position=”center” divider_candy=”bottom” icon=”” icon_color=”” bordersize=”” bordercolor=”#aaaaaa” backgroundcolor=”#b7b7b7″ hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” /][/fusion_builder_column][fusion_builder_column type=”1_2″ layout=”1_2″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_color=”” border_style=”solid” border_position=”all” padding_top=”0px” padding_right=”30PX” padding_bottom=”0px” padding_left=”0px” margin_top=”80PX” margin_bottom=”40px” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_2″ first=”true” spacing_right=””][fusion_imageframe image_id=”14175″ max_width=”” style_type=”none” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”center” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”تگ های هدینگ در زبان HTML” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]http://siteamoozi.com/wp-content/uploads/2017/07/HTML-TAG3.jpg[/fusion_imageframe][/fusion_builder_column][fusion_builder_column type=”1_2″ layout=”1_2″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_color=”” border_style=”solid” border_position=”all” padding_top=”0px” padding_right=”0px” padding_bottom=”0px” padding_left=”30PX” margin_top=”30PX” margin_bottom=”40px” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_2″ first=”false”][fusion_text]

مفهوم تگ باز ( Opening Tag ):

در تصویر مقابل ، یک تگ باز هدینگ ۱ رو ملاحظه می کنید. که با h1 نشان داده می شه.

همه تگ های باز مثل همین تگ هدینگ شامل یک هشتک باز (>) ، اسم تگ و یک هشتک بسته (<) هستند.

اسم تگ همان HTML ELEMENT نام داره.

و همانطور که در تصویر ملاحظه می کنید زاویه های چپ و راست شروع و خاتمه تگ هستند.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”#b6ff75″ background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” type=”legacy”][fusion_builder_row][fusion_builder_column type=”1_2″ layout=”1_2″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_color=”” border_style=”solid” border_position=”all” padding_top=”0px” padding_right=”30px” padding_bottom=”0px” padding_left=”0px” margin_top=”45PX” margin_bottom=”40px” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_2″ first=”true” spacing_right=””][fusion_text]

مفهوم تگ بسته ( Closing Tag ):

همانطور که در شکل مقابل هم ملاحظه می کنید ، تگ بسته هدینگ ۱ دارای ۴ بخش است.

همه تگ های بسته (Closing Tags) شامل یک هشتک یا زاویه باز (>) ، یک علامت اسلش (forward slash) ، اسم تگ و یک هشتک یا زاویه بسته (<) هستند.

تفاوت تگ های بسته با تگ های باز در HTML تنها در اضافه شدن علامت forward slash (/) قبل از اسم تگ (HTML ELEMENT) می باشد.

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_2″ layout=”1_2″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_color=”” border_style=”solid” border_position=”all” padding_top=”0px” padding_right=”0px” padding_bottom=”0px” padding_left=”30px” margin_top=”118px” margin_bottom=”40px” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_2″ first=”false”][fusion_imageframe image_id=”14200″ max_width=”” style_type=”none” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”center” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”تگ هدینگ در زبان HTML” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]http://siteamoozi.com/wp-content/uploads/2017/07/HTML-TAG4.jpg[/fusion_imageframe][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” type=”legacy”][fusion_builder_row][fusion_builder_column type=”1_2″ layout=”1_2″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_color=”” border_style=”solid” border_position=”all” padding_top=”0px” padding_right=”30px” padding_bottom=”0px” padding_left=”0px” margin_top=”50PX” margin_bottom=”40px” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_2″ first=”true” spacing_right=””][fusion_text]

حالا که با مفهوم تگ باز و تگ بسته در HTML آشنا شدید ، همانطور که در بالا اشاره کردم المنت ها در HTML دو دسته می شوند :

تگ هایی که فقط به صورت یک تگ تنها یا Self-Closing Tags هستند.
تگ هایی که دارای تگ باز و تگ بسته هستند و بین آنها میتوان محتوا نوشت.

در شکل مقابل یک نمونه تگ تکی Self-Closing Tag و یک نمونه تگ که دارای هر دو تگ باز و بسته می باشد را مشاهده می کنید.

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_2″ layout=”1_2″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_color=”” border_style=”solid” border_position=”all” padding_top=”0px” padding_right=”0px” padding_bottom=”0px” padding_left=”30PX” margin_top=”30PX” margin_bottom=”40px” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_2″ first=”false”][fusion_imageframe image_id=”14211″ max_width=”” style_type=”none” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”center” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”تگ img در زبان HTML” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]http://siteamoozi.com/wp-content/uploads/2017/07/HTML-TAG5.jpg[/fusion_imageframe][fusion_imageframe image_id=”14212″ max_width=”” style_type=”none” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”center” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”تگ p در زبان HTML” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”IMG-TAG1″ id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]http://siteamoozi.com/wp-content/uploads/2017/07/HTML-TAG6.jpg[/fusion_imageframe][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”#f2f2f2″ background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”50px” padding_right=”” padding_bottom=”” padding_left=”” type=”legacy”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_color=”” border_style=”solid” border_position=”all” padding_top=”0px” padding_right=”30px” padding_bottom=”0px” padding_left=”30PX” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_1″ first=”true”][fusion_text]

نکته ۱ : در بین تگ های باز و بسته محتوا یا Content قرار میگیرد.

نکته ۲ : تگ های تکی ( Self-Closing Tags ) ، در داخل خود می توانند شامل خصوصیات ( Attributes ) شوند.

نکته ۳ : در برخی المنت هایی که شامل تگ باز و تگ بسته اند ممکن است، داخل تگ های باز خصوصیات ( Attributes ) قرار گیرد.

نکته ۴ : تگ بسته هیچ گونه خصوصیت و مقداری نمی گیرد و تنها به منزله نقطه پایانی تگ لحاظ می شود.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” type=”legacy”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” hover_type=”none” border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ type=”1_1″ first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]

مفهوم تگ در زبان HTML بررسی ساختار تگ در صفحه وب – اختصاصی سایت آموزی

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

محتوا نمایش